Baseline grids

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.

1. A grid that is built around line-heights
2. 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.