Learn Figma Auto Layout (Including Config updates) - Everything you need to know! | Figma Autolayout
ฝัง
- เผยแพร่เมื่อ 20 พ.ค. 2024
- 🚨Follow along with this Figma file -
www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Colour System - • Figma Design System - ...
3. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Big Mistake!
00:22 What is an Auto Layout
01:02 Auto Layout Properties
01:29 Layout
02:34 Gap/Spacing
04:36 Padding
05:36 Alignment
06:07 Advanced settings
08:02 Making a button
08:46 Resizing (hug, fix, fill)
14:15 Absolute position
16:35 Min/Max Width/Height
19:29 EXHALE
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 - แนวปฏิบัติและการใช้ชีวิต
![คบซ้อน - วงL.กฮ. [ Official MV ]](http://i.ytimg.com/vi/5MtesqJ0I1c/mqdefault.jpg)
Best tutorial I've seen so far. Thank you for the shared files to follow along. You're a great teacher.
Your adorable demeanour made the tutorials easy to grasp.
And oh, I just subscribed!
Figma Evangelist ❤ You make better tutorials than Figma itself 😂 I would love to see more advanced material on creating design systems, variables and advanced modals. Keep on good work!
Thank you! Best compliment ever 🥹🥹 I have a whole playlist on creating a design system using variables! I love that we are all learning to use variables together and finding out what the best practice is for our systems ☀️🤗 - Figma Design System
th-cam.com/play/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq.html
If you're a UI designer and know how HTML and CSS work, this Figma feature blends your layout logic from design to code.
The best Figma channel I've ever subscribed!!!
Thanks 🙏🏻! and I completely agree! Auto layout is juts such a game changer 🤗☀️
Loved your energy
Thanks! ☀️🙏🏼
Amazing tutorial, thank you so much.
You're very welcome! ☀️🙏🏻
Thank you so much , You taught this soooo well. I followed along and got it :)
Thanks! 🙏🏼☀️🤗
You're a good teacher. Keep it up!❤
Thank you! 😃☀️🙏🏼
Excellent tutorial!! I finally get it :)
Thanks! 🙏🏻☀️
Well explained. I love the way you explained, you made it simple.
Thanks! 🙏🏼☀️
Great tutorial! Thanks
You're welcome! 🙏🏻☀️💛
thank you for this usefull lesson about auto layout
You are welcome! 🙏🏻☀️
Love the vibe, was fun watching, ask to share and subscribe alot more
Thanks! 🙏🏼☀️💛
This was fun to watch 😅
Thanks! 🙏🏻☀️💛
Thanks for the clear explanation
You're welcome! ☀️🙏🏻
You definitely have a subscriber now. That was the best explanation on how to use a tool I've ever seen. You really know your stuff! I used to watch video tutorials for a living and your in the top 10% of educators on TH-cam.
Aww thanks so much! I really appreciate it! ☀️🙏🏼💛
Top stuff!
SUBSCRIBED
Thanks! 🙏🏻☀️
My goodness! You are an amazing teacher. Going to look you up on Twitter
Thanks! Im not on twitter but I do have an instagram and a TikTok! ☀️
Thanks so much :) Love the tip for absolute position and the max/min width/height, so helpful!
You're so welcome! ☀️🙏🏻💛
Great tutorial! I followed along with your Figma practice files and feel like I understand Auto Layout much better. I'm happy☺. Thank you so much.
yay thanks! im glad it was helpful 🙏🏻☀️💛
I'm so glad I discovered your channel 🙏 I've been struggling recently with understanding this topic, you made my life easier thank you so much!
aww yay I'm glad my videos are helpful! ☀️🙏🏻
Amazing teacher
Thank you! 😃☀️
Nice for refresh!
Thanks! 🙏🏻☀️💛
explained very well , easy and simple
Thanks! 🙏🏼☀️
amazing tutorial, just you are amazing, very clear expalnation
Thanks! Im glad you found it helpful ☀️🤗🙏🏻
@@TDSunshine your teaching style amazing, seems you reduce spped bit slow 10X to 5X 😀now able to understand, you worked very hard to explain the auto layout for viewers thank you 🙏🙏
Hey thanks so much for putting this together! I'm relatively new to Figma (I did the Google UX course earlier in the year and I've been developing my UI skills since by doing personal projects). Sometimes when I see your videos I'm like OMG I'm a million miles away from fully understanding everything, but after this video I feel a lot better in that many of your points relating to autolayout I'm already doing! I'm really glad you highlighted that features like absolute position are only relevant in specific cases. I feel like the information overload of the internet can make us feel like we need to use every functionality, all the time! Sorry for the essay! Thanks again!
Aww yay! Im glad to hear you found my video helpful! and I completely get what you are saying! There is so much to learn in Figma and it can feel like you are constantly behind no matter how many videos you watch! but don't worry to much about it :) its all one big learning curve so take your time and just keep having fun with this amazing tool ☀️🤗
Really great ! Im french beginner in UI and i totally understand this video. I think everyone can understand too, i going to watch all your video ! Thanks a lot
aww thanks! ☀️🙏🏻💛
Great communication skills ! i liked it.
Thanks! 🙏🏻☀️💛
Good work 💪
Thanks 🙏🏻☀️
great tutorial!!
Thank you! 🙏🏼☀️💛
@@TDSunshine yes, keep going!!
Hey I just want to say that I have been struggling with auto layout so much, I have watched 60 minutes videos, read articles and still no clarity, but your video hit me like a truck :) it was so well explained in such an engaging way, I understood it all, thank you so much, you have no idea the impact u created
Thanks! 🥹🙏🏼 I’m glad you found it helpful! ☀️💛
Wow!
Thanks! 🙏🏼☀️
I like it the way of your expression ❤😊
Thanks 🤪☀️
Very clear explanations and so easy to grasp. Great job! You don't happen teach After Effects do you?
You're welcome! I don't :( I mainly use Apple Motion as well to create my effects so I'm not super familiar with After Effects. 🙏🏻☀️
Love from india🇮🇳
Well explained 👏👏
Thanks! 🙏🏻☀️💛
ure amazing!
Thanks! 🥺☀️🙏🏼
12:59 😋... Cool Leson
😂 it’s cool it’s chill! Ngl I don’t even remember saying this 🙈 ☀️
@@TDSunshine 🤩
I love seeing new Figma users coming from Adobe XD or Sketch lose their mind at what auto-layout can do, but then pull their hair trying to edit a file with lots of auto-layout rules.
but in all seriousness, I think learning to use the auto-layout is a must and is not the hard to learn if you practice it for a short bit.
haha yes! Figma is just superior to them all 😎 and I agree, navigating a file with lots and lots of nested auto layouts can be a bit of a challenge at the start but , like you said, it gets much easier with practice 🤗☀️
was about to put my head through a wall, thank god i came across this video in time :')
i still have a doubt if you could clear it please:
12:40 - Why did Green expand to that exact width? Why not slightly more or less? Is it because due to Red and Orange being fixed width, the effective "container" space to expand into was the area left around Yellow and Green and hence they both adjusted to each taking half of that available container space to fill?
thanks! and Yes, you explained it correctly! Green was set to fill width so it took up as much space as it could while respecting the other elements inside the auto layout and the spacing between them. 🙏🏻☀️💛
Hi TD - 1st, the video is GREAT
2nd, do you know how can I use with auto-layout symbols?
I have a symbol of text in my style guide, when I'm using it within a auto-layout - there is an issue - the auto-layout doesn't wrapping the dynamic text.
Thanks in advance, T2B ;-)
are all of your symbols in one text box or are they separate text boxes? and what do you mean by it doesn't wrap? ☀️
Hi @@TDSunshine thank you for your response. I've created a button with an Icon symbol and a Text symbol band in an auto-layout.
great video really....can you do autolayouts with texts and containers
Thanks! will add to my list! 🙏🏻☀️
You are so clear and pedagogical in your explanations that I find it a pity that you speak so fast.
Thanks! and yes I know I go a bit too fast sometimes :/ I'm working on it though!☀️🙏🏻💛
I believe there's really no need to make a big deal out of it. When the speed is reduced, the voice becomes distorted, and it's a shame when you have such a beautiful voice and an immense talent for teaching. Thank you for the information, I've been browsing TH-cam for a little over 15 years now.😇@@amashavindhya
In Last part... what if we have to scale vector size also...as I'm trying to do so either logo get distorted or it won't scale.. can you suggest how to fix this..
tricky one! sadly there is no way (that I know of) to make it scale dynamically :/ so if the width changes there is no way to make the height change accordingly automatically :/ ☀️
2 more ways for changing packed and auto spacing:
Just type 'a' instead of auto and enter.
Double click on that box instead of selecting and typing 'x'
OMG I did not know about the double tapping!! such a great tip thanks!! 🤩🙏🏻☀️
@@TDSunshine helping each other out to get better at designing. What u do helps thousands of people 🙌🙌
🙏🏻🥹 @@kriswayne7938
@@TDSunshinebtw had a request on an element.
The tracking element companies use like track ur shipment, both horizontal and vertical. Also the upcomin events element in calendar apps.
The auto layout feature for these r very complex to make
Finally a depression comes to end. Thank You❤
thanks! 🙏🏻☀️🤗
Spent 30 min on another tutorial where they used "tidy up" which I guess must have been replaced with auto layout. Going to stay with your channel from now on!
"Tidy up" is a kind of alignment and distribution function in Figma and it can be found in the top of the design panel in the drop-down at the end of the other alignment functions ☺️ But welcome to the channel! ☀️🙏🏻
@@TDSunshine I'm definitely not disagreeing, it must be me.. but on my browser I do know that the tidy up button should be on the top right and should have a dropdown but it just isn't there. That row ends with the align bottom button for me. Maybe it's the browser or b/c I'm on windows but that and the "distribute horizontally" function isn't working for me. But I'm just going to do what you do from now on. 😃Auto layout is better for what I wanted to do anyway.
"It's exactly what I wanted, isn't it?"
- Not really, they're not square anymore, and it's an obvious figma bug that even with aspect ratio locked on an object, when width is set to fill, the height lock stays on the original value, rather than scale appropriately.
It solves the issue I was facing so it was what I wanted 😊 you can play around with the height as well maybe set some min and max values there to get the result you are looking for ☀️
borrow me your mind
🧠📤 🤪☀️
Marvelous content! Very well explained!! I'm doing a Motion Design with Figma course and didnt understand the instructor instructions so i had to search on YT and found your video. Now everything is clear !!❤❤ Got a new sub!!!
Aww thanks! 🙏🏼☀️💛
you are amazing. finally i understand hug, fill, fixed sizing. thanks alot for that video. keep going
Glad it helped! 🙏🏼☀️💛