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

[@Mizko]

Supercharge your FIGMA Game today. My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 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) 👉 thedesignership.com/products/figma-design-system/ Outline - Figma Wireframe Kit (350+ components and variants) 👉 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

[@royceeliseo3695]

instablaster

[@lincolnfernando6467]

One question the course has subtitles in Spanish?. Thank you for your contribution

[@obcreation2616]

Hy i want to know How Can i Know Where should i place home page or anything else in page . What is the Font size of different things is it any book if it is plz Recommend me

[@ouhoy]

6:38 to hide the layout grid in Windows, you can use this shortcut: Shift+G or Ctrl+Shift+4

[@chargie3557]

Thank you so much!

[@patrickarmah6646]

thanks it came in handy

[@StrikeFirstFinance]

This is one of the very first videos any new UI designer should watch!

[@Mizko]

Humbled mate! Thank you so much. Glad you found this one useful and banging.

[@luizablanc8118]

Vejo sênior errando, ou seja o vídeo é para curiosos e para todos... 👋

[@seesritual8990]

I did good on watching it then hehe ;)

[@muhammadfikriakramudin5439]

That's right, i've been searching this for a month..

[@Emma4dfuture]

I agree!

[@arikaapanda2909]

Thank you so so much for this tutorial! The vertical grid is an absolute life saver! I'm a beginner and I have been looking for tutorials that can help me understand how to keep the element sizes and spacing consistent, but so many videos just wing it. Things are really stressful when you're learning, looking for a job, finding clients, and struggling. One simple unresolved issue can push you over the edge. I'm so glad I found this tutorial, it really gave me hope to continue! Can't thank you enough! ❤️❤️

[@Stoic_Cat_]

No stress girl, you got this!

[@gispinzon2800]

You've saved my life! I'm a beginner and I try to do my best, but sometimes I lose the basics. :P Thanks a lot!

[@Mizko]

Wooo! Glad you found all the videos useful.

[@samuelerbo]

Thanks so much, Mizko! I am a developer from Ethiopia, and now I am learning Figma. I found your channel so helpful. Please, keep your hard work!

[@israrulhaq9683]

I loved it when you said, "You want everything under control" Amazing!!!. I was frustrated with 35.7 or 30.5 kind of spacing margins etc Good bye to inconsistency

[@aparvashistha9458]

From number of tutorials out there, your choice of topics and the way you explain them is by far one of the most Relevant, Simple, Well-structured and extremely Practical (especially for beginners starting out). Kudos man! Looking forward for more such awesome stuff.

[@Mizko]

Hey Apar! Thank you so much and I really, really appreciate the support and kind comments. It means a lot and I read every single comment that comes through.

[@gogodooshoo4853]

i wish i had found this video a couple days sooner...i have wasted so much time doing wrong things ughhh thank you so so so much for your work!

[@Mizko]

Haha! No problem at all. Glad you found this in the end. Be sure to subscribe and turn on bell notifications so you don't miss out on new videos ;)

[@krunge]

Great and well explained tips! But one question though, why not use 24px gutter instead of 20px when you're using the 8px grid?

[@wagnermangger7602]

and the margen for mobile 32 instead of 35

[@novenlatigo8207]

He's using 4px spacing not 8.

[@joshuakimmis2544]

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.

[@csabahorvathuxdesigner7966]

Hey! Nice tutorial! :) Question: On the mobile version, why you set the margin to 35 and the gutter to 20? Why not 32 margin and 16 gutter? Thx!

[@gwemula]

@Mizko A lot of us seem to have this very question. Would love to hear your thoughts.

[@mjchuang11]

He said these are just examples

[@thekuriousguy]

I have the same question. Is there a logic behind choosing those values ?

[@akankshaagrawal9164]

I was also wondering the same..

[@windmaomao]

This is my thoughts on this. The margin depends on the frame(canvas) width, it's not a fixture number (in reality it depends on user's real browser width), therefore it's slightly arbitrary. You can pick a comfortable number, doesn't have to be 8 multiply, because you can see that might make your inner measurement non 8 multiplier.

