My Final Figma Design Masterclass (2,500+ college students. 90+ Movies. 10+ hours.)
👉 https://thedesignership.com/programs/the-ultimate-figma-masterclass
Shipfaster UI – Superior Figma Design System (2,000+ Designers, 6,000 parts and variants, 150+ international kinds and a couple of,800+ media belongings)
👉 https://thedesignership.com/merchandise/figma-design-system/
Define – Figma Wireframe Equipment (350+ parts and variants)
👉 https://www.thedesignership.com/merchandise/outline-wireframe-kit
Signal as much as my e-newsletter for unique content material:
👉 https://mizko.internet/e-newsletter
Comply with me on IG (Every day updates):
👉 https://instagram.com/themizko
===
Stage up with me:
Change into a legendary designer: https://thedesignership.com
Private portfolio: https://mizko.internet
Instagram: https://instagram.com/themizko
LinkedIn: https://linkedin.com/in/mizko
Twitter: https://twitter.com/mizko
source
Supercharge your FIGMA Game today.
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 https://thedesignership.com/courses/the-ultimate-figma-masterclass
Shipfaster UI – Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 https://thedesignership.com/products/figma-design-system/
Outline – Figma Wireframe Kit (350+ components and variants)
👉 https://www.thedesignership.com/products/outline-wireframe-kit
Let me know in the comments below if you enjoyed the video and what more you will like to see!
Yours truly,
Mizko
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 1440×1024' 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 (1920×1080) vs 4:3(1440×1024): Which is better for design dashboard? Can you sharing why you choose it?
Any reason you’re using 4, 8 for the horizontal? Why not use increments of 10?
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
Video starts from 01:25. Perfect. Precise. You earned a subscriber.
For designers, your next video is https://www.youtube.com/watch?v=6EuBIwUeF48&ab_channel=Mizko
Hey Mizko, make your video a playlist. Thank you
I gotta say, i've watched a lot of design youtubes and I think your content is amazing man. keep it up and thank you!
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