How to Set up a Responsive Grid System in Figma

Hi, everyone! 

In this post we will have a closer look at layout grids in Figma. We’ll start off in easy mode, picking up the basics, and finish with some bits of more advanced stuff.

I feel that many early designers don’t invest much time in grids when structuring a layout. They can’t wait to start picking images, colors and fonts and watching it all come to life! It’s also acceptable to have a more fluid style or to arrange things as you go, but I believe that if you learn and understand the full potential of layout grids, you may find a strong foothold that will improve your designs and create a much more significant experience.

So, join me and explore the surprisingly fun world of rows and columns (honest!) and how they can bring incredible balance, responsiveness, and consistency to anything you create in Figma!

These tips are from my course Learn Figma UI UX Design Essentials. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

What are Layout Grids?

Grids are a customizable set of lines, columns, and rows that help define layout rules in a design, from sizing and spacing to balance, focal point, or hierarchy. Grids have three key elements that we can adjust to a particular project we’re working on:

• Columns – define content placement on our layout.

• Margins – negative space between outside columns and the edges of our frame.

• Gutters – negative space between columns.

Grids are sized from what is called a base unit – the value of 8 pixels is frequently established as base unit because of its easy divisibility and the fact that most screen sizes are divisible by 8. Grids that comply with a base unit in all elements will ensure consistency and speed up our work, from the early design stage to development.

Keep in mind that this base unit may also apply to content size and padding, like buttons, cards, forms, and icons, but let’s keep grids as this post’s main focus.

Standard Layout Grid Types

Manuscript (or single-column) grid

This is the simplest grid possible. It holds only one column and sets left and right margins. It’s great for hero images and blocks of text. It’s often used in editorial design.

Column grid

This is the most frequent grid you’ll see. As the name suggests, it is formed by evenly spaced vertical columns separated by gutters. They are frequently based on a 12-column set that can be divided into lower numbers when designing responsive pages.

Modular grid

These grids combine intersecting columns and rows and are great for both horizontal and vertical placement and alignment of layout elements in a page.

Baseline grid

These are used essentially for text placement. They consist of a series of horizontal lines that are evenly spread on a page and our type is aligned along these lines as if written on a lined page.

Hierarchical grid

This is one of the most common grids in web design. They are much more flexible and intuitive, as they establish how elements are aligned and spaced in a page based on information hierarchy, content, and style.

There is a wide array of grid setups you can plan and apply to a design. Invest some time with them and enjoy the results!

Designing with Layout Grids in Figma

We’ll check out three incredible features in Figma while using layout grids:

• We can apply grids not only to our top frames, but to any other frames or components nested inside of them.

• We can apply constraints to grids when designing for multiple screen sizes.

• We can save our grids as Styles.

Brilliant, right? Let’s see how all this magic happens in Figma!

This step-by-step guide is based on classes from both my Figma UI UX Design Essentials Course and my Figma Advanced Tutorial, so make sure you jump into Bring Your Own Laptop after reading this post and sign up to become a Figma Legend!

Working with column grids in Figma

Follow me as we set up a column grid to assist us with designing responsive Desktop and Mobile pages!

12-column grid on a Desktop layout

Let’s start off by adding a new frame to our project. It’s as easy as picking the Frame tool from the top toolbar, “Desktop” from the right sidebars, and then the screen size you prefer. For this tutorial, we’ll go with a common “desktop” size 1440 x 1024 pixels.

Making sure our frame is selected (this is our top frame), we move to the right sidebar, or Properties Panel, find Layout Grid and click on the Add or + button. The one with the four dots next to the “+” button will open the Styles panel, but we’ll get there a bit later in this guide, so, right now, let’s focus on adding a layout grid.

We have new information inside the Layout Grid panel and a new grid over our frame. We want a Column grid, so we move to Grid (10x), this means that we are looking at a grid formed by 10x10 pixel squares and click on the icon next to it to open the Layout grid settings and work our magic from there.

Inside the Layout Grid Settings, we move to the dropdown on the top left side, click on it and choose Columns from the three available grid types: Grid, Columns, and Rows. They pretty much explain themselves, so let’s press on!

With the Columns type selected, we find ourselves in front of a whole new set of options.

Count: The number of columns on your grid. Let’s go for 12. Why? Well, it is the industry’s standard, compatible with many frameworks developers will be using further ahead in the product development process, and also because you can easily break it into halves, thirds, or fourths, and so on. This is also very useful when you’re working with responsiveness and checking for accessibility issues.

Color: set the columns hue and opacity level. Remember you can adapt grids to your personal preference, you will hide them when presenting your prototype.

Type: Stretch automatically defines column Width so they evenly fit the entire length of our frame. Left, right or Center types align the columns inside our frame and allow for manual column width setting.

Margins: is set to zero by default. If we change its value while Stretch is active, Figma will update column width to fit our frame.

