Learn Figma Auto Layout (Including Config updates) - Everything you need to know!

Learn Figma Auto Layout (Including Config updates) - Everything you need to know! | Figma Autolayout

Рет қаралды 9,812

Күн бұрын

Config 2024 version - • Figma Autolayout updat...
🚨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

Пікірлер: 121

@web.deslgner 18 күн бұрын

Best auto layout tutorial on youtube!! No one goes into this detail and explains everything

@TDSunshine 11 күн бұрын

Thanks! ☀️🙏🏻💛

@jhingrhed1 6 ай бұрын

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

@TDSunshine 6 ай бұрын

Thanks 🙏🏻! and I completely agree! Auto layout is juts such a game changer 🤗☀️

@PanNexus 8 ай бұрын

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!

@TDSunshine 8 ай бұрын

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 kzfaq.info/sun/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq

@rahulgaikar5748 7 ай бұрын

Loved your energy

@TDSunshine 7 ай бұрын

Thanks! ☀️🙏🏼

@almighty.saumya 4 ай бұрын

Thank you so much , You taught this soooo well. I followed along and got it :)

@TDSunshine 4 ай бұрын

Thanks! 🙏🏼☀️🤗

@petermckinnon386 2 ай бұрын

Amazing tutorial, thank you so much.

@TDSunshine 2 ай бұрын

You're very welcome! ☀️🙏🏻

@Godheals_always 5 ай бұрын

Top stuff! SUBSCRIBED

@TDSunshine 5 ай бұрын

Thanks! 🙏🏻☀️

@LtCore 3 ай бұрын

Excellent tutorial!! I finally get it :)

@TDSunshine 3 ай бұрын

Thanks! 🙏🏻☀️

@Tennerick 3 ай бұрын

Love the vibe, was fun watching, ask to share and subscribe alot more

@TDSunshine 2 ай бұрын

Thanks! 🙏🏼☀️💛

@rajeshvelan9585 Ай бұрын

One of the best tutorial about auto layout i never ever seen except this❤, thanks a lot. I am looking for responsive complex forms creation using auto layout…

@TDSunshine Ай бұрын

Thanks! great idea will add to my list! ☀️🙏🏻

@sakshiyadav8971 3 ай бұрын

Well explained. I love the way you explained, you made it simple.

@TDSunshine 3 ай бұрын

Thanks! 🙏🏼☀️

@sarahayman3506 3 ай бұрын

Thanks for the clear explanation

@TDSunshine 3 ай бұрын

You're welcome! ☀️🙏🏻

@DayDrumer 2 ай бұрын

You're a good teacher. Keep it up!❤

@TDSunshine 2 ай бұрын

Thank you! 😃☀️🙏🏼

@user-iy1dk6ew2x 19 күн бұрын

really helpful, thank you!

@TDSunshine 11 күн бұрын

You're welcome! ☀️🙏🏻💛

@himajaakupatni5705 2 ай бұрын

Great tutorial! Thanks

@TDSunshine 2 ай бұрын

You're welcome! 🙏🏻☀️💛

@emmanuelrichmond9952 3 ай бұрын

My goodness! You are an amazing teacher. Going to look you up on Twitter

@TDSunshine 3 ай бұрын

Thanks! Im not on twitter but I do have an instagram and a TikTok! ☀️

@laurapatten9074 3 ай бұрын

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.

@TDSunshine 3 ай бұрын

yay thanks! im glad it was helpful 🙏🏻☀️💛

@Ani_Pat 3 ай бұрын

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!

@TDSunshine 3 ай бұрын

aww yay I'm glad my videos are helpful! ☀️🙏🏻

@mikedaniels7210 Ай бұрын

Your adorable demeanour made the tutorials easy to grasp. And oh, I just subscribed!

@TDSunshine Ай бұрын

Aww thanks! ☀️🙏🏼

@ManuAntony-ne8te 3 ай бұрын

explained very well , easy and simple

@TDSunshine 3 ай бұрын

Thanks! 🙏🏼☀️

@stephbeth89 Ай бұрын

Best tutorial I've seen so far. Thank you for the shared files to follow along. You're a great teacher.

@TDSunshine Ай бұрын

Thanks! 🙏🏼☀️💛

@davidostrowski679 8 ай бұрын

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!

@TDSunshine 8 ай бұрын

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 ☀️🤗

@allshadesofojaay 3 ай бұрын

This was fun to watch 😅

@TDSunshine 3 ай бұрын

Thanks! 🙏🏻☀️💛

@rayanebaker4404 3 ай бұрын

Great communication skills ! i liked it.

@TDSunshine 3 ай бұрын

Thanks! 🙏🏻☀️💛

@alkesh482 8 ай бұрын

Amazing teacher

@TDSunshine 8 ай бұрын

Thank you! 😃☀️

@JackieWilushewski 2 ай бұрын

Thanks so much :) Love the tip for absolute position and the max/min width/height, so helpful!

@TDSunshine 2 ай бұрын

You're so welcome! ☀️🙏🏻💛

@ramazanguler6066 8 ай бұрын

thank you for this usefull lesson about auto layout

@TDSunshine 8 ай бұрын

You are welcome! 🙏🏻☀️

@kakanishalemraju9995 8 ай бұрын

amazing tutorial, just you are amazing, very clear expalnation

