Perfect Responsive Grid Systems Masterclass | UI Design & Figma Tutorial

Рет қаралды 97,758

Жыл бұрын

Ultimate Figma Design Masterclass (5,200+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
🏷 Get 10% off via checkout - GRIDS10
Practical User Research & Strategy Masterclass (NEW - 250+ students. 8 hours)
👉 thedesignership.com/courses/p...
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
My Ultimate Figma Design Masterclass (4,200+ students. 90+ Videos. 10+ hours)

Пікірлер: 87

@Mizko Жыл бұрын

Ultimate Figma Design Masterclass (5,200+ students. 90+ Videos. 10+ hours) 👉 www.thedesignership.com/courses/the-ultimate-figma-masterclass 🏷 Get 10% off via checkout - GRIDS10

@iAmAakashOza Жыл бұрын

Hey MIZKO, First of all, thank you for making this video. But What about the backend side responsive website? If you have a Backend/Admin (Dashboard Left & Right Panel) side project would be coming than which type of GRID is used? Nobody UX Designer makes this type of video. Could you please make this type of video? If you create a Dashboard Panel then how many columns, gutter, and rows are used? On the Left side how much width height need? right side how much width height need? how is margin padding needed? Responsive on normal desktop video is normal. So hope you listen to it.

@oZenakos Жыл бұрын

Mizkos sounds of satisfaction when he manually finds the breakpoints cracks me up every time 😂legend

@heyzay202 Жыл бұрын

"You got me right there!" 😂😂

@sangio_davese Жыл бұрын

Incredibly succinct and no-nonsense approach to building flawless responsive grid systems in Figma. Aces 💯

@aristosxanthus658 11 ай бұрын

That breakpoint plugin is so cool. Love the visualization. It's also interesting that there isn't a single standard for grid layout margins and gutters.

@hussainawardhawala7348 10 ай бұрын

So practical. I never had understood this up until now.

@chloedesigns Жыл бұрын

Awesome video as always! Thank you so much Mizko:)

@morgan.shaffer.design Жыл бұрын

awesome video! thanks so much, Mizko!

@milililie Жыл бұрын

That plugin is awesome!

@PikasExperiences Жыл бұрын

Thank you. Your work is really Amazing.

@uzairahmad7171 Жыл бұрын

Amazing mizko. Thanks for sharing

@fernwehtwl Жыл бұрын

so helpful thanks for making this Mizko!

@Mizko Жыл бұрын

👌

@Saissh7 7 ай бұрын

Your video really helps alot!

@MarynaMaliutina 2 күн бұрын

Thank you for the video!

@sanawaheed3181 Жыл бұрын

hello! @mizko Thank you for uploading this. 👍

@franceslim9561 Жыл бұрын

Great tutorial! Make me more clear about the grid system! BTW, I am wondering, will Mizko discuss the topic of how to optimize the gif for web use / share the tips? I have made some research on this topic, but failed to find a suitable solution~ Hope you see my request, and looking forward to the video soon! cheer

@naga9384 4 ай бұрын

Voila... Smashed the "Like" button. This was super fun.

@cyriletiende6629 2 ай бұрын

Fantastic Explanation👏👏👏👏

@maurocerino5600 3 ай бұрын

That orgasmic "oooh!" in each breakpoint lol !

@AkinsRealm Жыл бұрын

Thank you! 👍

@user-bf5lw4pv7o 2 ай бұрын

واہ کیا بات اے استاد جی

@smgraphics3012 Жыл бұрын

I learn alot from this video

@seedcamcreation Жыл бұрын

You are the best.... I love to Signup but i don't fund am a starter always looking forward to learn at your feet sir

@SubhashreeDesgin07 10 ай бұрын

Very nice

@abayomiodusanya6114 Жыл бұрын

i am waiting for your tutorial on XR designs

@ashikmathewtharakan8146 Жыл бұрын

Hey Mizko, wonderful video as always. I want to know if there are any industry standard breakpoint values. Also would like to know the breakpoint values you follow in your projects

@vrlobo710 9 ай бұрын

