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

[@scienziatodellemerendine]

Grazie.

[@TDSunshine]

Thank you so much ❤️☀️💛

[@scienziatodellemerendine]

@@TDSunshine Thank YOU! I'm currently trying to evolve from UX Researcher to UX Designer and your videos are so clear and you're so fun and funny to listen to! I'm obsessed with you content now!

[@PanNexus]

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]

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 kzbin.info/aero/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq

[@RedPointDrop]

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]

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

[@davidostrowski679]

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]

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

[@GagiSvanidze]

12:59 😋... Cool Leson

[@TDSunshine]

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

[@GagiSvanidze]

@@TDSunshine 🤩

[@stephbeth89]

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

[@TDSunshine]

Thanks! 🙏🏼☀️💛

[@mikedaniels7210]

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

[@TDSunshine]

Aww thanks! ☀️🙏🏼

[@KathBorup]

I love the way you explain things. I'm a UX designer but I've been between jobs for some time so I am a bit behind on the updates, thus watching all your videos! Auto layout has gotten so good 😍 obsessed!

[@TDSunshine]

Thanks! Glad you found it helpful! ☀️🙏🏻💛

[@Mr.EFactosphere]

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

[@TDSunshine]

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

[@web.deslgner]

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

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@AlvinMoto-Koka]

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]

aww thanks! ☀️🙏🏻💛

[@Thomas51860]

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]

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

[@courtqueen18]

Thank you so much! The explanation on fill/fixed/hug was the simplest, most engaging way to teach this. Thank you for making it accessible to new Figma users. SO helpful. I don't subscribe to a lot of channels, but I've subscribed to yours!

[@TDSunshine]

Glad you liked it! ☀️🙏🏻💛

[@oatula-g7g]

Just loved and subbed lovely lady. You are an absolute wizard, I can't think of anyone explaining it better. Also your explainition is just awesome.

[@TDSunshine]

Yay, thank you! ☀️🙏🏻💛

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

[@wutatv]

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

[@TDSunshine]

Thank you! 😃☀️🙏🏼

[@Ani_Pat]

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]

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

[@lilitavetisyan4594]

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

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@laurapatten9074]

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]

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

[@ManuAntony-ne8te]

explained very well , easy and simple

[@TDSunshine]

Thanks! 🙏🏼☀️

[@RachelBryant-j7e]

So incredibly helpful! Thank you :)

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@petermckinnon386]

Amazing tutorial, thank you so much.

[@TDSunshine]

You're very welcome! ☀️🙏🏻

[@almighty.saumya]

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

[@TDSunshine]

Thanks! 🙏🏼☀️🤗

[@rajeshnunia9642]

Love from india🇮🇳 Well explained 👏👏

[@TDSunshine]

Thanks! 🙏🏻☀️💛

[@sanamfiroozi9986]

Great tutorial 🤩

[@TDSunshine]

Thank you ☀️🙏🏻💛

[@emmanuelrichmond9952]

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

[@TDSunshine]

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

[@sakshiyadav8971]

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

[@TDSunshine]

Thanks! 🙏🏼☀️

[@lokken10]

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]

Aww thanks! 🙏🏼☀️💛

[@JackieWilushewski]

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

[@TDSunshine]

You're so welcome! ☀️🙏🏻💛

[@rahulgaikar5748]

Loved your energy

[@TDSunshine]

Thanks! ☀️🙏🏼

[@LtCore]

Excellent tutorial!! I finally get it :)

[@TDSunshine]

Thanks! 🙏🏻☀️

[@rayanebaker4404]

Great communication skills ! i liked it.

[@TDSunshine]

Thanks! 🙏🏻☀️💛

[@allshadesofojaay]

This was fun to watch 😅

[@TDSunshine]

Thanks! 🙏🏻☀️💛

[@mirelavcoelhos]

clear and objective explanations

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@Tennerick]

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

[@TDSunshine]

Thanks! 🙏🏼☀️💛

[@ramazanguler6066]

thank you for this usefull lesson about auto layout

[@TDSunshine]

You are welcome! 🙏🏻☀️

[@Godheals_always]

Top stuff! SUBSCRIBED

[@TDSunshine]

Thanks! 🙏🏻☀️

[@sergio.arboleda]

Excellent explained, than you.

[@TDSunshine]

Thanks! ☀️🙏🏻

[@adicostea]

You're very charming and a great explainer :) Thank you

[@TDSunshine]

Thank you! 😃☀️🙏🏻

[@hellofriendsoutthere]

this is a great tutorial!

[@TDSunshine]

Thanks! ☀️🙏🏻

[@DEAR_N]

Best tutorial i've seen so far, thank you. Btw my figma dont have fill container and absolute position :(

[@TDSunshine]

Thanks! You will only see both when you are selecting an element inside an auto layout. You can also always check to see if you need to update your figma! ☀️🙏🏻

[@MaksimResolute]

