Layout

↑ Click on the frame to view in Figma.

 

Layout grids help you create visually appealing and organized designs using consistent spacing, alignment, and proportions. Learn how to use them in Figma and leverage constraints to create responsive designs that adapt to different screen sizes.

 

 

Basics

---

 

Turn On / Off Grids

There are several different ways to turn on the grid in Figma. One way is to click on the “View” menu at the top of the screen and then select “Layout Grid.” You can also use the keyboard shortcut “Ctrl+G” to toggle the grid on and off. Another way to access the grid settings is to click on the small icon in the bottom-right corner of the screen.

 

Apply and Remove Grid Styles

Layout grids can only be applied to frames; this means you can use them for any top-level frames sized for a device (desktop, mobile, tablet), frames nested within your design, or even frames inside your components.

To apply grid styles in Figma, follow these steps:

1. First, select the frame you want to apply the grid style.
2. Next, navigate to the "Design" tab in the top menu and click "Layout Grid"
3. From the dropdown menu, select the grid style you want to apply

That's it! You can now use the grid style to help align and organize the elements within your frame. Don't forget to adjust the grid style for different breakpoints to ensure your design looks great on all screen sizes.

 

Temporarily Hide Specific Grids

Temporarily hiding the grid from your design is easy, thanks to the "eye" icon. Click on the icon to hide the grid and click on it again to make it visible.

 

Choosing the right grid

Consider what grid type ­— column, modular, container, or baseline — best suits your needs. A modular grid may be the best fit if one item on your page is always more important than the surrounding elements and you’d like to define a hierarchical layout. For example, modular grids are great for dashboards. If the content you must display is highly variable, consider using a column grid, which provides flexibility when designing. For example, elements and content can span across multiple columns or modules or just one to fit design needs.

 

 

Nested Grids and Frames

---

 

The Main Navigation Top Bar and Side Panels are out of the Content / App Canvas; you only apply grid styles to frames nested within your design safe area. So feel free to get all Matryoshka on your design and create grids within other grids or frames to your heart’s content.

Once you begin to leverage this, there are infinite ways to use grids as visual aids within particular areas of your design.

 

 

Additional Tips

---

 

Using constraints with layout grids

In Figma, constraints allow you to define how elements are resized in relation to their parent frame. For instance, if you want an element fixed to the top right of a frame, such as a close button, applying constraints ensures that the component remains fixed from the top and right edges, regardless of the frame's size.

On the other hand, applying constraints to an element within a frame with a layout grid makes the constraints relative to the nearest column rather than the frame's boundaries. This allows elements to remain fixed to specific columns or rows, with a consistent distance (gutter) between them, especially when using stretch grids. This approach results in more realistic scaling behavior, as shown in the gif below.

Resizing constraints - video from Figma’s resources

 

Properly setting constraints in Figma allows you to resize items relative to the layout grid, which helps maintain fixed column gutters and margins for a consistent design. By applying constraints to specific areas within nested frames, each with its own grids, you can independently define the resizing behavior, allowing for more control and independently defining the resizing behavior of specific areas within your design.

Resizing constraints - video from Figma’s resources

 

Once the grids and frames are set up, we can add elements to our design that can also resize relative to the grids on the parent frames.

 

 

Breakpoints

---

 

Layout Breakpoints help you start working with responsive design in mind. Breakpoints give designers and developers an easy way to control the layout of a design as it scales up from mobile to desktop. This helps us cater our designs to all types of device sizes without compromising on the UX. A set of breakpoints makes communicating the correct behavior of designs across device sizes easier.

What does this mean for you? When you need to show how a design scales up and is responsive, use the following frame sizes in Figma:

Example frame sizes:

• 375px to design for “Mobile” (320 - 767px breakpoint) behavior
• 1920, 1440 and/or 1280px to design for “Desktop” (1024px and larger breakpoint) behavior

Besides the "Mobile" breakpoint, designing or testing the most negligible device size in a breakpoint's range is good practice when showing responsive design behavior. For example, if you're planning for a desktop using a 1920px frame, test your designs at 1440 and 1280px to ensure users using smaller screen sizes also have a great experience using our apps.

 

Prototypes

When prototyping in Figma, designers often mock up their designs in devices for a more realistic feel - This is done by selecting the device they want their prototype to appear in from the "Prototype Settings - Frame". The table below can come in handy when selecting the grid style for your chosen device.