[@lisoki9624]

This was very clearly explained and so useful. I've been using the 12 column grid but never used one for the vertical rhythm...doh! You're an excellent teacher. Thanks so much!

[@Mizko]

Hey Lisoki, thank you so much. Means a lot to hear such positive feedback. Glad I was able to clear the uncertainties :) Let me know if there's anything else you'd like to learn. Will definitely cover in the future.

[@CanionDigitals]

Watched the first video on your channel after being referred by a creator on tiktok. This was very help for me as a beginner. Hiding grids on windows worked by pressing Ctrl Shift 4. T'was very different from the Mac shortcut. Thanks so much

[@DeadMatterDesign]

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!

[@Stoobers]

I'm new (and late) to Figma, and didn't know I could do grids like this.... excellent video thanks :)

[@Mizko]

Glad you found this useful!

[@katmiller5884]

I have spent days looking for this EXACT information. Thank you!

[@Mizko]

👋🏼 welcome to the answers to your design life 😁 make sure to sub!

[@platnumvibecom]

Thanks alot for your videos,i am a beginner and your videos are really helpful in making me understand better how to use figma,you are a life saver. I am Michael from Nigeria.

[@scottfwalter]

Thanks. Long-time developer, new designer. I never thought of considering a vertical grid system.

[@Mizko]

Awesome man. Great to have you come by!

[@janwerkhoven]

I've been coding front-ends for over 12 years, used CSS grids on multiple projects and regretted using them every time. I certainly don't speak for other developers, but my experience has been that grids often add more confusion, boilerplating and hurdles to a project than they solve. This is especially true when making pages responsive and super especially when the designs provided don't follow grids. Mizko was the first designer who ever provided me gridded designs (Poncho), so I'm definitely keen to understand what's the buzz about...

[@uiniloy977]

Mizko you are amazing brother. Love from Bangladesh.

[@theuixdude]

OMG!!! one of the best grid setup tutorial so far

[@Emma4dfuture]

You made understanding grids a no-brainer. Thank you for this video.All of the universe thanks you for your service.

[@Mizko]

Haha appreciate it.

[@priscillabiju8760]

Great video, thank you! Question: is there an advantage of using a rounded number (70px) for the desktop margins, instead of 72px (which is evenly divisible by 8)?

[@zsoltbicsak69]

It makes the columns 90px wide. Look at this equation: 1440 - 2*70 = 12*x + 11*20 1440 - 140 - 220 = 12*x 1080 = 12*x 1080/12 = x 90 = x The other options are 76, 82, 88... etc. for the margins, if you want to keep your columns' width integer.

[@kopilkaiser8991]

I found this extremely useful 😊 Now my designs will surely be consistent across all different screen sizes. These grid layout tricks will be a lifesaver in all the inconsistencies I face when aligning elements on the canvas 🎉

[@michaelfashiku1077]

Thank you for your videos and helping potential designers around the world get better & sustain their skill with your numerous video uploads,i am a beginner and your video is of great help to me. I am Michael from Nigeria

[@user-yz4iy4kc6p]

Thank you so much, Mizko. 3:49 - Introduction to vertical grid & layout helps A LOT! Would love to see a video about your Figma plugins. Looking forward to seeing more Design/Figma hacks & tips like this.

[@Mizko]

Thanks Kay! Glad you enjoyed. I’ll be sure to line up your request.

[@emmanuelolubodun1]

Thank you. I was asked to watch a video on Grid system and your video did justice to it. Thabk you

[@Mizko]

Haha! Awesome man. Glad you enjoyed

[@rachelmoldovan8214]

Stumbled across this as I take the Google certificate course for UX and this is wildly helpful. Thank you!!!

[@campingandrelaxing]

I really appreciate those short and to-the-point tutorials! Thank you! It's helpful to learn what's helpful for the designer to do for the developers!

[@melissabarrow9204]

