Mobile Layouts and Grids System for the Pixel-Perfect Mobile Designs

We need layout grids, a lot. If you are not using a layout grid in your design, you are making a big mistake. I explained how you can set a layout grid for your mobile designs.

Mobile Layouts and Grids System for the Pixel-Perfect Mobile Designs
Photo by Simone Hutsch / Unsplash

I prefer a symmetrical and organised design to an aesthetic design. Especially on SaaS platforms, this is even more prominent.

Yes, maybe a beautiful landing page can achieve the conversion rate expected by the CEO, but it is not easy to achieve this rate with a design prepared with randomly positioned elements.

For this reason, I advocate that every design should be made using a layout grid both in terms of easy responsive design and to achieve a symmetrical page layout.

Of course, I'm not talking about design trends like brutalism here.

Now that I have finished the introduction, I can now explain how to use layout grids and layout grid systems on mobile.

What's a layout grids?

Layout grids are used to align the elements in the design to the frame. It provides a visual structure in our design. Thus, our designs remain logical and consistent on different devices and platforms.

List of the terms that you need to know

layout grid terms explanation, columns, gutters, margin
Layout Grid Terms Explanation: Columns, Gutters, Margin
  • Columns: It's called columns. It allows you to divide the screen into equal parts and create an order with these parts. The layout grid system is completely based on these columns.
  • Rows: You don't need to use rows when using a Layout grid, but I think it is very useful when aligning some things. Whether you use it or not is completely up to you.
  • Margin: It is the name given to the rightmost and leftmost margins of the columns on the page. These spaces form the basis of the page layout. It ensures that the design does not stick to the edges of the device on which it will be displayed.
  • Gutter: The space between the columns is called the Gutter. This gap is usually 16px.
  • Nudge Amount: Nudge amount is a necessary setting for Figma. We often need to make adjustments with the arrow keys on the keyboard. There are two types of nudges when making this adjustment. One is a small nudge and the other is a big nudge. The small nudge is made as 1px, but the large nudge can change by default. Since we always use ratios of 4 and multiples of 4 in our designs, the ideal large nudge amount is 8px.

Creating Layout Grid for Mobile Design in Figma

If you want to use a layout grid, it is very easy to do this in Figma. You can easily use a layout grid for mobile by applying the settings in the image below.

How to create a layout grid for mobile designs on Figma?
How to create a layout grid for mobile designs on Figma?

Nudge Amount Adjustment in Figma

You can set the Nudge Amount from Figma's preferences menu.

How to change the nudge amount on Figma?
How to change the nudge amount on Figma?