Learn Figma Auto Layout in 10 Minutes (Everything You Need To Know)
HTML-код
- Опубликовано: 11 дек 2022
- Auto layout in Figma is something that can help you design faster and more efficiently. It can also help you understand how to properly set up your design in order to pass off to developers on when you're building yourself. Being able to know how to design something correctly is a huge power that not many designers have. This video should cover 99% of what you need to know for figma autolayout.
Try the work file here: 👇
arnau.lemonsqueezy.com/buy/25...
💻 Explore Figma Components 👇
www.tilebit.io
🛠 Try Figma 👇
bit.ly/3LqgGig
🛠 Figma For Pros 👇
bit.ly/3V5oZmD
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
📄 Bonsai Referral (try for free)
www.hellobonsai.com/invite?fp...
👨💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!
Download the free work file here: ✅ arnau.lemonsqueezy.com/buy/250a2944-c0ec-4648-9e8f-d6fbcf0cea0a
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.
You are a legend bro, whenever I deep dive into a topic, your videos provide me with straight to the point explanations!
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
Love your channel bro!
I appreciate that!
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!
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!!
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!
I just started to use auto layout. The other guys eating up 40 to 50min for small topic. You're amazing bro. Thanks Again.
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 a newbie when it comes to Figma. Very insightful and I look forward to the next video.
Thanks
Thanks for watching!
Thank you ! it was really useful
This was great I had been struggling with auto layout now I finally get it
Glad I could help!
That was an amazing tutorial, it has helped me a ton! keep it up!
Glad to hear it!
Amazing tutorial! Easy to understand and implement in my designs.
Thanks Maliha!
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!
Dope man Good job and thank you
Really nice! calm and perfect pace!!!
Thanks Rschinchore :)
You just made everything easier for me.
Thank you so much!
Glad it helped Henry!!
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!
This was so digestible, thank you! I haven't been able to understand auto layout until now
Awesome, glad it was helpful
Very insightful/helpful, I've increased my productivity a hundred fold, Thank you very much!!!!
Awesome!!
v helpful! ty :)
I'm so happy!! Thank youuuuu❤❤❤❤
You're welcome 😊
This is great , Thank you, although as a beginner i couldn't keep up at first but i gradually got it
Great job!
You were right! No transitions and another great video. Thanks! 🎉😊🙏
Thanks!! Glad you checked out another vid :)
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!
Thanks you This Video is Very HELPFUL.....🥰
This was incredibly helpful, thank you!
Glad it was helpful!
As a junior designer this channel has been super helpful , thanks Arnau :)
Happy to hear that!
This is very helpful...creating layouts that can be recreated in CSS/HTML
Thanks for sharing this!
Thank you for watching :)
Easy to understand, thanks for the video!
Glad you liked it!
Really nice video, thank you!
Thanks for commenting Shabbir!
This is very helpful. Thanks 👍
Glad it was helpful!
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!
thank you, great explanation!
Glad you enjoyed it!
Awesome! I learned something new!
Glad it was helpful!
Super helpful. Thank you
Glad it helped out!
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!
amazing I'm so glad. thank you so much
Glad you like it!
Thank you Arnau.
My pleasure
amazin tutorial, thanks!
thank you
Excellent tutorial to clear your doubts..thanks buddy
My pleasure
thanks you so much !
Welcome!
You are awesome! Thank you!
Thank you for watching!!!
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 :)
mind blown 🤯
Thank you🌹
Great explaination!
Thanks!
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!
What buttons did u press on your keyboard to change the direction?
i have added autolayout to my desktop frame and to other frames inside that but i want to add elliptical gradients in the background to beautify the design, while doing so my whole design gets messed up, is there any way to set my background with elliptical gradients and over that add other frames without messing anything in autolayout, please reply im confused since past two days
Hey I am new to figma n also by your clip my idea are more clearer but i have problem with my 2nd frame which overlap the fist frame slightly it like mt 2nd frame title goes toward the first frame its like first frame bottom padding got disappeared n 2nd frame got mergered, how I'll fixed that ? Its one of my another project but i am having query so maybe you can explain me in another topic.
Thanks really usefull
Glad to hear that
Well explained!
Thanks Rahul!
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.
Great tutorial
Glad you think so!
Thanks for the video
Thanks for watching!
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
Nice and fast , ty
Hello, Can you help me please?
In the first part of the video after adding the images is not letting me add the text next to the image its adding it on top of it, how can i fix that?
Let me know if you still need help!
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!
Thank you
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!
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 :)
thanks!
You bet!
great tut
Thanks
Wow thank you
No problem
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!
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!
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
When I tried to add the text box it went above the image or bellow, but never next to that block image like in your video, what can I do? @Arnau Ros
Try making the text box as absolute, that should move it above the image
@@ArnauRos thank you so much! Your vids are always helpful, thanks for your kindness also 🌟
After adding auto-layout to the rectangle, I am not able to add text like i was able to add the text in the layout before pressing shift+A but not after.
hey, let me know how i can help
Hi, genuinely question.
Why would you code everything while a figma page can get turned into code with an extension?
well figma is used for many different applications, easy marketing sites can be done with framer/webflow, but if you're designing for an app, or a webapp, or a very custom project you can help your devs get organised :)
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!
Wait I have a question… is auto layout mainly used for when creating web page prototypes? I’ve been using it for mobile … but I’ve been having issues with that 😔
Autolayout can be used for everything, mobile included :)
thanks
Collonut, gràcies
Hi, at 2:22 there was a cut. How do you get the new square frame to auto centre in the parent desktop frame? When I try it, it's not horizontally centred, even though I followed every step up to that point. Thanks!
Just subbed. Looking forward to learning Figma off you. I've already done a LinkedIn Learning basics course, so just building my skills from hereon in. Thanks for your channel.
Hey, so the parent frame is autolayout with fixed horizontal and hug for vertical. I then click F and create a new frame inside of is using shift option to scale equally. Hope this helps
Awesome! Though it would have been nice to have a link to the raw file so I could try it out, but still I learned a lot.
just uploaded to the description
How do you insert lorem ipsum placeholder text? Is it a plug in?
there is a plugin for it yes!
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
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!
How did you add vertical gap between those three content frames ? I am not able to add
You should create a autolayout frame wrapping the three content frames
Thankyou so much
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
absolute positioning - missed that my whole life!
very Nice video
Thanks!
Thank you 🙏 If possible please make one for components in Figma in similar way.
Great suggestion!
Do we need layout grid any more or the auto layout will be enough?
the grid helps autolayout work more effectively
just before 02:30 you mention making it fixed width. This part confused me because suddenly the frame was on the left hand side... I dont understand what you did here?
Hey, check how your autolayout is positioned if the pieces are moving when you set it to fixed width
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?
thANKS for existing
I’m following your steps, which is working well. It worked to put an image in the frame, but somehow when I type my text just like you, my text appears on top (or at the bottom) of the frame from the picture, but yours is right next to it at the top. If I’m looking at the layers, mine show exactly the same as yours. Any idea what I’m doing wrong?
Hey! Could it be the direction of your autolayout frame?
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!
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 🚀
I drag from the right and a frame is moving and resizing but the containing elements and containers never move, I have to click down multiple levels to get something to move, and even then it's that individual grouping and not the entire layout. I just don't get this.
Hey, containers are important to basically hold your design in place, but over using them will get annoying. If you set your containers to ‘fill’ on horizontal sizing your designs should scale when you drag the top level frame
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!!!
I couldn't understand what you had done after putting in the first frame for a photo around 1:47 and then it didn't work for me
Let me know if you still need help!