This page provides you with a clear reference for spacing values in pixels, offering both numerical representations and visual depictions for a comprehensive understanding of your layout.
Spacing Reference
The Style Guide – Spacing Page includes four key references:
- Desktop Basic Element Spacing
- Desktop Section Spacing
- Mobile Basic Element Spacing
- Mobile Section Spacing
Each of these references showcases the specific spacing values in pixels tailored to desktop and mobile environments. These values play a pivotal role in structuring your design layout, ensuring a harmonious and visually pleasing composition.
Spacing Scale
All the spacing values featured on this page are controlled by the “spacing scale.”
The spacing scale acts as a multiplier that influences the spacing values dynamically. When you adjust the spacing scale, it automatically updates all associated spacing values, maintaining consistency throughout your project.
It’s crucial to remember that this page serves as a reference guide, and direct changes to spacing values should not be made here. Instead, adjustments to the spacing scale or individual spacing tokens should be managed through ACSS Tokens’ spacing settings.
By utilizing ACSS Tokens and referring to the Style Guide – Spacing Page, you can effortlessly maintain a cohesive and well-structured layout in your Figma projects. For detailed instructions on customizing your spacing settings and utilizing the spacing scale effectively, please refer to our dedicated documentation page on ACSS Tokens spacing settings.