I'm a Figma & wireframing newbie overwhelmed by the complexity of even just setting up for digital wireframing!😅 When I read my 1st couple of articles about grids, my eyes crossed, but after watching your vid. I feel ready to try it out. Great job explaining, thanks!

[@Mimi-ek7uw]

This video is super super useful to my projects since I’m newbie who is still finding a right way to learn UX design. Thank you and I appreciate your video.

[@misalsudhir]

Amazing, complex made simple. I was looking for the same since long. Its literally life saving. God bless you! looking for more valuable videos from you.

[@Mizko]

✌🏼 I have plenty more Figma tutorials coming for you all. Let me know if you have any questions or requests.

[@mayumihashimoto4715]

Signed up to your figma Masterclass! I've done 40% of the course and it's so far so good! It's so comprehensive and easy to understand. Couldn't recommend it enough!

[@Mizko]

Thank you Mayumi! I am so happy to hear you're enjoying it. I hope to see you around in the community.

[@GraveRave]

Been using Figma a while but I just learned something new and I like the way you teach. Subscribed!

[@Mizko]

Hey GraveRave! Woooo. Really happy to hear that. You made my day ✨ Thanks for the support.

[@manalijain1507]

I was searching this grid from very long ago. Thanks for the helpful Goodies too.

[@Mizko]

Thank you!

[@AnthWinter]

This was awesome. Exactly the info I need right about now too. I have been setting up a project recently and wondered how others had done this.

[@Mizko]

Glad you found this useful 👌🏼

[@spencerm293]

I can't hand off another illustrator web mockup to the dev team with a bunch of text explaining what I expect again. Thanks for sharing all this info, and wish me luck learning this stuff.

[@ScottKasprick]

I've been doing responsive design for 10 years (but new to Figma) - I've never done a vertical grid, but I will now!

[@winstonmisha]

But doesn't that imply that we need to set fixed heights on our elements and go away from height:auto? Or am I misunderstanding something?

[@ErlichMaramot]

I'm just started in Figma and just came back in designing websites and apps..this is amazing! and I'm glad that I watch this while I'm still starting my journey...thank you so much! new subscriber here!

[@Nae-rm7uj]

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.

[@reemalhalbouni]

Have you found a resource on this?

[@mitchellelequin6914]

the nudge tip is SO helpful Thanks for the great content!

[@Mizko]

Glad you're enjoying it!

[@AmyeeL]

Thoroughly enjoyed watching this Figma tutorial! I need to start applying this in my wireframes going forward - what I’m doing atm is definitely not efficient! You explained how to use grids really well. Thanks Mizko!

[@Mizko]

Thank you Aims! Really appreciate the kind comments. Glad you found this useful. Really appreciate the support and comments as well.

[@tarunjawla9463]

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

[@diggie72]

Thanks - saved me a lot of time fiddling around!

[@asadmushtaq9972]

Thank you Man, You are really awesome. I'm new in UI but you when ever any question came to mind I just start finding on KZbin and Mizko is the only person with my Answers I find..

[@WaleedShoaib-qp1mo]

Amazing man. You've made my Developers life easier😀

[@RyouichiSanada]

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

[@Mizko]

I LOVE YOU ALL!!

[@njengathegeek]

Hey Mizko, This is my first video to becoming a figma ninjah... Am gonna watch all of your videos.

[@kvm.]

You can also create grid style from the first grid and then just apply that style to other frames. No copy paste needed

[@Mizko]

Thanks!

[@johannadelacruz8846]

Thank you for this video! It was great! I have a few other questions: - How do you decide the margin in desktop? Specially when you have a left menu navigation? - Why the margin on mobile and desktop was 35 and 70 instead of divisible by 4? Thanks!

[@andrew.schaeffer4032]

I had the same question and checked out another video: kzbin.info/www/bejne/d6ezY5-cdrmNia9k. Basically, you want the grid width to match the page width or content width in your website. I know my page width is 1280px. So, regardless of how big a screen my website appears on, the content area will never exceed that width. Now that I have that number, I just make sure the margins fill up the remaining space of whatever frame size I choose (That should answer your first and third question). Not sure of the answer for your second question about the menu nav. My guess would be to make the page width the width of the page content plus the nav bar (and whatever margin is inbetween).

[@hardlum]

BEAUTIFUL. NO NONSENSE. NOT A SECOND WASTED. SUBSCRIBED.

[@evasanchez8625]

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

[@DaJungleDred]

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

[@Jt-nh3py]

I’ve been looking for this kind of video all day! You’re the best

[@dhaloh]

That vertical grid is so smart. I never did those.

[@Mizko]

Now you do! Glad you found this useful.

[@lamiwilliams]

Same. It'll be my go- to grid style from now

[@steliospapadopoulos4099]

Great and explanatory tutorial for figma grid system I would to see how t make perfect navbar and footers. Keep the good work! thanks Mizko

[@Mizko]

Thank you Stelios! What specially do you want to learn about nav bars and footers? The layout? Interactions? Responsiveness or everything? Including UX?

[@Mizko]

Also really appreciate the comment and support. Keep it up ⚡️

[@mxrd2]

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!

[@KHighlands]

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

[@vaibhavnamburi2756]

Great tutorial Mizko! Thanks for this, always struggled with grid layouts as a developer learning figma

[@Mizko]

Thanks V! Glad you found this useful. Let’s change the Figma game soon 🙌🏼

[@beko____]

Hey one thing that confuses me about all this is. Don’t developers normally use flexible units. So like why would setting this up like with grids denoting pixel locations be useful

[@MarcelQT]

fantastic explanation and easy setup, thanks!

[@Mizko]

Thank you!

[@antoniyayotsova5473]

Love that! I am studying UX design and interested in UI. Always wondered about this! Subscribed to your channel even before the end of the video! Thank you.

[@retosmontesquieu]

Loved the nudge amount option!!

[@mandysimpson4627]

really like watching your tutorials. v easy to follow.

[@chrisnguyen2374]

nice, short and simple - great tips Mizko.

[@Mizko]

Sounds like you’re describing me! Thanks CJN 👏🏼

[@asudeb]

Thank you SOOO much this was the first time that I use figma and thanks to your knowledge I completely understand the logic !!!

[@Mizko]

Appreciate it!

[@terrellharper9690]

I'm a tad late but man, what a great video and explanation. Thank you so much!! SUBSCRIBED!!!

[@Mizko]

Woo! Welcome to the fam

[@biswadeep9522]

I just loved it, This is like super power man..........

[@elsapakopoulou2465]

You are one of the best instructors in UI and Figma! Thank you so much!

[@StephanieDaniels]

Thank you so much... moving from Sketch to Figma. You're a life saver.

[@duongvo7712]

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

[@afnan3151]

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

[@ajayitemitopeesther5989]

MIZKO, thank you so much. Your videos and explanations are top excellect

[@karolinamakar6841]

I'm so grateful for your UI tutorials! Great job!

[@Mizko]

Thank you Karolina! 🙏🏼 I’m grateful for the comments and support

[@foroozzehbari1006]

Thank you for building and sharing this video

[@Mizko]

👌🏼

[@goodwincrash]

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

[@sk8trsurfr]

So good! The best Figma tutor on the planet!

[@sangeethababu0915]

Minute 6:44 ---> Shortcut command to hide grids on Figma is Shift + G, not Control + G

[@raqibabdullah775]

Hi Mizko, Really you are awesome! Your teaching style is very unique and easy for us all. ✨🎈🎉. Can you make video tutorial playlist of creating a whole design system in Figma, pls?!

[@a_nch]

Amazing Mizko! It was really easy to follow you!

[@rshraddha]

Okay this is by far the best video I've found on grid system in Figma. Loved your explanation and how short and on point this was.

[@wajahatshah9489]

You are the godfather of Grid Systems...

[@jackmak9941]

Life saver! I wish I knew this months ago!

[@eotikurac]

quick tip from a developer's point of view: if possible (always), keep your gutters and padding on the side divisible by 16 because the browser's default setting for font-size is 16. this isn't arbitrary, it's by design. 16 is very divisible and easy to work with. so, because the browser has a default unit of 16px, you need to set the same unit for your projects and stick to it. use 8, 12, 16, 24, 32, ... for gutters and 16, 24, 32, 48, 64, ... for padding left and right. don't use 70 and 35. developers used to multiply 16 by 0.625 to get 10 and then work with that but that isn't ideal. just a bad practice propelled by use of bootstrap in the previous decade. anyway, this was an awesome tutorial.

[@ramicolde6944]

Thanks for sharing! I've watched numerous videos teaching ppl how to set up the grid but I found yours is most useful and easiest to understand :)))

[@oxLiluxo]

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

[@anagrujicicpanovic2186]

Great tutorial and thanks for sharing this with the community. Could you maybe make a video about (semantic ui) 16 column grid system. I'm working on a new project, but never before worked with 16 column grid, and I'm bit confused how and where to start. Thanks in advance. Keep up the good job!

[@Mizko]

Thank you Ana! 16, 12, 10 shouldn't really matter. You can simply adjust the grid based on the learnings you've made. There is no right or wrong way to approach grid layouts. Talk to the devs you work with and you can come to an agreement.

[@anagrujicicpanovic2186]

@@Mizko Thank you so much..

[@siyamsheikh8487]

Thanks dear🥰🥰🥰 Love from Bangladesh

[@raygandesign]

Thanks for this video Mizko! Well explained..Been struggling to understand layout grid for sometime now... Also can you make a video where you design either a website or mobile app using these layout grids?

[@Mizko]

Hey Ray! Glad you found this useful. Most definitely. I’ll be dropping new videos every second day to build up my Figma crash course on KZbin. Fundamentals first, then well design some apps from scratch 👌🏼

[@ankitanand5443]

@@Mizko Wow! Excited about this.

[@TheCreativeDad]

this tutorial is Godly. Thanks for sharing brotha.

[@andrew.schaeffer4032]

Thanks for the vid! I learned my lesson coding a previous site to get my grid on-lock. Want to start things right in Figma

[@henrikjuhl6587]

Great, greaaat tutorial Mizko! Thanks for keeping it short and to-the-point 👏 The copy/paste grid between were new to me! 🔥 Q: How do you organize Pages when doing a fully responsive web project? Stay safe 😷

[@Mizko]

Glad you found this extremely useful 👌🏼 I normally use pages for specific flows and have responsive views on the same page.

[@projectof5123]

This is one of the most valuable design video IV’ et seen since a long time. I was really struggling with the vertical alignment. Thanks

[@bmp4music]

This video just made my life easier! Wonderfully explained Mizko. Your videos are so informative, helpful and interesting. The way you explain keeps one engaged in the content. Thank you !

[@Emma4dfuture]

Thank you for this gem of insight.

[@Mizko]

Thank you!

[@Saasou]

I love you man, just solved one of the main problems in my life :')

[@Mizko]

Haha thank you Snow Kemp!

[@saloni8786]

You sir, are a lifesaver!

[@journeyin2mystery]

Thank you for making the grid super simple and fundamental.

[@xFZYEDITS]

Been searching for this vid for a long time. Thanks a lot buddy!

[@jamesbrooks5656]

BTW, AWESOME tutorial, man. I've got 20 years of UX experience but just started w Figma this week. This was very needed and very relevant to me. Your content is clear and straightforward. Subscribed. One thing I did feel was missing though and that's seeing it all work responsively in the Preview. It's not responsive until it's responding to resizing actions in the browser. SO far I'm not that impressed with the Preview option. It doesn't act enough like a webpage. where's the scrolling and cell resizing? when I resize the preview the only sizing options seem to be the overall Preview options... I don't want shrink to fit or fill to fit... web pages don't do those things.