Everything you need to know about layout grids

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.