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.

[@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!

[@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!!

[@nazaradana1252]

you just completely changed my life right now

[@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!

[@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.

[@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.

[@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. 💛💙

[@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

[@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.

[@annaszumska1218]

This is the best tutorial I've seen so far

[@badjazz6515]

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

[@ct11002000]

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

[@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?

[@Norell88]

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

[@Dxbuaeuaee]

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

[@PrincePaulAdeba]

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

[@_Shahab_]

Simple, easy, fast and understanding.! Thanks

[@faloza]

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

[@KT-sb1ht]

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

[@emmanueltolani7243]

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

[@sirjavic]

great vid dude. thanks

[@zacbrayy]

such a brilliant explanation, thank you!

[@revanthvenkat1510]

Good one ❤️ Need more videos on responsive topic

[@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

[@gloomycotton]

THIS IS SO HELPFUL OMG THANK U!

[@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

[@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?

[@creatoratplay]

This was really helpful. Thank you!!

[@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

[@nashuriichan]

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 :>

[@anupkaushik9370]

Thanks for this responsive tutorial

[@thomasd1076]

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

[@taariqq]

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

[@ed1nh0]

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

[@cassius.giorgio]

Wowwww great! Nice to learn, thanks for sharing

[@simonblanco6716]

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

[@kitchen8__]

Great Quick tutorial!

[@jab9618]

this video is amazing, thanks for sharing these tecniques!

[@9989479192]

Super Bro... You're Awesome!

[@scottfwalter]

Top notch tutorial!

[@sachiupasani4768]

tremendously helpful video

[@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.

[@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!

[@marjan5170]

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

[@mirakuheba3010]

this is really helpful, thanks

[@yoyoz333]

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

[@itunumary7962]

Thank You... Learnt a great deal

[@quilon1093]

Great tutorial!

[@nicetomeetugaming7024]

Amazing video sir!

[@proventurkey]

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

[@sarariosochoa2264]

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

[@traviaroad_7]

High Level Tutorial

[@N7__7]

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

[@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.

[@streetdancerwar]

Amazing, thanks for sharing.

[@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?

[@nikhilgoyal007]

Love it! thanks!

[@mhgroundstudio]

Really Great 💞

[@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?

[@kuldeepjaswal4655]

very nice video..cheers!

[@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?

[@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.

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!

[@abuzarkhan238]

you are awesome bro..

[@raziuldev]

Things are simple but only if you know 😍

[@jinrilidong]

Very useful, Thanks.

[@justingolden21]

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

[@farnazzahedi6043]

Great, 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 😊

[@chriscarton4728]

Awesome awesome stuff.

[@dominikknapik7990]

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

[@VinodNanaiah]

Excellent...thanks!

[@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!

[@GangsterNerd1]

The middle finger killed me 😂

[@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?

[@toha127]

Cant you apply auto layout without framing first?

[@murphyandmurphybrand]

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

[@kaurmanjot]

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

[@emmanueltolani7243]

Super helpful

[@zahidshaikh3122]

nice TV Collection

[@TK-wp3iw]

Thank you 😢❤

[@smilli6415]

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

[@KritinSinha]

Great thanks!

[@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?

[@SzabatDesign]

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

[@marcobarrella7657]

amazing tutorial 🥲

[@Ninjajitsu562]

i love you mate

[@altifyx_]

i don't have the constraints option

[@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.

[@tonys490]

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

[@alkollo]

Hi, Works well on Figma but when exporting HTML it doesn't stretch anymore. Any idea ? Thank you.

[@philipwee5352]

What are you using to export to HTML?

[@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

[@ayannaharris3479]

hahahaha the small detail of flipping the design off is too real

[@tanmai5785]

Super!

[@theisoj]

Thanks 👍

[@slashslash92]

LOOOOL 0:09

[@aravindhmedia]

We missed the outro song Garry !!😂