Make an Entire Layout Responsive in Figma - In 10 Minutes

[@DesignCourse]

Question: How many of you integrate Webflow as a part of your design process? Do you also use Figma?

[@ayoazeez390]

Me!😃 I use Figma

[@traviaroad_7]

Yes!!! I have use Figma

[@mikhail2876]

I use Figma for most of my projects. Webflow only works in specific scenarios aka anything that doesn't need extensive blogging features.

[@cleavonamidiagbe527]

From figma to webflow...will really love a webflow tutorial from you...

[@taariqq]

This is "the" question I am interested in. There are drawbacks to Webflow! You can export the code, even in the free plan, but you can't import!!

[@_Perf]

_Quick tip_ : to avoid adding objects to the frame or vice versa - just hold the *space key* while moving it with your mouse.

[@MohitManoj]

Holy shit thank you.

[@_Perf]

@@MohitManoj you welcome mate ;-)

[@hilmy7105]

this is tip useful

[@areejsa6576]

wow thanx

[@ajottamdas]

Thankyou very much. Very useful indeed.

[@nazaradana1252]

you just completely changed my life right now

[@gayathrip1444]

Awesome!!!. This is the first video that i could understand and finish completely after going through so many failed videos. This one is very understandable. Thank you so much!!

[@MalewiczHype]

I have a couple of problems with how auto-layout well ... auto-layouts stuff ;-) For a lot of the things we do we use optical alignment (even if developers have a little extra work) and auto-layout often aligns text in containers not completely "in the center", especially vertically. Constraints are however VERY useful in all design tools. :-) But of course for quick mocks for developers it's a great way and the tutorial is super helpful 🙌

[@abeerqamer9017]

Hey man good to see another person from the YT community here 🙌

[@Dxbuaeuaee]

oczywiscie

[@EricMalek]

your hard work is beyond appreciated! I remember the days when we had to read books for our information and the questions weren't always addressed. Great stuff!

[@mohitsharmaee7155]

I was trying to fix a problem from past 3 hours . This video helped me. My dumbass was missing 'fill container ' option and messing up responsiveness . This video helped me. Thanks Man. Subed.

[@FilippoVicari]

I always looked at that portion of Figma without understanding how it worked, now it's everything clear. Than you very much! Btw I sincerely recommend the UI/UX course, I'm half way through and I alredy achieved many significant progress, so thank you very much Gary!

[@jswanson859]

Great simple tutorial. I needed this right now. I also like when you keep the mistakes in on the phone version. Because, that's what happens sometimes and you have to figure out what went wrong. It's all part of the process.

[@ahmed3261]

Love how you just go straight to the point ! Thanks buddy. Can you share some tips of how to choose the best grid systems?

[@taariqq]

Notice the Smashing mag article in the tab "useful figma plugins" :)

[@kateryna5015]

You have the best tutorial ever! Very precise, short, clear. I watched another video for 30 minutes and you explained everything in 10 and I understood everything clearly. Thank you!!! ❤ I`m from Ukraine and try to get a job as ux/ui designer. Figma is a new tool for me. So, you help me a lot in this task. I`m very grateful that I can learn for free. 💛💙

[@annaszumska1218]

This is the best tutorial I've seen so far

[@ct11002000]

That was so helpful. Thank you so much! I need always remember layout grid, auto layot, constraints, hug and fill container.

[@badjazz6515]

Very useful. Straight to the point. Easy to understand. Well done.

[@PrincePaulAdeba]

Easy steps. Easy process. Thanks a lot for this wonderful video

[@mustafahammouz6018]

8:59 You can click and hold the element you want to add to an artboard then hold SPACE so you can added in top of any frame without having this issue in 8:59

[@nirajpatel1868]

This is amazing. Quite a time saver. Thank you for this tutorial.

[@_Shahab_]

Simple, easy, fast and understanding.! Thanks

[@KT-sb1ht]

straight to point and easy tips using figma to make responsive website, Thanks

[@Dxbuaeuaee]

Great simple and easy the simplest explanation for the Responsive layout in FIGMA thank you so much !

[@santi7085]

Tip: there is no necessary to frame the selections when you already have 2 or more autolayout frames, just Shift+A to make another one

[@faloza]

This tutorial is absolutely mental!!! Thanks a lot!!!!

[@fcallophoto]