A question: I have 8 boxes, 4 per row in the alleged browser window frame. How can I ensure that when resizing the browser window frame, 8 boxes are re-aligned to the center of the page when it becomes fewer of them in one row ( 3 per row), maintaining equal distance (auto) from the left and right to the alleged browser window, but still aligned by the top-left image? I want the boxes to remain centered, even when resizing the browser and side margin changing. The center auto layout option kind of does it but makes boxes wrap from the center, i tried the frame-in-frame option but without any success as it only wraps boxes if it's in fill container mode, but this leaves extra empty space and doesn't let boxes center to parent frame (browser window). Not sure if I explained clearly enough but hopefully

[@TDSunshine]

hmmm I can't fully understand but I think the way to achieve things like this you would probably need to use a combination of padding and max / min width to help maintain the sizes and "breaking point" of the boxes. ☀️🙏🏻

[@tomek_kot]

Good work 💪

[@TDSunshine]

Thanks 🙏🏻☀️

[@alkesh482]

Amazing teacher

[@TDSunshine]

Thank you! 😃☀️

[@רויתאלימלך-ק1ג]

really helpful, thank you!

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@MohammadAlzeer-wy1bb]

Wow, you are the best Figma instructor for me! You should consider creating content about Photoshop, Premiere Pro, and other creative software. It's hard for me to learn them from anyone else now.

[@TDSunshine]

thanks! I'll add those idea's to my list for sure! ☀️🙏🏻💛

[@angelovergara]

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

[@TDSunshine]

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

[@djashawe88923]

Thanks for the great content. You're so good at explaining with examples. At 15:55, shouldn't you change the constraint position from Left Top to Right Top, or does it not matter?

[@TDSunshine]

Great point! yes I think making it Right Top would be a good idea in this case. Using constraints in conjunction with auto layout is really important I think! ☀️🙏🏻💛

[@damunna9088]

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]

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

[@kakanishalemraju9995]

amazing tutorial, just you are amazing, very clear expalnation

[@TDSunshine]

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

[@kakanishalemraju9995]

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

[@entertainmentyoutube3606]

great tutorial!!

[@TDSunshine]

Thank you! 🙏🏼☀️💛

[@entertainmentyoutube3606]

@@TDSunshine yes, keep going!!

[@rahulkakad6800]

Can you make a video showing how to use auto layout with a master table? The master table should have an action column as the last column, which contains a dropdown menu. However, the dropdown menu is getting hidden behind the next layer. How can we bring that particular row to the front? I'm looking for a video that explains this process.

[@TDSunshine]

Great question! I would say the best way around this would be to use an overlay for the drop down if you are using prototyping to show it OR if you just want to show it on the canvas than select absolute position for the dropdown and place it outside of the rows bounding box. I hope that helps! ☀️🙏🏻

[@Believer-yk7th]

I like it the way of your expression ❤😊

[@TDSunshine]

Thanks 🤪☀️

[@sarahayman3506]

Thanks for the clear explanation

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@sbd-3-c2b]

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

[@TDSunshine]

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

[@sbd-3-c2b]

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

[@gurugfx770]

Amazing best pn KZbin

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@himajaakupatni5705]

Great tutorial! Thanks

[@TDSunshine]

You're welcome! 🙏🏻☀️💛

[@NovaMode-ke]

yes, it's chilled

[@TDSunshine]

🤪

[@malebola87]

Thank you for teaching about max and min; at least for me is hard to understand... You are smart and pretty

[@TDSunshine]

Thanks! ☀️🙏🏻

[@riteshkukreti]

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]

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

[@Olaf-y5v]

Great ! Thx.

[@TDSunshine]

☀️🙏🏻

[@Tsubiki1]

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]

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]

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.

[@platinoir]

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]

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

[@FlashOrbitHQ]

Thanks a lot

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@charenzcomilang7216]

ure amazing!

[@TDSunshine]

Thanks! 🥺☀️🙏🏼

[@lalogreiner]

Wow!

[@TDSunshine]

Thanks! 🙏🏼☀️

[@AishaAbdulmumin-c1l]

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

[@TDSunshine]

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

[@alexeinordic8774]

Hey I saw your video and this is really helpful I really liked and also subscribe a genuine request can you make a video on nested autolayout pls? it would be really helpful.

[@TDSunshine]

Thanks! Will add to my list! ☀️🙏🏻💛

[@Tech9gadgets]

Please make new version video

[@TDSunshine]

kzbin.info/www/bejne/qGqZZ3WNi8iWgJY ☀️🙏🏻

[@czerskip]

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

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

[@atxmaps]

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]

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

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

Finally a depression comes to end. Thank You❤

[@TDSunshine]

thanks! 🙏🏻☀️🤗

[@oneilobi822]

wow

[@TDSunshine]

☀️🙏🏻

[@NovaMode-ke]

it's a mountain creating a simple responsive card!

[@TDSunshine]

Auto layout can be a bit complex at the start but stick with it and you will master it! ☀️🙏🏻

[@kriswayne7938]

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]

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

[@kriswayne7938]

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

[@TDSunshine]

🙏🏻🥹 @@kriswayne7938

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

[@sergio.arboleda]

Fill is Chill

[@TDSunshine]

😆

[@mondliedwin4857]

borrow me your mind

[@TDSunshine]

🧠📤 🤪☀️

[@BF-non]

This is designers learning CSS lol

[@TDSunshine]

100% 😎☀️🙏🏻