Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)
HTML-код
- Опубликовано: 6 июн 2024
- 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
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
instablaster
One question the course has subtitles in Spanish?.
Thank you for your contribution
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
Thank you so much!
thanks it came in handy
This is one of the very first videos any new UI designer should watch!
Humbled mate! Thank you so much. Glad you found this one useful and banging.
Vejo sênior errando, ou seja o vídeo é para curiosos e para todos... 👋
I did good on watching it then hehe ;)
That's right, i've been searching this for a month..
I agree!
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!
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! ❤️❤️
No stress girl, you got this!
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.
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.
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.
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!
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 !
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 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!
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.
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.
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!
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!
Thank you Mayumi! I am so happy to hear you're enjoying it. I hope to see you around in the community.
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!
Wow. Thorough, efficient, and super helpful. Thanks man, I appreciate you for making this!
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!
Thank you Aims! Really appreciate the kind comments. Glad you found this useful. Really appreciate the support and comments as well.
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!
I have spent days looking for this EXACT information. Thank you!
👋🏼 welcome to the answers to your design life 😁 make sure to sub!
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.
✌🏼 I have plenty more Figma tutorials coming for you all. Let me know if you have any questions or requests.
Really loving all of your videos, they are so so so so helpful! So glad I found your channel.
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.
Bro you are amazing!
this is the course i've been looking for. Many questions have been answered, keep going like this.
So LIT.
OMG!!! one of the best grid setup tutorial so far
Love it. Simple but useful and consistent setup.
I’ve been looking for this kind of video all day! You’re the best
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.
Thanks Kay! Glad you enjoyed. I’ll be sure to line up your request.
Thank you so much... moving from Sketch to Figma. You're a life saver.
I'm so grateful for your UI tutorials! Great job!
Thank you Karolina! 🙏🏼 I’m grateful for the comments and support
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!
Haha! That's what happens when you subscribe to the channel. Gold nuggets everywhere ✨ Glad you found it useful Kaleb.
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 RUclips and Mizko is the only person with my Answers I find..
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 :)))
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!
Amazing Mizko! It was really easy to follow you!
Thank you for making the grid super simple and fundamental.
Great concise coverage of building three major CSS breakpoints in Figma! SUBSCRIBED
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!
Wooo! Glad you found all the videos useful.
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
Exactly what I was looking for. Thanks! Short & sweet.
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!
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 🎉
That was a very powerful and useful episode, Michael, I enjoyed it a lot. Cheers!
Very useful! Thank you for making this short and easy to follow videos.
Thank you, Mizko! Your tutorial helps me a lot!!
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.
Glad you found this useful 👌🏼
So good! The best Figma tutor on the planet!
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.
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 RUclips videos. Thumbs up and please keep going! I love your work!
Life saver 🙏🏾🙏🏾🙏🏾🙏🏾
Awesome tutorial! Thank you!!
Stumbled across this as I take the Google certificate course for UX and this is wildly helpful. Thank you!!!
BEAUTIFUL. NO NONSENSE. NOT A SECOND WASTED. SUBSCRIBED.
EXACTLY the video i've been looking for, I needed some exact numbers and settings for different screens. Thanks a ton! :)
Thanks a lot Mizko, really love your content!
You made understanding grids a no-brainer. Thank you for this video.All of the universe thanks you for your service.
Haha appreciate it.
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.
This is a great tutorial!! Thank you so much for your clear explanation!
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
This tutorial was top notch. So fundamental. Well done 👍
nice, short and simple - great tips Mizko.
Sounds like you’re describing me! Thanks CJN 👏🏼
the nudge tip is SO helpful
Thanks for the great content!
Glad you're enjoying it!
Dude this was a superb crash course on grids, thank you!
really like watching your tutorials. v easy to follow.
Thanks - saved me a lot of time fiddling around!
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!
Fantastic tutorial. Thank you so much for this.
You just made my life soooooo much easier, thank you!
great tutorial, clear and straight to the point
MIZKO, thank you so much. Your videos and explanations are top excellect
I am soo sooo grateful for this video. I was looking for exactly this content! Thanks Mizko
thank you. this is definitely something I overlooked when I made the mistake of jumping into the design
Amazing tutorial, thanks so much Mizko!!
I'm an old web designer but learning new and better ways of working all the time! Thank you!!
Thanks for this! Love your channel Mizko
Mizko you are amazing brother. Love from Bangladesh.
This video was of great help! Thank you!
Amazing man. You've made my Developers life easier😀
Very thorough and easy to follow 💯
Big ups on the tutorial 🙌 many thanks!
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.
Been searching for this vid for a long time. Thanks a lot buddy!
this is awesome, def really benefitting form these tutorials
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 :)
Been using Figma a while but I just learned something new and I like the way you teach. Subscribed!
Hey GraveRave! Woooo. Really happy to hear that. You made my day ✨ Thanks for the support.
Amazing, very useful.
Thanks!
Perfect. Thank you!! Very clear explanation.
Great video! Thank you Mizko
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
Simple yet powerful tip! Subscribed+notifications on.
This was very helpful. Thank you so much🙌
Wow man U explained grid system in such a easy way 🤩
I just love this Video!
Thank you very much for such a great learning to make us pro designers
Love you a lot!
This was super helpful, thank you!
Super helpful! Thank you so much!
Super useful and thorough. Thank you.
Loved the nudge tip, definitely made my life easier. Thanks!
🙏🏼
incredibly useful, thank you so much!
exactly what i was looking for!!
Literally the first channel I ever clicked the bell icon for! 👏
🤭 THANK YOU SELINO!!
Seen a few of your videos, this is the gem that made me subscribe. Perfect 😙👌...
Thank you.