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
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
2 жыл бұрын
instablaster
@lincolnfernando6467
2 жыл бұрын
One question the course has subtitles in Spanish?. Thank you for your contribution
@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
6:38 to hide the layout grid in Windows, you can use this shortcut: Shift+G or Ctrl+Shift+4
@chargie3557
2 жыл бұрын
Thank you so much!
@patrickarmah6646
Жыл бұрын
thanks it came in handy
This is one of the very first videos any new UI designer should watch!
@Mizko
3 жыл бұрын
Humbled mate! Thank you so much. Glad you found this one useful and banging.
@luizablanc8118
3 жыл бұрын
Vejo sênior errando, ou seja o vídeo é para curiosos e para todos... 👋
@seesritual8990
3 жыл бұрын
I did good on watching it then hehe ;)
@muhammadfikriakramudin5439
2 жыл бұрын
That's right, i've been searching this for a month..
@Emma4dfuture
2 жыл бұрын
I agree!
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!
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!
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.
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.
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!
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
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.
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!
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!
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 !
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!
You are one of the best instructors in UI and Figma! Thank you so much!
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
3 жыл бұрын
✌🏼 I have plenty more Figma tutorials coming for you all. Let me know if you have any questions or requests.
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.
OMG!!! one of the best grid setup tutorial so far
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
3 жыл бұрын
Thank you Aims! Really appreciate the kind comments. Glad you found this useful. Really appreciate the support and comments as well.
Wow. Thorough, efficient, and super helpful. Thanks man, I appreciate you for making this!
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!
I have spent days looking for this EXACT information. Thank you!
@Mizko
3 жыл бұрын
👋🏼 welcome to the answers to your design life 😁 make sure to sub!
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
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.
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
2 жыл бұрын
Thank you Mayumi! I am so happy to hear you're enjoying it. I hope to see you around in the community.
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
3 жыл бұрын
Wooo! Glad you found all the videos useful.
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
11 ай бұрын
He's using 4px spacing not 8.
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..
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
3 жыл бұрын
Haha! That's what happens when you subscribe to the channel. Gold nuggets everywhere ✨ Glad you found it useful Kaleb.
BEAUTIFUL. NO NONSENSE. NOT A SECOND WASTED. SUBSCRIBED.
Really loving all of your videos, they are so so so so helpful! So glad I found your channel.
Love it. Simple but useful and consistent setup.
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
3 жыл бұрын
Thanks Kay! Glad you enjoyed. I’ll be sure to line up your request.
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 :)))
Thank you so much... moving from Sketch to Figma. You're a life saver.
Bro you are amazing! this is the course i've been looking for. Many questions have been answered, keep going like this. So LIT.
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.
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!
So good! The best Figma tutor on the planet!
I'm so grateful for your UI tutorials! Great job!
@Mizko
3 жыл бұрын
Thank you Karolina! 🙏🏼 I’m grateful for the comments and support
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!
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
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 🎉
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
2 жыл бұрын
Life saver 🙏🏾🙏🏾🙏🏾🙏🏾
Stumbled across this as I take the Google certificate course for UX and this is wildly helpful. Thank you!!!
Great concise coverage of building three major CSS breakpoints in Figma! SUBSCRIBED
I’ve been looking for this kind of video all day! You’re the best
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
I'm an old web designer but learning new and better ways of working all the time! Thank you!!
Thank you for making the grid super simple and fundamental.
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
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 ;)
thank you. this is definitely something I overlooked when I made the mistake of jumping into the design
You made understanding grids a no-brainer. Thank you for this video.All of the universe thanks you for your service.
@Mizko
2 жыл бұрын
Haha appreciate it.
EXACTLY the video i've been looking for, I needed some exact numbers and settings for different screens. Thanks a ton! :)
Amazing Mizko! It was really easy to follow you!
Exactly what I was looking for. Thanks! Short & sweet.
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
3 жыл бұрын
Glad you found this useful 👌🏼
Thank you, Mizko! Your tutorial helps me a lot!!
Very useful! Thank you for making this short and easy to follow videos.
Dude this was a superb crash course on grids, thank you!
Been searching for this vid for a long time. Thanks a lot buddy!
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
That was a very powerful and useful episode, Michael, I enjoyed it a lot. Cheers!
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.
nice, short and simple - great tips Mizko.
@Mizko
3 жыл бұрын
Sounds like you’re describing me! Thanks CJN 👏🏼
I am soo sooo grateful for this video. I was looking for exactly this content! Thanks Mizko
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!
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.
Thanks a lot Mizko, really love your content!
Been using Figma a while but I just learned something new and I like the way you teach. Subscribed!
@Mizko
3 жыл бұрын
Hey GraveRave! Woooo. Really happy to hear that. You made my day ✨ Thanks for the support.
Thanks for this! Love your channel Mizko
the nudge tip is SO helpful Thanks for the great content!
@Mizko
Жыл бұрын
Glad you're enjoying it!
This is a great tutorial!! Thank you so much for your clear explanation!
This tutorial was top notch. So fundamental. Well done 👍
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
Thanks - saved me a lot of time fiddling around!
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.
great tutorial, clear and straight to the point
Literally the first channel I ever clicked the bell icon for! 👏
@Mizko
3 жыл бұрын
🤭 THANK YOU SELINO!!
really like watching your tutorials. v easy to follow.
MIZKO, thank you so much. Your videos and explanations are top excellect
Awesome tutorial! Thank you!!
You just made my life soooooo much easier, thank you!
Amazing tutorial, thanks so much Mizko!!
Amazing man. You've made my Developers life easier😀
Very thorough and easy to follow 💯 Big ups on the tutorial 🙌 many thanks!
this is awesome, def really benefitting form these tutorials
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
2 жыл бұрын
@Mizko A lot of us seem to have this very question. Would love to hear your thoughts.
@mjchuang11
2 жыл бұрын
He said these are just examples
@thekuriousguy
2 жыл бұрын
I have the same question. Is there a logic behind choosing those values ?
@akankshaagrawal9164
2 жыл бұрын
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.
Mizko you are amazing brother. Love from Bangladesh.
You're the best, thank you! Needed this knowledge now for a case study
I'm new (and late) to Figma, and didn't know I could do grids like this.... excellent video thanks :)
@Mizko
2 жыл бұрын
Glad you found this useful!
Fantastic tutorial. Thank you so much for this.
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 :)
I just love this Video! Thank you very much for such a great learning to make us pro designers Love you a lot!
This video was of great help! Thank you!
exactly what i was looking for!!
Loved the nudge tip, definitely made my life easier. Thanks!
@Mizko
3 жыл бұрын
🙏🏼
I was searching this grid from very long ago. Thanks for the helpful Goodies too.
@Mizko
2 жыл бұрын
Thank you!
This really helped me. Thank you so much!
Wow man U explained grid system in such a easy way 🤩
Perfect. Thank you!! Very clear explanation.
Great video! Thank you Mizko