In the 1950s, a small group of Swiss designers started searching for a better way of systematizing how information was organized on the printed page. Their work came to be known as grid design and a handful of pioneers like Joseph Müller-Brockmann and Karl Gerstner produced work that was as beautiful as it was rational.
Today their ideas are still foundational. Grids are the invisible scaffolding that give a design coherence. Their work took for granted a few things, though: a fixed page size with precise control over type-size, line-height and margins. Because of this, it can often feel incompatible within our current age of designing for a fluidity of device sizes and screen densities. We at Figma believe this is less a problem of philosophical incompatibility, and more an issue of contemporary digital designers lacking the proper tools. We think grids are as foundational for our flexible canvases as they are for a fixed page.
Configured as global styles, this Figma grid template will help you to build balanced templates. Contains mobile and desktop layouts with 16/24 gutters. What is Grid in Figma At first, we shall understand what exactly Figma responsive grid are. Basically, Layout Grids in Figma helps the users to align objects within a Frame. With the help of Layout Grids, it is easier to receive a visual structure to the designs.
As we started designing for screens, much traditional knowledge was thrown out due to the technical limitations of the new medium. Nowadays, we have better support for typography and better control over layouts, but the tools we are using have not yet adapted to designing for screens. Even for web design where browser sizes are fluid, designers are still working with tools created for fixed layouts. A designer or an engineer then has to figure out how to translate a design based on the conventions of the past into the present reality of knowing very little about how the design will be displayed. Making sure that the design translates would either involve a lot of repetitive copy/pasting between artboards of different sizes or some sophisticated guesswork.
When the first iPad was introduced, many designers welcomed the return of the page and of edges — comforting boundaries that help anchor a design. With new devices introduced every year, it is now obvious that the ‘page’ in digital design can take any size and shape. Less obvious is how a tool can allow you to design in a way that is flexible yet also allows for a fine degree of control.
When I started working at Figma, I thought this was a challenge our team could tackle. Our approach is to create a set of tools built for flexible screen sizes that allow you to create very powerful layout systems when properly combined. The toolset consists of a) constraints b) layout grids and c) the ability to nest a frame inside of another frame. (We call them frames, other people call them artboards.) You can get started using just one of these tools, but the real power comes from combining them.
We started with constraints. Constraints allow you to specify how an object should respond as its frame changes size. You can tell an object to stay to the left, the right, or to stretch to fill up space.
Constraints give you a very basic framework for creating designs where elements stick to the edges of a frame or are centered in it, but we know most designs are a bit more complex than that. This is where grids come in. In Figma, grids are the device that allows granular control over how constraints work.
Take a look at this design. We use a grid system to keep everything in balance, but how would you want the design to change as the screen resizes? What if you want X to grow with the change in screen dimensions? Our solution has been to allow grids to stretch, and our constraint system knows how to work hand-in-hand with the grid. If you stretch a box over two grid columns, the box will grow and shrink to align itself to the grid as the screen size changes.
Beyond the obvious use of a column grid to dictate the flow of text on a web-page, column grids are useful for helping align all kinds of elements. For example, consider a row of icons in a toolbar with each icon aligned to a column of the grid. At that point, the grid and constraints alone do not allow the icons to respond to the grid whilst also allowing for a different layout of the main content. However, it does when you nest one frame inside of another.
Frames within frames
Nesting frames is the last piece of the puzzle that gives you full control over the alignment of your design as a whole. This ability is also one of the reasons why we chose not to call them artboards, frames go beyond artboards in the functionality they offer. Using multiple frames for the same design also allows you to set up different layout grids for different parts of your design.
If you’re familiar with HTML, you might notice this structure is similar to how you would translate a design into code. The idea of a nested frame has a lot in common with a nested
A modern design tool
Moving beyond static layouts is just a start. Where else is there room for improvement? This is an opportune time to question how our design tools work, think critically about how well they really meet our needs, and to try new solutions. Some of the most interesting solutions may come from looking to the past for ideas.
The thoughts presented here are the result of countless conversations at Figma about design tools, grids, and the history of design. Evan Wallace deserves special mention for originating key concepts.
As an aspiring designer, one of the first proper books I purchased was Josef Müller-Brockmann's Grid Systems in Graphic Design. The book was fascinating to me because it helped codify the many ways a grid could provide structure and consistency, improve readability, and create emphasis and hierarchy in design. It's the first text to formalize many of these concepts into such concise words, and it's probably one of the most important tomes on the topic. In the design world, there's a common joke that you can tell how long someone has been a designer by the color of the spine of their Müller-Brockmann copy.
By carefully constructing a grid that's suitable to your content, you can define structure, hierarchy, and rhythm in your design. When done right, the scaffolding of grids can remove the guess work from many aspects of your process. Different types of grids can also help you establish a rational approach to type scales, positioning, sizing and spacing.
Although these principles originated in the relatively 'rigid' medium of print, I remain convinced now more than ever of their importance. In the era of screen design, grids can be instrumental in establishing consistency across a wide variety of device and viewport sizes, especially for teams that need to create a cohesive design experience for multiple products and platforms.
Despite all the benefits of grid systems, for a long time I struggled to configure grids effectively in my own design process—they often didn't provide me with the flexibility I wanted (in other design tools). So you can imagine my happiness when I discovered how layout grids worked in Figma. Figma offered added functionality like styles that removed much of the friction I had previously experienced.
In Figma, you can apply more than one grid as a property to any frame (and independently toggle its visibility). That was a game changer, and quickly became an essential part of my workflow. In speaking with other Figma users, I learned that many still hadn't had the lightbulb moment I did in uncovering the useful capabilities of this feature. So, I thought I'd share a few ways that I use layout grids to speed up my design process, from resizing frames to visualizing spacing and padding.
Consider this post a little grid quo pro...in return, all I want is for you to spread the word to other Grid Newbies out there! (Excuse the dad joke...could not help myself 🤣.)
Layout grid basics
Before I dive into the more advanced use cases, let's cover the basics of where and how you apply grids. If you're a grid pro, skip ahead to the next section.
Apply a layout grid to any frame - Layout grids can only be applied to frames; this means you can apply them to any top level frames sized for a device (desktop, mobile, tablet), frames nested within your design, or even frames inside your components.
Multiple grids on a frame - You can add as many different layout grids to a frame. This means you could stack different types of grids on a single frame. Each of those grids can also be selected and pasted onto other frames since they are applied like other properties in the right hand sidebar.
Grid appearance - You can control the appearance (color and opacity) of each grid so they are easily differentiated.
Types of grids
There are three different forms of grids to choose from: grid (uniform grid), column, and row. Uniform grids create a series of uniformly spaced fields across your frame (imagine a sheet grid paper) at whatever size you specify. The others have a few more options to create columns and rows. Within column and row grids you can also control their position and scaling behavior. We cover most of this in our help center article, so we won't go into all the details, but here is quick cheatsheet to highlight some of the key differences.
A baseline grid is one that's established from the baselines your typography sits on. These appear as visual aids in your design spanning the width of your design and repeating vertically at an even internal. What that interval is, is largely dependent on your typography scales and line-heights. In many 8pt grid systems, a 4pt baseline is used. This basic unit makes the math easy and scalable as you start to setup different type sizes and line-height combinations.
Using one can help you align one piece of type to another while giving you a unit of measure to help establish the sizing and spacing of other elements. In many design systems, such as Google's Material Design, the baseline grid is a foundational part of defining type size and line-height parings, as well as spacing for margins and padding.
If you've ever wanted to create a baseline grid in Figma, there are a couple of different ways to do so using a row grid.
- A grid that is built around line-heights
- A grid that is built around the actual baseline that text sits on
Since you have some control over the appearance of your grids, you can create the right kind of grid for either approach. By using a row grid, with the type set to 'Top', we can create the foundation for a baseline grid. Usually it's a good idea to set the row count to a high number that will allow you to accommodate longer scrolling frames. From there you can choose to highlight alternating rows, or thin lines using a combination of the height, gutter, and color properties as illustrated below.
Now that we've covered the basics, let's take a look at how we can combine them, share them, and use them in a variety of ways.
Unlike other tools, you won't be limited to a single grid at the 'artboard' level. Since you can apply a grid to any frame, this means you can apply them to frames that are nested within your design. So feel free to get all Matryoshka on your design and create grids within grids within grids to your hearts content.
Once you begin to leverage this, there are infinite ways to use grids as visual aids within particular areas of your design. You can help differentiate among them by specifying the color and opacity of each grid.
Using constraints with layout grids
When you apply constraints in Figma, they help you define the resizing behavior of elements in relationship to their parent frame. So if you wanted an element to stay pinned to the top right of a frame (like a close button), applying constraints will ensure that the element maintains its distance from the top and right without changing its size as the frame grows or contracts.
In contrast, when you apply constraints to an element inside a frame that has a layout grid, your constraints will be relative to their nearest column (instead of the boundaries of the parent frame). When used with stretch grids, this will allow your elements to stay fixed to columns or rows and maintain a fixed space (gutter) between them. It results in much more realistic scaling behavior, as you can see in the gif below.
By setting constraints appropriately, you can resize items relative to the layout grid, which helps you maintain fixed column gutters and margins.
Using the same method, we can add constraints to our previous example that highlighting nested frames (each with their own grids). This allows you to independently define the resizing behavior of specific areas within your design.
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.
Using grids to visualize padding
Sometimes you need to visualize padding to ensure content stays equidistant from the boundaries of an element. You can create grids to help with that by styling a column and a row grid with a single row/column, setting the gutters to 0 and the margin to your preferred spacing. If your design system has standardized spacing values for padding, you can quickly add these and apply them to frames or components within your design.
Sharing grids with styles
As you're creating grids, you might want to make different variations for layouts on different device sizes or other common use cases. To make it easier to apply those grids across frames, files and projects, you can combine several of them into a single grid style. That style, like other styles and components, can then be shared from a team library. Easy peasy.
Get griddy with it
That's all for today's quick hit on grids. I hope these tips uncover some of the lesser known ways to leverage layout grids in Figma, and I would love to see how you're using them. Time to channel your inner Müller-Brockmann and be sure to share your experiences with the Figma community on Spectrum.
Figma Grid Layout
P.S. If you want to see all of this in action, tune into Multiplayer Live tomorrow at 10:00 am PST / 1pm EST.