Gutter: is set to 20 by default, and as we’ve seen, defines the white space between columns. Remember that gutters separate our columns, margins part the first and last columns from the frame’s left and right edges, and they can differ in values. You can have a Margin value of 36 and a Gutter value of 24, it’s all up to the layout you’re planning for your design.

 Have a look at a layout example that displays why the 12 rule is so efficient!

You can see we can set up a top nav bar that fits the whole frame, add a hero image placeholder that fits 10 columns, and four UI cards for content that can also be evenly distributed across our grid.

No complicated math, here.

If we consider our initial frame’s dimensions, add a 12-column grid with planned margins and gutters and BOOM! You’re on the road to UI happiness, express your creativity and Figma will crunch the numbers for you. Isn’t this awesome?

12-column grid on a Mobile layout.

Now let’s think about screen sizes. We’ve started our desktop prototype and now we want to design its mobile version, with bulletproof responsiveness! 12-column grid?

Absolutely!

Same process. One thing we will need to change is the Gutter value. Since we’re working on a smaller screen, we’ll need to adjust it to a lower number. Let’s go with 6. Next, we had our UI components to our mobile frame and before you know it…

Here we go! Same top nav bar, same hero image, same UI cards, all balanced and evenly placed across our 12-column grid, ready for the next stage! Brilliant and so easy!

Margins and Gutters

Let’s have a closer look at margins and gutters, they are also a fundamental part of layout grids and UI design.

Margins and gutters add some “breathing room” to a design. Users feel less overwhelmed with all the information they are looking at. We want the user flow to be as comfortable as possible so decisions can be made without any struggle or frustration.

Margins are important for both large and small screens, for some different reasons.

On a large screen like a 4K desk monitor, adding a high margin value will bring all the elements in our design closer to the center of the screen, so users' heads don’t have to go left-to-right-to-left all the time. It’s not Wimbledon, it’s a website’s homepage or product page, right?

When we think about margins on a mobile device, we’re thinking about fingers! Huge thumbs, skinny thumbs, large hands, small hands, so spacing is key in a small screen. Margins move some actionable elements away from the edges and make it easier for users to enjoy their time with our designs!

Now we’ll have much more time to work on images, iconography, and other contents that will make our designs hit the top of the charts faster than a Taylor Swift single!

Working with column grids in Nested Frames

Here’s another cool thing we can do in Figma, and I’ll show it to you in just a few steps.

We’ve seen layout grids placed over our Desktop or Mobile top frames, right? But now you may be asking: “hey, Dan, but what if I need to arrange the layout of a frame placed inside my top frame?”

“Well…”, I answer, “…you can add a layout grid to your nested frame. Follow me!”

First, we select our UI element, and if it’s not already a frame, we right-click on it and pick Frame Selection – or we use the shortcut Command + Option + G on a Mac or Control + Alt + G on a PC.

With our frame selected, we move to the Properties Panel, inside Layout Grid we hit that “+” button, and finally the Layout grid settings button. Next, we set the type to Columns and adjust the remaining settings.

Now we can work the layout inside this frame, using both layout grids to keep everything harmonized, if necessary!

Grids and Constraints in Figma

We’ve seen some details on how we can use layout grids to assist our responsive design, let’s have a quick look at how grids and constraints work together to make it really easy for you!

Let’s use a desktop frame with a 4-column layout grid. We place a UI card inside and copy it three times, so we can snap each one into a column.

Now we apply the constraint rule. You can set it up in the Properties Panel, inside Constraints. For this example, I’ll choose Left and Right and Top.

This means that when we change our desktop frame’s size (as if scaling down from a large screen to a smaller one), the UI cards will be “stuck” to each column’s left and right sides and be resized along with them.

Amazing, right? I bet you are thinking of some incredible responsive projects that you believed would take forever and a day to design.

Saving a layout grid as Grid Style in Figma

And one more quick Advanced tip before we go…

Back to our previous mobile “Inception” example of two different grids inside two different frames, this is an easy workflow trick that can save hours and hours of hard work.

To make sure we keep consistency throughout our project, we may need to use these grid settings in different frames, components, and screen sizes. As we do with text, color, and effects, we can create layout grid styles that can be applied all across our designs. How do we do it?

Make sure you have your frame selected and go to Layout Grid in the Properties Panel. Click the Style button (the one with four dots) and then the “+” icon. All we have to do next is name our Style, add a description, and hit the Create Style button. Done!

Next, we select our UI card and repeat the process. Make sure you pick names that are easy to connect to a specific element in your design.

Now all we need to do is to create some new frames for our next screens and components. With your mobile screen frame selected, we head to Layout Grid, click on the Styles button, and click on the style we need.

And we do it again for our UI card frame.

And that’s it!

Layout grids are key to planning and implementing a strong and cohesive design. Use them as often as you can, and don’t just throw a couple of columns or rows over a blank page. Really understand how they can help you, not only with organizing elements inside a frame, but to come up with different perspectives and concepts, and a more enjoyable user experience.

What’s Next?

This was fun! You can dive deeper into Figma at Bring Your Own Laptop and develop the skills you need as a designer for web, graphics, video, you name it!

When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan