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

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/t...
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/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko

Пікірлер: 670

  • @Mizko
    @Mizko3 жыл бұрын

    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

    @royceeliseo3695

    2 жыл бұрын

    instablaster

  • @lincolnfernando6467

    @lincolnfernando6467

    2 жыл бұрын

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

  • @obcreation2616

    @obcreation2616

    2 жыл бұрын

    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
    @ouhoy2 жыл бұрын

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

  • @chargie3557

    @chargie3557

    2 жыл бұрын

    Thank you so much!

  • @patrickarmah6646

    @patrickarmah6646

    Жыл бұрын

    thanks it came in handy

  • @StrikeFirstFinance
    @StrikeFirstFinance3 жыл бұрын

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

  • @Mizko

    @Mizko

    3 жыл бұрын

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

  • @luizablanc8118

    @luizablanc8118

    3 жыл бұрын

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

  • @seesritual8990

    @seesritual8990

    3 жыл бұрын

    I did good on watching it then hehe ;)

  • @muhammadfikriakramudin5439

    @muhammadfikriakramudin5439

    2 жыл бұрын

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

  • @Emma4dfuture

    @Emma4dfuture

    2 жыл бұрын

    I agree!

  • @arikaapanda2909
    @arikaapanda29092 жыл бұрын

    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_

    @Stoic_Cat_

    Жыл бұрын

    No stress girl, you got this!

  • @campingandrelaxing
    @campingandrelaxing2 жыл бұрын

    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!

  • @rshraddha
    @rshraddha2 жыл бұрын

    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.

  • @joshuakimmis2544
    @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.

  • @samuelerbo
    @samuelerbo3 жыл бұрын

    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!

  • @aparvashistha9458
    @aparvashistha94583 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

    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.

  • @LucasPage
    @LucasPage2 жыл бұрын

    SUPER useful video brother! Specially for those like me starting in UX. I think it's extremely important to have a standarized system to start with the right foot and mostly to elevate the industry. Thanks for all the effort put to teach us in these tutorials! Keep it up!

  • @mxrd2
    @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!

  • @bmp4music
    @bmp4music2 жыл бұрын

    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 !

  • @ErlichMaramot
    @ErlichMaramot3 жыл бұрын

    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!

  • @elsapakopoulou2465
    @elsapakopoulou24652 жыл бұрын

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

  • @misalsudhir
    @misalsudhir3 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

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

  • @jamesjames9193
    @jamesjames91932 жыл бұрын

    I am loving your style - great content ... waffle-free explanations, along with your dulcet tones - yours videos are by far the best, which is why I have recommended them. Keep up the great work.

  • @theuixdude
    @theuixdude Жыл бұрын

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

  • @AmyeeL
    @AmyeeL3 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

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

  • @valentinfernandez2030
    @valentinfernandez20302 жыл бұрын

    Wow. Thorough, efficient, and super helpful. Thanks man, I appreciate you for making this!

  • @DeadMatterDesign
    @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!

  • @katmiller5884
    @katmiller58843 жыл бұрын

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

  • @Mizko

    @Mizko

    3 жыл бұрын

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

  • @lisoki9624
    @lisoki96243 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

    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.

  • @mayumihashimoto4715
    @mayumihashimoto47152 жыл бұрын

    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

    @Mizko

    2 жыл бұрын

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

  • @gispinzon2800
    @gispinzon28003 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

    Wooo! Glad you found all the videos useful.

  • @krunge
    @krunge2 жыл бұрын

    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

    @wagnermangger7602

    Жыл бұрын

    and the margen for mobile 32 instead of 35

  • @novenlatigo8207

    @novenlatigo8207

    11 ай бұрын

    He's using 4px spacing not 8.

  • @asadmushtaq9972
    @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 KZread and Mizko is the only person with my Answers I find..

  • @kalebstegall8843
    @kalebstegall88433 жыл бұрын

    This is such a good video! I was originally looking for a tutorial that explained grids in a really simple format for Figma, but I wasn't expecting to get additional information on vertical alignment as well so that was a plus! Thank you!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Haha! That's what happens when you subscribe to the channel. Gold nuggets everywhere ✨ Glad you found it useful Kaleb.

  • @hardlum
    @hardlum2 жыл бұрын

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

  • @Maiasgameroom
    @Maiasgameroom2 жыл бұрын

    Really loving all of your videos, they are so so so so helpful! So glad I found your channel.

  • @seanacoleman
    @seanacoleman Жыл бұрын

    Love it. Simple but useful and consistent setup.

  • @user-yz4iy4kc6p
    @user-yz4iy4kc6p3 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

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

  • @ramicolde6944
    @ramicolde69443 жыл бұрын

    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 :)))

  • @StephanieDaniels
    @StephanieDaniels2 жыл бұрын

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

  • @aminsiraei7166
    @aminsiraei7166 Жыл бұрын

    Bro you are amazing! this is the course i've been looking for. Many questions have been answered, keep going like this. So LIT.

  • @Mimi-ek7uw
    @Mimi-ek7uw2 жыл бұрын

    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.

  • @melissabarrow9204
    @melissabarrow92042 жыл бұрын

    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!

  • @sk8trsurfr
    @sk8trsurfr24 күн бұрын

    So good! The best Figma tutor on the planet!

  • @karolinamakar6841
    @karolinamakar68413 жыл бұрын

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

  • @Mizko

    @Mizko

    3 жыл бұрын

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

  • @sajidmoinuddin5424
    @sajidmoinuddin5424 Жыл бұрын

    your videos are simply awesome. I couldn't have found a better person for these explainer videos! thank you so much !!! setting up a basic grid system before your design is so critical to any project! always used to wonder how you set up a vertical grid like a baseline grid you have in InDesign! that query has been solved today!

  • @projectof5123
    @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

  • @kopilkaiser8991
    @kopilkaiser89913 ай бұрын

    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 🎉

  • @designedbybabs
    @designedbybabs2 жыл бұрын

    Many thanks for your awesome videos Mizko! I really appreciate your design work and I couldn't think of anyone who is explaining and demonstrating it better than you. After my bootcamp UX/ UI Design I still have many questions in my head and they always get solved by your KZread videos. Thumbs up and please keep going! I love your work!

  • @celineonwubiko3843

    @celineonwubiko3843

    2 жыл бұрын

    Life saver 🙏🏾🙏🏾🙏🏾🙏🏾

  • @rachelmoldovan8214
    @rachelmoldovan82149 ай бұрын

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

  • @erichepperlewp
    @erichepperlewp2 жыл бұрын

    Great concise coverage of building three major CSS breakpoints in Figma! SUBSCRIBED

  • @Jt-nh3py
    @Jt-nh3py Жыл бұрын

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

  • @michaelfashiku1077
    @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

  • @DaJungleDred
    @DaJungleDred Жыл бұрын

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

  • @journeyin2mystery
    @journeyin2mystery2 жыл бұрын

    Thank you for making the grid super simple and fundamental.

  • @gogodooshoo4853
    @gogodooshoo48533 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

    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 ;)

  • @roykeemchi
    @roykeemchi3 жыл бұрын

    thank you. this is definitely something I overlooked when I made the mistake of jumping into the design

  • @Emma4dfuture
    @Emma4dfuture2 жыл бұрын

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

  • @Mizko

    @Mizko

    2 жыл бұрын

    Haha appreciate it.

  • @oxLiluxo
    @oxLiluxo Жыл бұрын

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

  • @a_nch
    @a_nch8 ай бұрын

    Amazing Mizko! It was really easy to follow you!

  • @chrisyoung6728
    @chrisyoung67282 жыл бұрын

    Exactly what I was looking for. Thanks! Short & sweet.

  • @AnthWinter
    @AnthWinter3 жыл бұрын

    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

    @Mizko

    3 жыл бұрын

    Glad you found this useful 👌🏼

  • @duongvo7712
    @duongvo7712 Жыл бұрын

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

  • @MrNedicS
    @MrNedicS Жыл бұрын

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

  • @Stoic_Cat_
    @Stoic_Cat_ Жыл бұрын

    Dude this was a superb crash course on grids, thank you!

  • @xFZYEDITS
    @xFZYEDITS2 жыл бұрын

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

  • @CanionDigitals
    @CanionDigitals3 ай бұрын

    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

  • @staropolanka
    @staropolanka3 жыл бұрын

    That was a very powerful and useful episode, Michael, I enjoyed it a lot. Cheers!

  • @antoniyayotsova5473
    @antoniyayotsova54733 жыл бұрын

    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.

  • @chrisnguyen2374
    @chrisnguyen23743 жыл бұрын

    nice, short and simple - great tips Mizko.

  • @Mizko

    @Mizko

    3 жыл бұрын

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

  • @doAnn88
    @doAnn882 жыл бұрын

    I am soo sooo grateful for this video. I was looking for exactly this content! Thanks Mizko

  • @kennethlucas
    @kennethlucas2 жыл бұрын

    Yeah this is all sorts of awesome technique. Thanks Mizko! I am struggling with making things responsive in Figma. Some sort of mental block I have about it. Your work is inspiring! I am going to run through your masterclass this weekend!

  • @lizc356
    @lizc3563 жыл бұрын

    Mizko, I just started watching today and Im a huge fan. By far one of the best tutorials on learning and Mastering Figma. I would love to learn more about prototyping as well on how to master your asset library. In your crash course video you mentioned you would be a doing a deeper dive into this. However, I havent been able to find this particular video. Im excited and looking forward to new content.

  • @1WillyDAVID
    @1WillyDAVID2 жыл бұрын

    Thanks a lot Mizko, really love your content!

  • @GraveRave
    @GraveRave3 жыл бұрын

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

  • @Mizko

    @Mizko

    3 жыл бұрын

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

  • @GuitarreroDaniel
    @GuitarreroDaniel3 жыл бұрын

    Thanks for this! Love your channel Mizko

  • @mitchellelequin6914
    @mitchellelequin6914 Жыл бұрын

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

  • @Mizko

    @Mizko

    Жыл бұрын

    Glad you're enjoying it!

  • @joychen1013
    @joychen10132 жыл бұрын

    This is a great tutorial!! Thank you so much for your clear explanation!

  • @EPSTomcat11
    @EPSTomcat113 жыл бұрын

    This tutorial was top notch. So fundamental. Well done 👍

  • @israrulhaq9683
    @israrulhaq96832 жыл бұрын

    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

  • @diggie72
    @diggie72 Жыл бұрын

    Thanks - saved me a lot of time fiddling around!

  • @platnumvibecom
    @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.

  • @patrickarmah6646
    @patrickarmah6646 Жыл бұрын

    great tutorial, clear and straight to the point

  • @selinovaldes
    @selinovaldes3 жыл бұрын

    Literally the first channel I ever clicked the bell icon for! 👏

  • @Mizko

    @Mizko

    3 жыл бұрын

    🤭 THANK YOU SELINO!!

  • @mandysimpson4627
    @mandysimpson46278 ай бұрын

    really like watching your tutorials. v easy to follow.

  • @ajayitemitopeesther5989
    @ajayitemitopeesther5989 Жыл бұрын

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

  • @TheMzH20
    @TheMzH202 жыл бұрын

    Awesome tutorial! Thank you!!

  • @KHighlands
    @KHighlands Жыл бұрын

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

  • @marinamartins3197
    @marinamartins31972 жыл бұрын

    Amazing tutorial, thanks so much Mizko!!

  • @WaleedShoaib-qp1mo
    @WaleedShoaib-qp1mo Жыл бұрын

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

  • @linkV3
    @linkV37 ай бұрын

    Very thorough and easy to follow 💯 Big ups on the tutorial 🙌 many thanks!

  • @Roosterhoot2024
    @Roosterhoot2024 Жыл бұрын

    this is awesome, def really benefitting form these tutorials

  • @csabahorvathuxdesigner7966
    @csabahorvathuxdesigner79662 жыл бұрын

    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

    @gwemula

    2 жыл бұрын

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

  • @mjchuang11

    @mjchuang11

    2 жыл бұрын

    He said these are just examples

  • @thekuriousguy

    @thekuriousguy

    2 жыл бұрын

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

  • @akankshaagrawal9164

    @akankshaagrawal9164

    2 жыл бұрын

    I was also wondering the same..

  • @windmaomao

    @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.

  • @uiniloy977
    @uiniloy9773 жыл бұрын

    Mizko you are amazing brother. Love from Bangladesh.

  • @purecolors
    @purecolors3 жыл бұрын

    You're the best, thank you! Needed this knowledge now for a case study

  • @Stoobers
    @Stoobers2 жыл бұрын

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

  • @Mizko

    @Mizko

    2 жыл бұрын

    Glad you found this useful!

  • @reynoldsj_
    @reynoldsj_ Жыл бұрын

    Fantastic tutorial. Thank you so much for this.

  • @agnes820
    @agnes8203 жыл бұрын

    Thank you Mizko for this great tutorial a big big help for me as a beginner! Big thank you! I will watch also more of your tutorials :)

  • @afnan3151
    @afnan3151 Жыл бұрын

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

  • @NaTiLoVeDuLcE
    @NaTiLoVeDuLcE2 жыл бұрын

    This video was of great help! Thank you!

  • @krstns11
    @krstns112 жыл бұрын

    exactly what i was looking for!!

  • @aysegursoy1660
    @aysegursoy16603 жыл бұрын

    Loved the nudge tip, definitely made my life easier. Thanks!

  • @Mizko

    @Mizko

    3 жыл бұрын

    🙏🏼

  • @manalijain1507
    @manalijain15072 жыл бұрын

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

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you!

  • @ifouzezi
    @ifouzezi Жыл бұрын

    This really helped me. Thank you so much!

  • @tarunjawla9463
    @tarunjawla9463 Жыл бұрын

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

  • @prettypictureful
    @prettypictureful2 жыл бұрын

    Perfect. Thank you!! Very clear explanation.

  • @piterpavlenko
    @piterpavlenko Жыл бұрын

    Great video! Thank you Mizko