UI Design

How to Make a Perfect Grid Layout

For Every Device

Hello everyone! I hope you’re doing great. I recently uploaded a video on YouTube.

Watch this YouTube video here https://youtu.be/NSDrpdgn724

But for the medium family, we will learn how to create a grid system inside Figma in this quick tutorial.

Let’s get started!

Setting Up the Grid System in Figma

Step 1: Create Frames for Different Devices

1. Select Frame: On the top left, select the frame tool.
2. Choose Device Frames:

• For mobile, select iPhone 13.

mobile Frame

• Similarly, choose frames for desktop and tablet.

Now, you should have three different device frames on your canvas.

Step 2: Add Grids to Each Device

1. Select the Frame: Click on the frame you want to add a grid to.
2. Add Grid Layout:

• Click the grid layout option and then the plus sign (+).
• Click on the three dots to customize the grid.

Mobile Grid Setup

1. Change the grid type to columns.
2. Set the number of columns to 4.
3. Adjust the margin to 16.
4. Set the gutter width to 8.

Mobile Grid Setup

Desktop Grid Setup

1. Change the grid type to columns.
2. Set the number of columns to 12.
3. Adjust the margin to 32.
4. Set the gutter width to 16.

Desktop Grid Setup

Tablet Grid Setup

1. Change the grid type to columns.
2. Set the number of columns to 8.
3. Adjust the margin to 32.
4. Set the gutter width to 16.

Tablet Grid Setup

Following these steps, you can create a perfect grid system inside Figma for mobile, desktop, and tablet devices.

This grid system ensures a consistent and visually appealing layout across different screen sizes. Happy designing!