👀

@christopher152 8 ай бұрын

Is it just me or does all this information become useless when there's only the what explained and not the why?

@litnookyt 2 ай бұрын

Yeah I also want to know the WHY. why there are 12 grids in some and 4 in other. WHY the margins are 16 or 40 or even 70. Did you find it ? Can you share the resource if you did. I have just begun and it is all so confusing

@walishahzad1703 2 ай бұрын

@@litnookytso 12 grids is for desktop view. It's ideal because you can either put 3 columns which would take 4 of those grids, or you can put 4 colums which would take 3 of those grids. This is a basic layout for placing cards. Now the margins and gutter depends on what sort of spacing system you are using. The most common one is 4 point grid system, where 4 is the minimum spacing, and you can use any number divisible by 4. So usually 16px of gutter is alright. And same with the margin, usually it's 64, 88, 104. depends on how much you want to spread your design. this was about desktops, on phones you would have 4 grids because 2 columns are plenty for most cards. But if you need three for any reason, keep 6 maximum... It might sound like I'm explain what again, but not why... the short answer is, these are tried and tested standards, which also help developers to create your design efficiently. And you don't have to experiment a lot to find the ideal layout.

@litnookyt 2 ай бұрын

@@walishahzad1703 thanks a lot for sharing. It was indeed helpful

@pelport 3 ай бұрын

Him Great video but it's actually NOT like Dribble. The rectangles are expanding horizontally but not vertically or proportionately. If there were content in the rectangles it would be distorted. How would you do this correctly?

@doAnn88 Жыл бұрын

You have a delightful way of explaining things. Always a pleasure watching your videos and getting this Aha-Moment. I bought your figma class and it helped me to get a pretty in depth understanding to handle design projects and design system with figma. But i have a question regarding the images in auto layout. Why is it that my developers are not able to download images once they are bedded within autolayout? Thanks so much mizko again, with your videos I boosted my career 🙂🙂🙂❤

@Jadee2727 Жыл бұрын

They can just press "ctrl" select the image and export it

@doAnn88 Жыл бұрын

@@Jadee2727 thank you for responding! Can’t believe that was the trick! 🙏

@AmodeusR Жыл бұрын

7:08 that's not quite exactly the same... The Dribble responsiveness also grows at the vertical axis, the one you made at figma only grows at the horizontal axis.

@savvvvvvvvvvvvvvvvvvvvvvvvvvva Жыл бұрын

Yep!

@zubanzio8567 Жыл бұрын

You can recreate the same web behavior by using the image aspect ratio hack to recreate this

@playpiano2264 Жыл бұрын

Hey Mizko! I am work on a documentation website. Something like a API documentation. What approach should i follow as it has sidebars and and a lot of text and tables and code snippets.

@Wuqing Жыл бұрын

Hi want to know if i want to create an interactive map like the ones in Apple phone, do i need to buy any license? Zoom in and out, and rotate, in an angle can see 3D buildings.

@islamyuldashev6946 Жыл бұрын

okay guys how do you keep constant ratio of image, you see in dribbble keeps image ratio same

@claramoramunoz8524 Жыл бұрын

Do you know if the Breakpoints plugin stops working the way it was set after the trial days? I want to use the plugin but i can't if it will stop working on the prototype in 2 weeks :(

@user-nc7kr6gu5k Жыл бұрын

Awesome content ad usual #mizko

@Mizko Жыл бұрын

Haha thanks! I’ve realised a lot of people don’t read my video descriptions and email me to ask if I have courses 🤦🏻‍♂️ so I decided to make it more obvious if it’s an educational tutorial.

@ClaireFreshney-hh7wx Ай бұрын

What browser are you using to get the web size? I cannot see this on chrome.

@mustafatahir1448 11 ай бұрын

Hey! I have a question. When I'm viewing the dribble page at 100% zoomed I only see 3 cards while in the video there are 5 cards. I'm getting very confused here. Please help. Thank You in advance

@lushbugmel Жыл бұрын

