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

  Рет қаралды 405,376

Mizko

Mizko

Күн бұрын

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
@Mizko 3 жыл бұрын
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
@ouhoy 2 жыл бұрын
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 2 жыл бұрын
thanks it came in handy
@StrikeFirstFinance
@StrikeFirstFinance 3 жыл бұрын
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 3 жыл бұрын
That's right, i've been searching this for a month..
@Emma4dfuture
@Emma4dfuture 2 жыл бұрын
I agree!
@campingandrelaxing
@campingandrelaxing 2 жыл бұрын
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!
@arikaapanda2909
@arikaapanda2909 2 жыл бұрын
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!
@LucasPage
@LucasPage 2 жыл бұрын
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!
@bmp4music
@bmp4music 2 жыл бұрын
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 !
@rshraddha
@rshraddha 3 жыл бұрын
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.
@samuelerbo
@samuelerbo 3 жыл бұрын
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!
@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.
@aparvashistha9458
@aparvashistha9458 3 жыл бұрын
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.
@jamesjames9193
@jamesjames9193 2 жыл бұрын
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.
@ErlichMaramot
@ErlichMaramot 3 жыл бұрын
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
@elsapakopoulou2465 2 жыл бұрын
You are one of the best instructors in UI and Figma! Thank you so much!
@AmyeeL
@AmyeeL 3 жыл бұрын
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.
@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!
@lisoki9624
@lisoki9624 3 жыл бұрын
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.
@misalsudhir
@misalsudhir 3 жыл бұрын
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.
@Maiasgameroom
@Maiasgameroom 2 жыл бұрын
Really loving all of your videos, they are so so so so helpful! So glad I found your channel.
@kalebstegall8843
@kalebstegall8843 3 жыл бұрын
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.
@mayumihashimoto4715
@mayumihashimoto4715 2 жыл бұрын
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.
@Mimi-ek7uw
@Mimi-ek7uw 2 жыл бұрын
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.
@valentinfernandez2030
@valentinfernandez2030 2 жыл бұрын
Wow. Thorough, efficient, and super helpful. Thanks man, I appreciate you for making this!
@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!
@user-yz4iy4kc6p
@user-yz4iy4kc6p 3 жыл бұрын
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.
@gispinzon2800
@gispinzon2800 3 жыл бұрын
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.
@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
@lizc356
@lizc356 3 жыл бұрын
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.
@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!
@kopilkaiser8991
@kopilkaiser8991 4 ай бұрын
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 🎉
@ramicolde6944
@ramicolde6944 3 жыл бұрын
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 :)))
@seanacoleman
@seanacoleman 2 жыл бұрын
Love it. Simple but useful and consistent setup.
@designedbybabs
@designedbybabs 2 жыл бұрын
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 KZfaq videos. Thumbs up and please keep going! I love your work!
@celineonwubiko3843
@celineonwubiko3843 2 жыл бұрын
Life saver 🙏🏾🙏🏾🙏🏾🙏🏾
@katmiller5884
@katmiller5884 3 жыл бұрын
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!
@antoniyayotsova5473
@antoniyayotsova5473 3 жыл бұрын
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.
@asadmushtaq9972
@asadmushtaq9972 2 жыл бұрын
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 KZfaq and Mizko is the only person with my Answers I find..
@hardlum
@hardlum 2 жыл бұрын
BEAUTIFUL. NO NONSENSE. NOT A SECOND WASTED. SUBSCRIBED.
@melissabarrow9204
@melissabarrow9204 2 жыл бұрын
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!
@StephanieDaniels
@StephanieDaniels 2 жыл бұрын
Thank you so much... moving from Sketch to Figma. You're a life saver.
@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!!
@kennethlucas
@kennethlucas 2 жыл бұрын
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!
@roykeemchi
@roykeemchi 3 жыл бұрын
thank you. this is definitely something I overlooked when I made the mistake of jumping into the design
@Jt-nh3py
@Jt-nh3py Жыл бұрын
I’ve been looking for this kind of video all day! You’re the best
@AnthWinter
@AnthWinter 3 жыл бұрын
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 👌🏼
@theuixdude
@theuixdude Жыл бұрын
OMG!!! one of the best grid setup tutorial so far
@journeyin2mystery
@journeyin2mystery 2 жыл бұрын
Thank you for making the grid super simple and fundamental.
@israrulhaq9683
@israrulhaq9683 2 жыл бұрын
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
@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.
@karolinamakar6841
@karolinamakar6841 3 жыл бұрын
I'm so grateful for your UI tutorials! Great job!
@Mizko
@Mizko 3 жыл бұрын
Thank you Karolina! 🙏🏼 I’m grateful for the comments and support
@staropolanka
@staropolanka 3 жыл бұрын
That was a very powerful and useful episode, Michael, I enjoyed it a lot. Cheers!
@rachelmoldovan8214
@rachelmoldovan8214 10 ай бұрын
Stumbled across this as I take the Google certificate course for UX and this is wildly helpful. Thank you!!!
@erichepperlewp
@erichepperlewp 2 жыл бұрын
Great concise coverage of building three major CSS breakpoints in Figma! SUBSCRIBED
@Emma4dfuture
@Emma4dfuture 2 жыл бұрын
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.
@sk8trsurfr
@sk8trsurfr Ай бұрын
So good! The best Figma tutor on the planet!
@joychen1013
@joychen1013 2 жыл бұрын
This is a great tutorial!! Thank you so much for your clear explanation!
@gogodooshoo4853
@gogodooshoo4853 3 жыл бұрын
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 ;)
@oxLiluxo
@oxLiluxo Жыл бұрын
EXACTLY the video i've been looking for, I needed some exact numbers and settings for different screens. Thanks a ton! :)
@MrNedicS
@MrNedicS Жыл бұрын
Very useful! Thank you for making this short and easy to follow videos.
@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.
@chrisyoung6728
@chrisyoung6728 2 жыл бұрын
Exactly what I was looking for. Thanks! Short & sweet.
@a_nch
@a_nch 9 ай бұрын
Amazing Mizko! It was really easy to follow you!
@Stoic_Cat_
@Stoic_Cat_ Жыл бұрын
Dude this was a superb crash course on grids, thank you!
@CanionDigitals
@CanionDigitals 4 ай бұрын
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
@KHighlands
@KHighlands Жыл бұрын
You just made my life soooooo much easier, thank you!
@EPSTomcat11
@EPSTomcat11 3 жыл бұрын
This tutorial was top notch. So fundamental. Well done 👍
@patrickarmah6646
@patrickarmah6646 2 жыл бұрын
great tutorial, clear and straight to the point
@duongvo7712
@duongvo7712 Жыл бұрын
Thank you, Mizko! Your tutorial helps me a lot!!
@doAnn88
@doAnn88 2 жыл бұрын
I am soo sooo grateful for this video. I was looking for exactly this content! Thanks Mizko
@GraveRave
@GraveRave 3 жыл бұрын
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.
@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!
@diggie72
@diggie72 Жыл бұрын
Thanks - saved me a lot of time fiddling around!
@1WillyDAVID
@1WillyDAVID 2 жыл бұрын
Thanks a lot Mizko, really love your content!
@agnes820
@agnes820 3 жыл бұрын
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 :)
@Roosterhoot2024
@Roosterhoot2024 Жыл бұрын
this is awesome, def really benefitting form these tutorials
@ajayitemitopeesther5989
@ajayitemitopeesther5989 Жыл бұрын
MIZKO, thank you so much. Your videos and explanations are top excellect
@linkV3
@linkV3 9 ай бұрын
Very thorough and easy to follow 💯 Big ups on the tutorial 🙌 many thanks!
@biswadeep9522
@biswadeep9522 3 жыл бұрын
I just loved it, This is like super power man..........
@selinovaldes
@selinovaldes 3 жыл бұрын
Literally the first channel I ever clicked the bell icon for! 👏
@Mizko
@Mizko 3 жыл бұрын
🤭 THANK YOU SELINO!!
@mandysimpson4627
@mandysimpson4627 9 ай бұрын
really like watching your tutorials. v easy to follow.
@tarunjawla9463
@tarunjawla9463 Жыл бұрын
Wow man U explained grid system in such a easy way 🤩
@Stoobers
@Stoobers 3 жыл бұрын
I'm new (and late) to Figma, and didn't know I could do grids like this.... excellent video thanks :)
@Mizko
@Mizko 3 жыл бұрын
Glad you found this useful!
@WaleedShoaib-qp1mo
@WaleedShoaib-qp1mo Жыл бұрын
Amazing man. You've made my Developers life easier😀
@reynoldsj_
@reynoldsj_ Жыл бұрын
Fantastic tutorial. Thank you so much for this.
@saloni8786
@saloni8786 2 жыл бұрын
You sir, are a lifesaver!
@xFZYEDITS
@xFZYEDITS 2 жыл бұрын
Been searching for this vid for a long time. Thanks a lot buddy!
@spencerm293
@spencerm293 3 жыл бұрын
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.
@purecolors
@purecolors 3 жыл бұрын
You're the best, thank you! Needed this knowledge now for a case study
@elilucha
@elilucha 2 жыл бұрын
YOU ARE A GENIUS!
@uiniloy977
@uiniloy977 3 жыл бұрын
Mizko you are amazing brother. Love from Bangladesh.
@jeffjgarrett269
@jeffjgarrett269 2 жыл бұрын
This video is just oozing with good content. Thanks!
@jackmak9941
@jackmak9941 3 жыл бұрын
Life saver! I wish I knew this months ago!
@mitchellelequin6914
@mitchellelequin6914 Жыл бұрын
the nudge tip is SO helpful Thanks for the great content!
@Mizko
@Mizko Жыл бұрын
Glad you're enjoying it!
@moreorlessme
@moreorlessme 3 жыл бұрын
YASSSSSS! Thanks Mizko.
@olabodekayode5849
@olabodekayode5849 2 жыл бұрын
Nice one Mizko!! 😊
@TheCreativeDad
@TheCreativeDad Жыл бұрын
this tutorial is Godly. Thanks for sharing brotha.
@GuitarreroDaniel
@GuitarreroDaniel 3 жыл бұрын
Thanks for this! Love your channel Mizko
@kimarodri
@kimarodri 2 жыл бұрын
Thank you for this very informative video. I am new to UI and Figma and helps me a lot. I'll be using these grid system guides for my projects. It
@jamesbrooks5656
@jamesbrooks5656 3 жыл бұрын
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.
@zebcode
@zebcode Жыл бұрын
Seen a few of your videos, this is the gem that made me subscribe. Perfect 😙👌... Thank you.
I'm Excited To see If Kelly Can Meet This Challenge!
00:16
Mini Katana
Рет қаралды 18 МЛН
Playing hide and seek with my dog 🐶
00:25
Zach King
Рет қаралды 35 МЛН
A teacher captured the cutest moment at the nursery #shorts
00:33
Fabiosa Stories
Рет қаралды 51 МЛН
Пранк пошел не по плану…🥲
00:59
Саша Квашеная
Рет қаралды 6 МЛН
Easily Improve Your Web Design (With Example)
17:59
Flux Academy
Рет қаралды 42 М.
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
30:30
DesignWithArash
Рет қаралды 289 М.
60-30-10 Color Rule
6:18
Jesse Showalter
Рет қаралды 1,9 МЛН
14 Advanced Tips to Design FASTER in Figma
17:48
Mizko
Рет қаралды 147 М.
world's shortest UI/UX design course
6:53
Juxtopposed
Рет қаралды 1,1 МЛН
The missing guide to grids
24:15
Flux Academy
Рет қаралды 245 М.
I'm Excited To see If Kelly Can Meet This Challenge!
00:16
Mini Katana
Рет қаралды 18 МЛН