For a very long time I've been doing this in my projects until I found the Breakpoints plugin which works exactly the same, the only difference is the plugin automatically changes the responsiveness of the frame. You set the breakpoints and then it "automatically" changes them. Yes, "automatically" because you still need to do what's shown here in the video. The day a plugin makes automatic responsive designs using responsive criteria, that's it, I'm out.

[@tamargachechiladze8817]

name of this plugin PLS

[@omerats96]

@@tamargachechiladze8817 Breakpoints bruh

[@mr.chinaski2613]

There is a plugin for this as I remember where you can set "thresholds" for sizes and it changes the content autamically after you reach the size.

[@abeerqamer9017]

Breakpoint is the name i think

[@jordanroywhite]

@@abeerqamer9017 Thanks! I've been looking for a way to do this!

[@N7__7]

Bro is a big fan of fabriziorom "HERE WE GO 🚨"

[@zacbrayy]

such a brilliant explanation, thank you!

[@Norell88]

Super content, as always. The timing is perfect. Thanks bro.

[@revanthvenkat1510]

Good one ❤️ Need more videos on responsive topic

[@emmanueltolani7243]

I love this tutorial so much. So Easy to follow.

[@anupkaushik9370]

Thanks for this responsive tutorial

[@redqueengaming6]

A very nice video, thank you for making it so easy to learn with things that actually work and the video was short. Also it was good that things went wrong at the end of the video lol

[@matthewhyslop5213]

In this video none of the objects are rescaling in size. When designing a mobile app this is what you want to do. When I switch between frame sizes for iPhone 13 to iPhone SE etc. I want wireframes to be able to scale proportionally with objects changing size proportionally and everything repositioning so it always looks the same between different phone screens. I can only achieve repositioning using auto layout and constraints, but not changing anything in size. As far as size adjustment, I am able to maintain an aspect ratio on images and objects using auto layout and variants, but I am not able to do what I want to the full extent. I want it so what you see on an iPhone 13 Pro Max is the same as what you see on an iPhone SE, with everything adjusting size and position. Just like when you use the scale feature. But I want wireframes to do that automatically as I switch between frame sizes. Help. HOW do I do this?

[@soofiakarolina]

Have you found a solution on this problem Matthew?

I still have a question: the text inside card and the yellow icon are also in fill container? in hug? I a still confused with that. Thank you so much Gary!!! I am learning a lot from you!

[@creatoratplay]

This was really helpful. Thank you!!

[@9989479192]

Super Bro... You're Awesome!

[@cassius.giorgio]

Wowwww great! Nice to learn, thanks for sharing

[@thomasd1076]

Anyone find an updated version of this? Having some trouble since the figma updates, make this video a bit outdated.

[@sachiupasani4768]

tremendously helpful video

[@nashleygaile8174]

Awesome content! It's actually helpful when you mess things up a bit. So we'll know what to do when that happens to us :>

[@alexlindroos828]

This doesn't seem to work the same way after a few hefty updates from Figma. Both the hug/fill procedure is different, and when duplicating the cards for the tablet version it just squeezes in another set of cards below, which in turn makes the six cards half the size vertically as they all share the same auto-layout constraints size wise. Good stuff anyways, but an updated tutorial would be solid if you have the time!

[@sirrooster1541]

Same for me. When I try doing anything he said in the video, my rectangles just get huge or my text overflows.

[@thomasd1076]

Did you find a video that helped you post update? Struggling with the same thing.

[@thomasd1076]

@@sirrooster1541 Did you find a video that helped you post update? Having trouble with the same thing.

[@sirrooster1541]

@@thomasd1076 It's been so long I don't even remember, sorry.

[@gloomycotton]

THIS IS SO HELPFUL OMG THANK U!

[@ed1nh0]

0:10 Dude that finger on screen!! hahahahahaha that's me all time!

[@traviaroad_7]

High Level Tutorial

[@kaurmanjot]

I am currently learning web development. Should I learn designing on figma or go with backend development ❓

[@zahidshaikh3122]

nice TV Collection

[@kitchen8__]

Great Quick tutorial!

[@yoyoz333]

the features and UI with constraints have changed in 2022, so some of your instructions aren't available anymore. Any idea on this?

[@mirakuheba3010]

this is really helpful, thanks

[@jab9618]

this video is amazing, thanks for sharing these tecniques!

[@hitmonRay]

is it better to start designing for various screen sizes at the wireframe level? Or is it better to complete the first design up to high-fidelity and then work on other screen sizes?

[@raziuldev]

Things are simple but only if you know 😍