I just watched a Flexbox Tutorial here. I was hoping this video would teach me how to create a Grid in Figma. XD has Repeat Grid that does this so easily. Maybe Adobe can finally port that functionality into Figma

@Underhills 4 ай бұрын

I was hoping that too, and at the same time implement floating palettes in the UI. Unfortunately the Adobe takeover never came trough so we have to live with a bad and non logical GUI in Figma, that's ironic when it's supposed to be a UX tool.

@grvsha 6 күн бұрын

Dude making aww sound as if he got hurt :D

@ikennagibson3933 Жыл бұрын

Hey mizko, nice content but I have this question that keeps bugging me. Can you preview that largest breakpoint without it looking funny on preview mode?

@Yummymummy17 6 күн бұрын

how did you divide the rectangular in 2 equal half , when i was doing it it goes out of my frame

@njengathegeek Жыл бұрын

I smashed the like button 3 times to show how satisfied I'm with this tutorial

@danielemilazzo432 7 ай бұрын

How do you keep the ratio of an image in Figma? when scaling?

@patkgoesmovies 5 ай бұрын

kzfaq.info/get/bejne/bshyjc-gyq7daYE.htmlsi=khp0yWpn-l8t04AW

@iAmAakashOza Жыл бұрын

@harshitmaheshwari06 11 ай бұрын

Heyo, watch kzfaq.info/get/bejne/aZenrcun35bao6s.html , you will get your answer. Hope it helps

@schroepa1981 Жыл бұрын

Is there any place for grid systems in a world where css flexbox and css grids are utilized in fronted development? Everyone has to know about grids, but I think it’s overhauled in design since it blows up the productive code so much…

@SzabatDesign Жыл бұрын

Like always great content Mizko! 💪One question. In figma when we increase the size of the frame the rectangles increases only horizontally and on dirbbble horizontally and vertically. Why? Is it possible to reverse the same in figma somehow?

@a.j.5747 Жыл бұрын

Maybe locking the rectangle’s aspect ratio will help it scale both ways? I’ve never tried it though so not sure.

@alexlungeanu5292 Жыл бұрын

I also noticed this and wanted to ask Mizko...

@patkgoesmovies 5 ай бұрын

kzfaq.info/get/bejne/bshyjc-gyq7daYE.htmlsi=khp0yWpn-l8t04AW

@Boldzite 9 ай бұрын

Please I think there is an updated in m3 material design The present one is different from this making it difficult for me to follow and understand For example the layout grid,responsive design ... In the current one there is no value for the breakpoint like the one in this video The break point here just shows width

@parthsarathidixit5648 Жыл бұрын

Where are the figma files in your figma playlist videos?

@denizmatar7834 Жыл бұрын

the rectangles should maintain their ratio though...

@ChayonShaahOfficial Ай бұрын

Bootstrap 8 gtid how use?

@savvvvvvvvvvvvvvvvvvvvvvvvvvva Жыл бұрын

Does anybody know why doesn't Figma have proportional scaling when resizing an artboard/frame?

@patkgoesmovies 5 ай бұрын

kzfaq.info/get/bejne/bshyjc-gyq7daYE.htmlsi=khp0yWpn-l8t04AW

@roter13 Жыл бұрын

So handsome as always

@Mizko Жыл бұрын

Thank YOU!

@labbie1148 Жыл бұрын

this is confusing :( wish i can get it one day. do i need to know this to get a job?

@akinyemilateefgbolahan2390 Жыл бұрын

when i checked the break point on by 14 inches and monitor was at 615

@ashleythedesigner Жыл бұрын

Everytime they ask, “where can I find construction Web Design sauce?” MIZKO! MIZKO! MIZKOOOO!!! Thank you 😊❤🇿🇦

@k16e Жыл бұрын

640 or 630? /4

@TheProductDose Жыл бұрын

📐 Looking for the best advice on responsive grid systems? Here it is! 🔥 Start by understanding your content and design needs, choose a flexible grid framework, prioritize mobile-first approach, test across different devices, and iterate based on user feedback. Get that perfect responsive layout! 💻📱 #ResponsiveDesign #GridSystems