@TDSunshine 8 ай бұрын

Thanks! Im glad you found it helpful ☀️🤗🙏🏻

@kakanishalemraju9995 8 ай бұрын

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

@Thomas51860 7 ай бұрын

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

@TDSunshine 7 ай бұрын

Thanks! 🥹🙏🏼 I’m glad you found it helpful! ☀️💛

@user-cc4ti2qy5k 3 ай бұрын

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

@TDSunshine 3 ай бұрын

aww thanks! ☀️🙏🏻💛

@lilitavetisyan4594 14 күн бұрын

Thank You soooo much. So clear and simple, and fast and nice voice in comparing figma tutorialsD

@TDSunshine 11 күн бұрын

Thanks! ☀️🙏🏻💛

@Mr.EFactosphere 2 ай бұрын

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 KZfaq.

@TDSunshine 2 ай бұрын

Aww thanks so much! I really appreciate it! ☀️🙏🏼💛

@tomek_kot 4 ай бұрын

Good work 💪

@TDSunshine 4 ай бұрын

Thanks 🙏🏻☀️

@entertainmentyoutube3606 6 ай бұрын

great tutorial!!

@TDSunshine 6 ай бұрын

Thank you! 🙏🏼☀️💛

@entertainmentyoutube3606 6 ай бұрын

@@TDSunshine yes, keep going!!

@Believer-yk7th 4 ай бұрын

I like it the way of your expression ❤😊

@TDSunshine 4 ай бұрын

Thanks 🤪☀️

@rajeshnunia9642 4 ай бұрын

Love from india🇮🇳 Well explained 👏👏

@TDSunshine 4 ай бұрын

Thanks! 🙏🏻☀️💛

@charenzcomilang7216 2 ай бұрын

ure amazing!

@TDSunshine 2 ай бұрын

Thanks! 🥺☀️🙏🏼

@AbrahamAkan-vm9yc 12 күн бұрын

Thanks a lot

@TDSunshine 11 күн бұрын

You're welcome! ☀️🙏🏻

@angelovergara 2 ай бұрын

Very clear explanations and so easy to grasp. Great job! You don't happen teach After Effects do you?

@TDSunshine 2 ай бұрын

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. 🙏🏻☀️

@lalogreiner 2 ай бұрын

Wow!

@TDSunshine 2 ай бұрын

Thanks! 🙏🏼☀️

@platinoir 8 ай бұрын

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.

@TDSunshine 8 ай бұрын

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 🤗☀️

@user-rm6lz7fo9g 4 ай бұрын

great video really....can you do autolayouts with texts and containers

@TDSunshine 4 ай бұрын

Thanks! will add to my list! 🙏🏻☀️

@stephaneballot 3 ай бұрын

You are so clear and pedagogical in your explanations that I find it a pity that you speak so fast.

@TDSunshine 3 ай бұрын

Thanks! and yes I know I go a bit too fast sometimes :/ I'm working on it though!☀️🙏🏻💛

@stephaneballot 3 ай бұрын

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 KZfaq for a little over 15 years now.😇@@amashavindhya

@damunna9088 3 ай бұрын

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?

@TDSunshine 3 ай бұрын

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. 🙏🏻☀️💛

@Tsubiki1 3 ай бұрын

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 ;-)

@TDSunshine 3 ай бұрын

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? ☀️

@Tsubiki1 3 ай бұрын

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.

@gagisvanidze592 5 ай бұрын

12:59 😋... Cool Leson

@TDSunshine 5 ай бұрын

😂 it’s cool it’s chill! Ngl I don’t even remember saying this 🙈 ☀️

@gagisvanidze592 5 ай бұрын

@@TDSunshine 🤩

@riteshkukreti 2 ай бұрын

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

@TDSunshine 2 ай бұрын

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 :/ ☀️

@oneilobi822 23 күн бұрын

wow

@TDSunshine 11 күн бұрын

☀️🙏🏻

@atxmaps 2 ай бұрын

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!

@TDSunshine 2 ай бұрын

"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! ☀️🙏🏻

@atxmaps 2 ай бұрын

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

@hamzahameed5910 4 ай бұрын

Finally a depression comes to end. Thank You❤

@TDSunshine 4 ай бұрын

thanks! 🙏🏻☀️🤗

@kriswayne7938 6 ай бұрын

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'

@TDSunshine 6 ай бұрын

OMG I did not know about the double tapping!! such a great tip thanks!! 🤩🙏🏻☀️

@kriswayne7938 6 ай бұрын

@@TDSunshine helping each other out to get better at designing. What u do helps thousands of people 🙌🙌

@TDSunshine 6 ай бұрын

🙏🏻🥹 @@kriswayne7938

@kriswayne7938 6 ай бұрын

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

@dipika-xz4gu 2 күн бұрын

Please make new version video

@TDSunshine 2 күн бұрын

kzfaq.info/get/bejne/qJ9maaWIu8nHemg.html ☀️🙏🏻

@mondliedwin4857 4 ай бұрын

borrow me your mind

@TDSunshine 4 ай бұрын

🧠📤 🤪☀️

@czerskip 8 ай бұрын

"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.

@TDSunshine 8 ай бұрын

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 ☀️

@lokken10 2 ай бұрын

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

@TDSunshine 2 ай бұрын

Aww thanks! 🙏🏼☀️💛