[@sirjavic]

great vid dude. thanks

[@proventurkey]

How can I export this as HTML and CSS code including the breakpoints?

[@slashslash92]

LOOOOL 0:09

[@marjan5170]

OMG! THANK YOU SO MUCH! This is amaziiiiiiing 🤩😁😁😁😁😁😁😁

[@abuzarkhan238]

you are awesome bro..

[@toha127]

Cant you apply auto layout without framing first?

[@itunumary7962]

Thank You... Learnt a great deal

[@kuldeepjaswal4655]

very nice video..cheers!

[@dominikknapik7990]

Is it possible to have three containers stack vertically when you collapse to smaller frame.

[@Sponsi_PL]

A little complex... BTW If you want to change the texts, every object is on its own? Or can you use components and then have the possibility to quickly change content of the boxes?

[@VinodNanaiah]

Excellent...thanks!

[@anthonycarey7209]

Watching this and trying to auto layout my own design and most of th pertinent features from the update in this video NO LONGER EXIST in Figma. I can't find a single video anywhere on youtube that uses the most recent update. Can anyone help?

[@nicetomeetugaming7024]

Amazing video sir!

[@murphyandmurphybrand]

So do you have to create a new artboard for each device? Can you not create one artboard that's responsive?

[@SzabatDesign]

January 4th is my birthday 🥳 Can I count on a discount for the course on this occasion? 💪

[@soumiabelarbi3102]

Hello , thanks for the tutorial, just one question please, How about the icons when they are grouped what other elements and I do auto layout they lose their shape! what should I do?

[@KeyMorrison-w9h]

Is there any way to do all this without having to duplicate another frame? I've been using Axure RP for 3 years so I guess I'm spoiled on a responsiveness toggle. But, I wonder why figma doesn't have the same kind of quick click between sizes within the a frame.

[@TK-wp3iw]

Thank you 😢❤

[@KritinSinha]

Great thanks!

[@farnazzahedi6043]

Great, thanks 🙏

[@quilon1093]

Great tutorial!

[@streetdancerwar]

Amazing, thanks for sharing.

[@emmanueltolani7243]

Super helpful

[@scottfwalter]

Top notch tutorial!

[@GangsterNerd1]

The middle finger killed me 😂

[@nikhilgoyal007]

Love it! thanks!

[@sarariosochoa2264]

Heyyy hahahah good solution, thanks for the video! min 10:29

[@calvinogood]

10:20, change the illustration from group to frame.

[@AfterTheNonSequitur]

THANK you, that was bugging the hell out of me because it kept doing that.

[@jinrilidong]

Very useful, Thanks.

[@simonwills8196]

Hi Garry no matter what I do I can't seem to get the constraints and resising menu to appear (Scaffolding a New Economy/join us........ ) If you have time to respond I would be gratfull 😊

[@NadaMartin]

hi! what if my top navigation is in the group? cause i need to add shadow on it. so i couldnt ungroup that and try ur tutorial. any suggestions for this ? thankyou!

[@yasirarafat4188]

thanks for help.

[@simonblanco6716]

why when I set a auto layout min 2:47 the hug and constraints and resizing doesn't show up in my figma

[@altifyx_]

i don't have the constraints option

[@tonys490]

can you do a slow deatiled video on these 2 dreadful features constraints and auto layout.. they mess things up every time.. thnaks

[@justingolden21]

One of your better vids, and you have a LOT of good ones : )

[@mouradhamoud1495]

Thank you

[@mhgroundstudio]

Really Great 💞

[@thedesignguy1241]

I swear my Figma controls are different... It really throws me for a loop, especially while still considering myself a "n0ob" with the software.

[@chriscarton4728]

Awesome awesome stuff.

[@kiddozcollection]

I can get it to this point. Where it's responsive.. but when I change to the different prototyping it loses it responsiveness. Is this normal? And do I need to worry about it before I hand off to a coder?

[@Ninjajitsu562]

i love you mate

[@smilli6415]

every time I use auto layout it aligning my text to left from centre.. how can this be fixed thanks

[@theisoj]

Thanks 👍

[@marcobarrella7657]

amazing tutorial 🥲

[@JanenarongKundernENEE]

wow awsome

[@claireloes6572]

The file provided to follow along is View only- wish I could have used it while watching this

[@philipwee5352]

Even for View Only files you can click next to the name of the file on the arrow and duplicate to drafts which will allow you to follow along

[@condemime1]

thanks