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!
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 🙌
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!!
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!
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.
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.
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. 💛💙
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
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?
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
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.
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!
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?
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!
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.
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?
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?
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 😊
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!
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?
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?
Question: How many of you integrate Webflow as a part of your design process? Do you also use Figma?
Me!😃 I use Figma
Yes!!! I have use Figma
I use Figma for most of my projects. Webflow only works in specific scenarios aka anything that doesn't need extensive blogging features.
From figma to webflow...will really love a webflow tutorial from you...
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!!
_Quick tip_ : to avoid adding objects to the frame or vice versa - just hold the *space key* while moving it with your mouse.
Holy shit thank you.
@@MohitManoj you welcome mate ;-)
this is tip useful
wow thanx
Thankyou very much. Very useful indeed.
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!
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 🙌
Hey man good to see another person from the YT community here 🙌
oczywiscie
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!!
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!
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.
you just completely changed my life right now
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.
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. 💛💙
This is the best tutorial I've seen so far
This is amazing. Quite a time saver. Thank you for this tutorial.
Love how you just go straight to the point ! Thanks buddy.
Can you share some tips of how to choose the best grid systems?
Very useful. Straight to the point. Easy to understand. Well done.
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
Great simple and easy the simplest explanation for the Responsive layout in FIGMA thank you so much !
Super content, as always. The timing is perfect. Thanks bro.
That was so helpful. Thank you so much! I need always remember layout grid, auto layot, constraints, hug and fill container.
Easy steps. Easy process. Thanks a lot for this wonderful video
Simple, easy, fast and understanding.! Thanks
straight to point and easy tips using figma to make responsive website, Thanks
This tutorial is absolutely mental!!! Thanks a lot!!!!
Notice the Smashing mag article in the tab "useful figma plugins" :)
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?
Have you found a solution on this problem Matthew?
I love this tutorial so much. So Easy to follow.
Good one ❤️
Need more videos on responsive topic
Anyone find an updated version of this? Having some trouble since the figma updates, make this video a bit outdated.
why when I set a auto layout min 2:47 the hug and constraints and resizing doesn't show up in my figma
such a brilliant explanation, thank you!
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
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.
name of this plugin PLS
@@tamargachechiladze8817 Breakpoints bruh
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
This was really helpful. Thank you!!
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 :>
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!
Same for me. When I try doing anything he said in the video, my rectangles just get huge or my text overflows.
Did you find a video that helped you post update? Struggling with the same thing.
@@sirrooster1541 Did you find a video that helped you post update? Having trouble with the same thing.
@@thomasd1076 It's been so long I don't even remember, sorry.
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.
Breakpoint is the name i think
@@abeerqamer9017 Thanks! I've been looking for a way to do this!
Thanks for this responsive tutorial
the features and UI with constraints have changed in 2022, so some of your instructions aren't available anymore. Any idea on this?
THIS IS SO HELPFUL OMG THANK U!
How can I export this as HTML and CSS code including the breakpoints?
Bro is a big fan of fabriziorom
"HERE WE GO 🚨"
Wowwww great! Nice to learn, thanks for sharing
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?
Super Bro... You're Awesome!
Great Quick tutorial!
0:10 Dude that finger on screen!! hahahahahaha that's me all time!
tremendously helpful video
High Level Tutorial
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!
this video is amazing, thanks for sharing these tecniques!
Top notch tutorial!
Is it possible to have three containers stack vertically when you collapse to smaller frame.
great vid dude. thanks
OMG! THANK YOU SO MUCH! This is amaziiiiiiing 🤩😁😁😁😁😁😁😁
10:20, change the illustration from group to frame.
THANK you, that was bugging the hell out of me because it kept doing that.
So do you have to create a new artboard for each device? Can you not create one artboard that's responsive?
Amazing video sir!
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.
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?
this is really helpful, thanks
Thank You... Learnt a great deal
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?
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 😊
Heyyy hahahah good solution, thanks for the video! min 10:29
I am currently learning web development. Should I learn designing on figma or go with backend development ❓
Great tutorial!
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!
Cant you apply auto layout without framing first?
you are awesome bro..
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?
Things are simple but only if you know 😍
Love it! thanks!
Great, thanks
🙏
Amazing, thanks for sharing.
i don't have the constraints option
Really Great 💞
Excellent...thanks!
The middle finger killed me 😂
very nice video..cheers!
Very useful, Thanks.
nice TV Collection
One of your better vids, and you have a LOT of good ones : )
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?
Awesome awesome stuff.
every time I use auto layout it aligning my text to left from centre.. how can this be fixed thanks
Super helpful
Thank you 😢❤
amazing tutorial 🥲
Great thanks!
can you do a slow deatiled video on these 2 dreadful features constraints and auto layout.. they mess things up every time.. thnaks
January 4th is my birthday 🥳 Can I count on a discount for the course on this occasion? 💪
i love you mate
The file provided to follow along is View only- wish I could have used it while watching this
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
I swear my Figma controls are different... It really throws me for a loop, especially while still considering myself a "n0ob" with the software.
Hi,
Works well on Figma but when exporting HTML it doesn't stretch anymore. Any idea ? Thank you.
What are you using to export to HTML?
thanks for help.
Super!
Thanks 👍
Thank you
wow awsome