Layout grids provide essential visual structure, ensuring that your designs remain logical and cohesive across various platforms and devices.
The Power of Layout Grids
Layout grids serve as indispensable tools for aligning objects within a frame, offering a clear and organized foundation for your designs. They play a vital role in creating a visually harmonious and responsive layout system, helping you achieve precise design alignment.
Desktop and Mobile Grids
Within the Style Guide – Layout Grid Page, you have the opportunity to explore two distinct layout grids:
- Desktop Layout Grid: A default layout grid value is set to 1280px for the desktop breakpoint. This value often serves as the fixed width for inner containers within section elements, ensuring that the website’s content does not exceed this width.
- Mobile Layout Grid: For the mobile breakpoint, the default layout grid value is set to 390px. Like its desktop counterpart, this value is frequently employed as a fixed width for inner containers within sections, maintaining consistency and legibility on smaller screens.
Enabling the Layout Grid
Initially, when you visit this page, the layout grid is hidden to prevent distractions. However, you can easily reveal it by using a convenient keyboard shortcut:
- Press Shift + G to enable the layout grid and visualize its impact on your design.
Adjusting the Layout Grid
It’s important to note that the Layout Grid settings within Figma are one aspect of ACSS Token’s figma file that you may want to adjust directly within the Figma environment. ACSS Tokens Studio plugin currently does not support setting layout grid values.
To learn how to modify the layout grid according to your project’s needs, please refer to our dedicated documentation page, which provides detailed instructions on adjusting layout grid settings in Figma.