It would be good to have keystrokes displayed on screen. I found myself not understanding what you where doing at times! Was still a helpful video! keep it up!
It took me 50 mins to go through this tutorial, having the keystrokes on screen would be great as in a few scenarios you just say something like "We align them just like that" but there is no explanation as to how so I think keystrokes would help us there.
I've been stuggling so badly with auto layout and component properties... These 2 tutorials of yours made me a fulfilled human being. I may now die peacefully after wasting weeks on manual adjusting.
I struggled a lot with auto layout but finally I think I got the hang of it. You've presented the auto layout in the simplest words and its really easy to understand. Really helpful video.
Very helpful. As a noob to Figma I found this pretty easy to follow. Basically frames within frames, Shift+A and then play with the padding and alignment tools. It helps a lot to pay attention to how frames are nested within each other on the left.
Thank you so much for the tutorial bro. I clicked your video to learn about auto layout. But you also taught me how to use absolute position and rename a lot of layers at once
This video made it click for me after watching many videos of how to use auto layout, using the figma to webflow plugin i can design so much faster now! ❤❤❤
After 5 hours of that stuff doing anything BUT what it's supposed to, I do it by hand .-. But thank you for a great tutorial! I'll definetly will come back a buch if times!
These videos are amazing, clear, crisp and to the point, absolutely love the work you are doing, would love to see a similar video for mobile apps if possible, like that would be super cool. Honestly, this is like my favorite channel right now because of how easy to follow your videos are. Thanks!!
Not a habit but need to make it one. Seems this will be really useful for me in the future especially for webflow and it's new plugin where you can paste your figma design directly to webflow.
i really like your tutorials, they use real cases and explain things very well, some of these i already knew but still very good. thanks and youre a cutie too!
This video is really helpful. If possible please make a video regarding design to dev workflow if someone uses figma to webflow plugin. Great video keep these coming.
Nice tutorial, I was creating the atoms first and press shift+A yet. I haven't autolayouted a rectangle or frame and started putting things in it. This really helps too
Hi, thanks for the Video. Do you directly start to design with auto layout? Or after you have your design ready? I understand the value of auto layout, but to start quick with designing and make variations I find it to time consuming.
If I have a reference of what I'm building I go directly to auto layout, if I'm building something really creative then its good to start without autolayout. You'll find that once you learn autolayout making variations becomes faster with it rather than without!
simple an on point ! where do you get these kind of creatives to keep in your figma designs? do you create the by yourself or do you use stock images from online ?
If you want to actually follow along here ... try slowing the playback speed to .75 or .05 and work along side. I kept drinking more coffee until I figured out it was just making me shake more and not actually allowing me to understand what was going on.
great tutorial thanks !🤙 btw, using auto layout does not mean to the responsive design right? the navigatior works different in mobile and desktop like that.
Hi, it is usually better to use frames because they can have almost the same properties as a rectangle (in that example, fill). If you would want to use a rectangle and make an auto-layout, that would make it into two objects inside the auto-layout. If you convert a frame with the text to auto-layout, it becomes an auto-layout with one object inside - text. I know it can be confusing, but in most cases, it is much much better to use frames for 90% of the cases. When it comes to components, it will help you scale whatever you are building into a UI Kit, then a UI System, and then a Design System. With a rectangle, that is impossible. Hope that helps :)
Hey it's a great video clearly explained. I have a question at 7:08 time code, how is that you are able to apply the padding only to the top of the button when all the three elements(heading, text, and button) are with combined single auto layout.
Hello I hope all is good. I love all your videos. I love the way you present yourself quick question what program are you using to do your screen recording because I like it better than the way a regular loom looks can you help and let me know?
Download the free work file here: ✅ arnau.lemonsqueezy.com/buy/250a2944-c0ec-4648-9e8f-d6fbcf0cea0a
I am not able to get the file on my figma. Can you kindly assist?
It would be good to have keystrokes displayed on screen. I found myself not understanding what you where doing at times! Was still a helpful video! keep it up!
I’ll have this set up next vid thanks for suggesting!
Yes this tutorial was terrible. Couldn't follow.
My frames aren't aligning horizontally and I also can't tell what actions he's using. I love most of his videos but lost on this one SMH.
Yep, I found myself thinking the same thing
Finally! Somebody made quick and easy tutorial on auto layouts, not 1 hour of nonsence. Arnau you are a living legend
appreciate you!
I still don't understand why we use it
Thats how you know they know how to design with empathy for the end user 😁
It took me 50 mins to go through this tutorial, having the keystrokes on screen would be great as in a few scenarios you just say something like "We align them just like that" but there is no explanation as to how so I think keystrokes would help us there.
I've been stuggling so badly with auto layout and component properties... These 2 tutorials of yours made me a fulfilled human being. I may now die peacefully after wasting weeks on manual adjusting.
hahaha glad i could help!
I struggled a lot with auto layout but finally I think I got the hang of it. You've presented the auto layout in the simplest words and its really easy to understand. Really helpful video.
Glad it helped!
I just started to use auto layout. The other guys eating up 40 to 50min for small topic. You're amazing bro. Thanks Again.
Very helpful. As a noob to Figma I found this pretty easy to follow. Basically frames within frames, Shift+A and then play with the padding and alignment tools. It helps a lot to pay attention to how frames are nested within each other on the left.
yessir!
Thank you so much for the tutorial bro. I clicked your video to learn about auto layout. But you also taught me how to use absolute position and rename a lot of layers at once
This is a game changer for me, I never knew how to manipulate auto-layout like this before. Great tutorial Ros 👏👏👏
thank you so much for the video! I am very new to figma, I didn't even know you can put an auto layout inside another one!
I'm so glad I found this. Thank you so much! I was so confused with auto layout earlier without knowing that I was doing a wrong approach.
Great to hear!
You are a legend bro, whenever I deep dive into a topic, your videos provide me with straight to the point explanations!
This video made it click for me after watching many videos of how to use auto layout, using the figma to webflow plugin i can design so much faster now! ❤❤❤
Great to hear!
After 5 hours of that stuff doing anything BUT what it's supposed to, I do it by hand .-.
But thank you for a great tutorial! I'll definetly will come back a buch if times!
if you practice and practice it becomes faster than doing it by hand!
As a junior designer this channel has been super helpful , thanks Arnau :)
Happy to hear that!
These videos are amazing, clear, crisp and to the point, absolutely love the work you are doing, would love to see a similar video for mobile apps if possible, like that would be super cool. Honestly, this is like my favorite channel right now because of how easy to follow your videos are. Thanks!!
I'm a newbie when it comes to Figma. Very insightful and I look forward to the next video.
Thanks
Thanks for watching!
This is very helpful. I was confused about using auto layout but your explanation is very easy to understand. Thank you 😀
Glad it was helpful!
Are you going to start using auto layout?
absolutely
Not a habit but need to make it one. Seems this will be really useful for me in the future especially for webflow and it's new plugin where you can paste your figma design directly to webflow.
Yesssssss! Thank you
You're cute🥰
I just wanted to learn about the auto layout but I was bored and wanted to look at cute boys' videos. So I found this video in which I can do both.
This is very helpful...creating layouts that can be recreated in CSS/HTML
You were right! No transitions and another great video. Thanks! 🎉😊🙏
Thanks!! Glad you checked out another vid :)
Great content!
Definitely need an updated tutorial of it with the new version of Figma.
This was so digestible, thank you! I haven't been able to understand auto layout until now
Awesome, glad it was helpful
You know what, your explanation is very clear! I understand about how Auto Layout works now. Thanks for this helpful video 😄🙌
Thanks for watching! Glad it was helpful :)
Excellent tutorial to clear your doubts..thanks buddy
My pleasure
This is great , Thank you, although as a beginner i couldn't keep up at first but i gradually got it
Great job!
Brother appreciate the effort but are you going way too fast, slow down a bit, doesnt have to be 10 min if you cant catch up. Totally friendly advice
Noted!
Use the 0.75 speed for viewing
Totally agreed.
Lost me within 10 seconds of making a frame
He speaks pretty fast
Been looking for a video like this! And it was made a year ago 😮 thank you so much! I’m subscribing😊
Thanks for subbing!
Great video thanks, Arnau. Would have loved to see a nav included next time.
Noted!
Very insightful/helpful, I've increased my productivity a hundred fold, Thank you very much!!!!
Awesome!!
@ArnauRos this was amazing, well summarised, and to the point, and even learned something extra.👏🏽. This should be the it video for auto-layout
thanks man :)
This was great I had been struggling with auto layout now I finally get it
Glad I could help!
absolute positioning - missed that my whole life!
i really like your tutorials, they use real cases and explain things very well, some of these i already knew but still very good. thanks and youre a cutie too!
Glad you like them!
Thank you! Mysteries were unraveled :)
You just made everything easier for me.
Thank you so much!
Glad it helped Henry!!
Great now I have a good grasp of autolayout :)
Easy to understand, thanks for the video!
Glad you liked it!
This video is really helpful. If possible please make a video regarding design to dev workflow if someone uses figma to webflow plugin. Great video keep these coming.
Thanks for the suggestion!
thANKS for existing
This was incredibly helpful, thank you!
Glad it was helpful!
Thanks you This Video is Very HELPFUL.....🥰
Love your channel bro!
I appreciate that!
Nice tutorial, I was creating the atoms first and press shift+A yet. I haven't autolayouted a rectangle or frame and started putting things in it. This really helps too
Glad it helped!
Bro, how to use a double auto layout? For example in notifications and all that, please make a tutorial on this in the new updated Figma
Sooo cool exactly what i needed
It helps me a lot ,thank you so much for making such a excellent tutorial for us , I really appreciate you struggles and keep it up
Happy to hear that!
You are a life saver ❤🔥❤🔥
I was extremely nervous about using Autolayout. But now that I've seen this video, I'm motivated. This was extremely beneficial!
Glad it was helpful Jadi!
It helped a lot. Thankyou!
Awesome! I learned something new!
Glad it was helpful!
The video for auto-layout was simple and easily understandable. Do we need to create groups of similar contents first before applying Auto-Layout?
Thanks Rohit :). I never use groups, only autolayout and frames!
That was an amazing tutorial, it has helped me a ton! keep it up!
Glad to hear it!
very descriptive bro
Hi, thanks for the Video. Do you directly start to design with auto layout? Or after you have your design ready? I understand the value of auto layout, but to start quick with designing and make variations I find it to time consuming.
If I have a reference of what I'm building I go directly to auto layout, if I'm building something really creative then its good to start without autolayout. You'll find that once you learn autolayout making variations becomes faster with it rather than without!
I'm so happy!! Thank youuuuu❤❤❤❤
You're welcome 😊
thank you for this! would be helpful if you can highlight your cursor and display yung shortcuts
Noted!
Thank you 🙏 If possible please make one for components in Figma in similar way.
Great suggestion!
Really nice! calm and perfect pace!!!
Thanks Rschinchore :)
thank you, great explanation!
Glad you enjoyed it!
Amazing tutorial! Easy to understand and implement in my designs.
Thanks Maliha!
Thank you Arnau.
My pleasure
Great explaination!
Thanks!
simple an on point ! where do you get these kind of creatives to keep in your figma designs? do you create the by yourself or do you use stock images from online ?
for the layouts i use tilebit.io , for the images I use unsplash plugin in figma
amazin tutorial, thanks!
thank you
Such a helpful video! At 8:31 you rename multiple layers, how do you do this?! This would have saved me so much time
In Figma to rename layers it’s ctrl/cmd + R while selecting layers 🚀
You are a wizard
😎🙏
If you want to actually follow along here ... try slowing the playback speed to .75 or .05 and work along side.
I kept drinking more coffee until I figured out it was just making me shake more and not actually allowing me to understand what was going on.
Hey Marc, sorry about the mismatch in pace here, I have some other videos that go more in depth at a slower pace if you'd like to take a look at those
This is very helpful. Thanks 👍
Glad it was helpful!
Really nice video, thank you!
Thanks for commenting Shabbir!
amazing I'm so glad. thank you so much
Glad you like it!
Thanks for sharing mate, once you duplicated several desktop, could you merge all of them in one to have a single clean frame?
Not sure what you mean here, but if you're referring to if you could put all the sections into one larger parent autolayout frame, definitely!
i love your video nd how you are breaking everything down buh i think you are a little bit fast.
Thank you ! it was really useful
Super helpful. Thank you
Glad it helped out!
Great tutorial
Glad you think so!
Nice tutorials - subbed
Thanks for the sub!
Well explained!
Thanks Rahul!
Dope man Good job and thank you
great tutorial thanks !🤙 btw, using auto layout does not mean to the responsive design right? the navigatior works different in mobile and desktop like that.
You'd usually create a new design for mobile!
why do you use a frame for the button instead of using a rectangle? Thanks for the good video!
Hi, it is usually better to use frames because they can have almost the same properties as a rectangle (in that example, fill). If you would want to use a rectangle and make an auto-layout, that would make it into two objects inside the auto-layout. If you convert a frame with the text to auto-layout, it becomes an auto-layout with one object inside - text. I know it can be confusing, but in most cases, it is much much better to use frames for 90% of the cases. When it comes to components, it will help you scale whatever you are building into a UI Kit, then a UI System, and then a Design System. With a rectangle, that is impossible.
Hope that helps :)
You are awesome! Thank you!
Thank you for watching!!!
ur content is good but u go SUPER fast in advanced mode. i had to rewatch this 10 min video 10x lol
Hey it's a great video clearly explained. I have a question at 7:08 time code, how is that you are able to apply the padding only to the top of the button when all the three elements(heading, text, and button) are with combined single auto layout.
Hey not sure what you mean here
Hello I hope all is good. I love all your videos. I love the way you present yourself quick question what program are you using to do your screen recording because I like it better than the way a regular loom looks can you help and let me know?
Hey, screen record is just quick time :)
Can you please do video on responsive web design using figma
yes! anything in specific?
@@ArnauRoscan you please include responsive web design using auto layout, Thanks for replying back..
mind blown 🤯
Nice and fast , ty
Im making a page from scratch in Webflow with my own design - should I still build as you do with autolayout in Figma? Thanks!!
Hey, yes! Its important to have your design ready in Figma before going into Webflow
Thanks for sharing this!
Thank you for watching :)
thanks you so much !
Welcome!
great tut
Thanks
when you created the second 623/623 frame, how did you know to make it 623/623?
Sorry I'm not sure what you mean here do you have a time code I can look at?
Should you apply auto-layout to the whole frame of a mobile/web page, or just the sections that need auto-layout within a page?
Its good to build the entire page using autolayout as thats how it will be with the building process as well
What buttons did u press on your keyboard to change the direction?
Love this Thankyou！ how can I delete frame but not the photo in the frame? You did it at 9:23
Use the ungroup shortcut! ctrl or command + shift + G
@@ArnauRos thank you very much!!!
Thanks really usefull
Glad to hear that
Wow thank you
No problem
Dude thanks You solved me a lot of doubts 😊
Glad to hear that!
can you teach me horizontal and vertical resizing for designing a responsive layout
not sure what you mean! can you explain a bit more what you need?