Responsive layout grid in Figma
A step-by-step guide on how to create a responsive grid system
Designing a responsive layout grid in Figma is a powerful way to ensure that your designs adapt smoothly across different screen sizes. Figma’s layout grids help you create consistent, scalable designs that can easily be adjusted for various device screens.
Here’s a step-by-step guide to creating a responsive layout grid in Figma:
1. Create frames for desktop, tablet and mobile
Select the frame tool from the toolbar or press “F” on your keyboard, then click on the canvas to create a frame. You can choose from preset sizes or define custom dimensions for your frame. The first option is more preferable. You can choose Desktop frame for desktop, iPad mini for tablet, and iPhone 14 & 15 Pro for mobile.
2. Add a layout grid
With your frame selected, go to the right-hand side panel under the “Design” tab. Here, you’ll see an option for “Layout grid”. Click the “+” icon to add a new grid. Figma offers three types of grids: Grid (default), Columns, and Rows.
For a responsive design, you’ll first need to create Columns grid. Click on the layout grid settings. And in the dropdown menu, choose Columns. A column grid is used to align UI elements horizontally. Each column in your grid system is exactly the same size.
3. Configure your Columns grid
After selecting “Columns”, you can configure your grid settings. Key settings include:
- Type: If you want to create a responsive grid, you need to choose “Stretch” to make columns stretch to fill the frame.
- Count: The number of columns. When it comes to desktop, common practices suggest 12-column grids for flexibility in design.
- Gutter: The space between columns. This helps ensure that content has consistent spacing.
- Margin: The space between the columns and the edges of the frame.
If you’re creating an 8-point grid, so when it comes to the gutter, you need to choose a value divisible by 8. I recommend setting gutter to 24.
Margins are empty areas on the right and left sides of the grid system. You don’t always want the grid to extend all the way to the edges of your viewport. So, by setting the margin, you can dictate how much empty space you want to have for your container. When it comes to margin, the size of the margin is typically selected in accordance with the width of a container.
All projects are different, and there are no strict rules that define the size of the container. I typically use 1152 points as the size of the container for the desktop. The margin is selected accordingly — in my case, it will be 144pt. How was this number calculated? The size of the viewport is 1440 minus the size of the container, which is 1152 points, divided by 2.
4. Create rows grid
Once you create a horizontal grid, its time to create a vertical grid. Select the frame, and in the layout section, hit the plus button again. This time, change the setting to Rows. For the horizontal grid, choose the type Top because you want the grid to start at the top of the screen. And in the counts setting, type 1000. It will fill all our frames with rows. The offset should be set to 0 since we want to start from the top. And since we use the 8-point grid, the height will be set to 8 and the gutter is set to 8 too. Because we count to 1000, even when we change the height of the frame, we still see rows.
5. Copy grid system to tablet and mobile viewports
Once you finish with the desktop grid, and it’s time to create a grid for your tablet. If you don’t want to start from scratch, you can simply copy and paste the layout grid that you’ve created for the desktop in the tablet frame and modify the values for the horizontal grid.
The vertical grid (grid with rows) will be the same for all three viewports, so you will modify only the horizontal grid (the grid with columns). Click layout grid settings and in column set 8. For tablets, we typically use a smaller number of columns because we have less space to work with. The margin will be 32, and the gutter will be 16.
Finally, you can copy and paste the layout grid from tablet to mobile. For mobile, we decrease the number of columns to 4. You should set the margin to 16 and the gutter to 16. 16 is the minimal recommended margin size for mobile because it guarantees a safe area around your content. Also, 16 is divisible by 8, which aligns with our goal of creating an 8-point grid.
Want To Master Product Design?
Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of product design, from foundational to advanced level.
This post contains affiliate link(s)
