Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)

why do I need a grid? Is it for scaling between desktop and mobile?

Such a fantastic video, thanks so much

Thanks Mizko it's very useful

Thank you so so much for this tutorial

Horizontal Grid:

To get started, first select the 'Frame' tool. After that, choose 'Desktop 1440x1024' as your frame starting point.

Select the frame, then navigate to the 'Layout Grid' section in the Properties Panel on the right-hand side. Click the '+' (plus) icon to create a new grid.

To customize your grid, first select the layout grid settings.

Change the 'Grid Item' dropdown to 'Columns'
Set the 'Count' to 12
Ensure the 'Type' is set to 'Stretch' for responsiveness
Adjust the 'Margin' to 70
Keep the 'Gutter' value at 20
Vertical Grid:

Select the frame, then navigate to the 'Layout Grid' section in the Properties Panel on the right-hand side. Click the '+' (plus) icon to create a new grid.

Layer both grids to resemble the following:
1000 rows (8px)
12 columns (Auto)
To customize your grid, first select the layout grid settings.

Change the 'Grid Item' dropdown to 'Rows'
Set the 'Count' to 1,000
Change the 'Type' to 'Top'
Change the 'Height' to either 4, 8, or 16
Change the 'Gutter' value to 0
Tips:

Small Nudge and Big Nudge Settings:

Press ⌘ + , to open the Preferences menu.
Scroll to the bottom of the Preferences menu and select 'Nudge Amount'.
This will navigate you to the 'Small Nudge' and 'Big Nudge' settings.
Set 'Small Nudge' to 1.
Set 'Big Nudge' to 8.
Grid Visibility:

Show Grid: ⌘ + G
Hide Grid: ⌘ + G

Really helpful; thank you! Question: on your phone margins, why 35 and not 32 or 40 (divisible by 8)?

This tutorial is fucking brilliant

isnt it shift g for hide

thank you so MUCH!!!

This is a great video, but I'm a little confused as to why the margin is set to 70 when 70 is not divisible by 8. Shouldn't the margin be 64 and the gutter 24? Even if you're designing in 4pt, shouldn't the margin be 68 and the gutter 20?

Hi Mizko, 16:9 (1920x1080) vs 4:3(1440x1024): Which is better for design dashboard? Can you sharing why you choose it?

Thanks - saved me a lot of time fiddling around!

AWESOME VIDEO

bro this is so helpful, wooow, god bless you

Thank you so much!!! Amazing tutorial! Could you explain what's a soft and hard grid and when we must used them?

Excellent tutorial

how did you add the measurement on the side? and the upper area

Hide grid view option is Shift + G

thanks

Thank you

thanks for sharing

THAK

I have all the snap preferences turned on but my objects aren't snapping to the grid. What setting should I change?

No joke, this is one of the best and certainly most helpful tutorials I’ve watched in helping me setup a new project as a new Figma user.

This really helped me. Thank you so much!

UI Designer by 2024

I TA for a design boot camp a few night's a week, and I just wanted to send a massive "thank you!" your way. Our curriculum doesn't have nearly enough wiggle room to teach them how to work smarter in Figma. I took one look at my first cohort's design files and said "y'all need Mizko." Between sharing your content & the Figma playground files, I've watched the light bulb click on for so many students in real time. Thanks for doing what you do!

Gutter has to be 8pt too

For the latest Figma 2023, many things changed, i cannot copy the grid to another frame, the grid hotkeys also changed. Really this update disturbs my learning progress alot.

I just love this Video!
Thank you very much for such a great learning to make us pro designers
Love you a lot!

I love this!👏👏👏

EXACTLY the video i've been looking for, I needed some exact numbers and settings for different screens. Thanks a ton! :)

Very useful! Thank you for making this short and easy to follow videos.

Thanks for the video! Do you have a tutorial/lesson for how you came to the responsive grid values of 70 margin and 20 gutter? I'd like to know the methodology behind knowing which gutter+margin+column count values work best in conjunction when working on an 8pt grid.

Thank you for this!

Wow man U explained grid system in such a easy way 🤩

Thank you, Mizko! Your tutorial helps me a lot!!

You just made my life soooooo much easier, thank you!

"...the dev will love you..."
No, Mizko...i LOVE you!
Thanks for this great and helpful tutorial, my brother!

Thanks! I've been designing for a couple years but just doing very small projects for different companies. I haven't needed to use a grid but I do think this will help me and devs so much. Will probably have to change how I do auto layout though

So its the same for web and phone?

I wouldn't recommend to change the number of grid columns in a smaller layout. This is very annoying for devs. Just span over the columns!

Hi Mizko, why margin 70 and gutter 20 ?

I'm an old web designer but learning new and better ways of working all the time! Thank you!!

Can we put single column grids count 8, margin 24, gutter 16 for iphone 14 pro Max?

BRO SAID 13 LIKE HE WAS PISSED AT THOSE DESIGNERS

Very helpful content! Thank you so much 💯