Daniel Scott
@dan
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.
Columns, margins, and gutters together form a column grid.
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.
A manuscript grid is often used to guide text blocks across a page.
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.
A 12-column grid is perfect for bringing balance to a design.
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.
Modular grids are great to manage more complex layouts.
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.
A baseline grid allows us to adjust text by its baseline position, creating balance and higher legibility
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.
Hierarchical grids help us set up our design according to the content relevance in a page.
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.
To add a new frame to our project, we need to use the Frame tool.
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.
Add a grid to your frame to start building an optimized layout.
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.
Layout grid settings will help you choose the more adequate grid style settings for your layout.
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!
You can select grid, columns or rows as grid style.
With the Columns type selected, we find ourselves in front of a whole new set of options.
We can use additional settings to customize our grid.
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!
The 12-column grid is perfect for a symmetrical and balanced layout approach.
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!
12-column grids are also functional in mobile screen prototyping.
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…
Working with different screen sizes will make us adjust some of the grid settings for improved results.
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?
Always plan your grid settings according to the screen size you’re designing for.
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!
Adding margins to a design for a small screen increases visual comfort and usability.
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.
Make sure your nested frame is selected, or your object is set as a frame, before adding a layout grid.
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.
Set the column number you feel will better serve your design planning.
Now we can work the layout inside this frame, using both layout grids to keep everything harmonized, if necessary!
We can now add new elements to our nested frame.
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.
Constraints are excellent when you are designing responsive solutions.
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.
Constraints will cause layout elements snapped to a grid to change along with it.
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!
Saving grid settings as a grid style is an incredible workflow method.
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.
Be smart when giving names to your styles. They save time and facilitate sharing your work with others.
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.
Apply your saved grid style to a new mobile frame with only two clicks!
And we do it again for our UI card frame.
We have saved grid styles for different elements so they can be used all across our design.
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