Figma in 5: Auto Layout

Ready to level up your skills? Got five minutes?
Join us for this brand new series, meant to level you up in a rapid-fire, tip stacked deep-dive on a topic. This time, we're talking Auto Layout.
Stay tuned by subscribing for next week's Figma in 5, dropping on Tuesday.
#Figma #FigmaIn5 #AutoLayout

[@booshong]

Most channels would take 20 minutes to go over these feature. I love how dense/efficient these videos are.

[@manuelvivaan3658]

i guess I am pretty randomly asking but do anybody know of a good place to stream newly released tv shows online?

[@kaydentrace9611]

@Manuel Vivaan I use FlixZone. Just google for it :)

[@rhyshughes9942]

It's like a movie that takes 25 minutes to do anything...it probably wont get good, compared to a movie that starts with a good sniper scene or something haha

[@neanda]

I agree, I was going through some other tutorials on youtube and they were annoyingly long winded and I just couldn't bear them, then I thought I'd give these ones a try and I'm getting up to speed really quickly (although I'm coming from being a Sketch for 10 odd years). All important things covered, and doesn't hold you hand for drawing every little thing

[@gagarine42]

Figma sell the product, they make money by making Figma simple and fast. Other channel make money by you watching... the longer the better. So yes -> official documentation is habitually a better starting point.

[@TheMrBrendo]

The condensed and concise nature of theses videos is just amazing.

[@writtenbyhumans]

Please make more Figma in 5 videos, you are wonderful, thorough, concise, and easy to follow. Your Figma videos don't make me want to fall asleep while I learn, and make designing more fun. Thank you.

[@proxima-nova]

Me this whole video: 🤯 So much better than Sketch + workaround plugins. Excellent feature demo and quick tutorial. Thank you for making it so clear and concise!

[@tylartalkington146]

THANK YOU FOR THIS! Auto Layout was giving me SUCH a headache, and now I think I get it!

[@AdobeWanKenobi]

Fantastic video and format! I've been actively keeping up with updates and I learned at least 5 things! Keep up the energy, pace, and production value. These are genuinely fun to watch!

[@gabbyeebzie4103]

i am mindblown at how complex and well-thought out figma is. I only know the basic features that I need to get my work done, but this is amazing

[@NikhilKumar279]

im confused still

[@frankvasquez4827]

Going back to this video for the 20th time to know how the heck to make a button with min-width! This is a jewel! 🙌

[@nikolaaskaas]

Love the speed of this video! Often videos like this can be filled with chit chat and take forever to get to the point.

[@trippellol]

At 1:41 You don't need to type ALL values! Like with CSS you can say "8,16" - that will give you 8 on top/bottom and 16 left/right :)

[@rogieking8773]

Absolutely! I wanted to demonstrate that you could have all four values input in there - arguably doing an asymmetrical example would have been better!

[@trippellol]

@@rogieking8773 I love those powerful hidden features. Keep giving us these Figma in 5, Rogie. They're great!

[@amitkini6000]

@@rogieking8773 Once I decrease the height of the temporary frame to 0.001, the part of the close icon inside the frame is not visible. Only ¾th part that is outside is visible. How to solve this?

[@mrajax_0101]

thank you so much I am beginner and figma is lil confusing for me but that type of tutorials helps me a lot

[@excellentduru7494]

I can't seem to reposition using space. I have re-watched it multiple times trying to see if I missed something but to no avail. When I hold down space, the button moves outside of the frame. What do I do?

[@NoobieSnake]

I love this video so much. One of the best tutorials on anything ever. It really does feel like Keanu Reeves in the Matrix. Everything sped up and input it into our brains yet so full of content.

[@Alberfinder]

What a great video! Also Rogie is a wonderful and eloquent communicator. Thank you for this tutorials guys...!!!

[@kt1122]

Ugh THANK YOU! Just discovered this term on TikTok, and then I came here to learn about the term.

[@tikkiebest]

Figma is absolutely magnificent! Thanks for the great work!

[@iremgocmenoglu8404]

I just watched with an "HAAO I GOT IT" face. Thanks!:)

[@doorveshsantbakshsing9607]

This clarified so much from the 2hr livestream! Much appreciated

[@rogieking8773]

Glad to hear it!

[@moykin.e]

@@rogieking8773 it's really amazing. HUGE HUGE THANKS FROM Ukraine :)

[@ashmlittle]

Rogie even though this is your third episode, its the first time our paths crossed on my initial dive into Figma. The explanation of this being like The Matrix was accurate, but since I'm not Neo I'm now a fried little potato who feels a more confident about Figma. Good job 10/10

[@cindrmon]

Follow up question, in 5:19, "holding space" part, how do you do that? I can't do that for some reason because the "Space" keybinding is panning the entire page, and its not working for me..

[@Hoodzpah]

Rogie, your intros are perfection! haha. Saving this playlist for later viewing. Been loving diving into Figma. :)

[@rogieking8773]

So much love! Miss you!

[@michaelschultze3595]

This is what I missed so much in all the other tuts. Focused on the essentials and explained precisely. Awesome. Thanks a lot One question - Are there any videos on more complex auto layouts? Then also in this one I miss something. Time 3:20 - The checkboxes do stay centered in the example. I would like to see more variations. Is there also a quick solution before nesting an auto layout countless times? For example, the checkbox should stay at the top of the first line (important for multi-line content.).

[@dimitrisqq]

Love your videos, love the Matrix resemblance. Keep up uploading Figma in 5

[@HieuPham116]

I am new to Figma and this can solve my padding and margin problems quickly!

[@dpsd6859]

Perfect video. Nailed it 100% brilliantly. I enjoyed every second of it. Thank you.

[@brunorocha9898]

Amazing, I love straight to the point content. Thank you so much.

[@ukraineukraine9738]

In 5:17, "holding space" part, how the close button stays visible? The Frame hides visibility of elements even with holding space. How do you do that?

[@MrBiggydicks]

Great video but I do have a question: I have a typical todo list. So little square a bit smaller than the ones yours has with text to the right. Normal right? Well heres the curve-ball: my checkmark overflows from the box and the tail goes kind of high. This throws off the alignment of the box and the text because I need to group the check and the box together so the check should become part of the auto-layout. Doing so makes the height of the check and box higher and therefore changes where the "center" is. So does anyone know how to add the check into the auto layout but not have it effect the layout at all. Like if it were CSS it would be positioned absolutely

[@vivianli2150]

People were struggling at 5:20 by making the close button be brought to the foreground. The solution suggested by the comments from the viewers is - 'In the right panel uncheck "Clip content" box' to make the close button appears.' It works for me. However, when I integrate the 'close button' frame to the 'My Dialog' frame, and reduce the height of the close button frame to 0.001, the close button is brought to the background! I triple check that all frames have the 'clip content' unchecked. May someone please help by commenting below? Many thanks in advance!

[@aubrylungu827]

Life saver!

[@rianferdianto9020]

still same with your issue. any tips for me?

[@rianferdianto9020]

i found "absolute position" in figma. and you can use it to make close icon in top of the dialog

[@yuxintao9836]

Ohhh the "clip content" option! This is so smart

[@anastasiiaboichun1094]

Great!!! Thanks a lot for your video. It was really cool. I need to try right now all this examples. Have a nice fay!

[@AkshitAkash]

Wow that repositioning the close button to the top right corner trick was a life saver , I was really worried how should I achieve that using autolayout :)

[@user-rx4og6dv9h]

I'm having trouble getting auto layout to work when using custom shapes. For example, I started with a rectangle, then added some anchors to create a diamond-like shape and grouping it with typography. It simply didn't work. Any recommendations?

[@patrickcazer]

wait at 5:27 dragging and holding space or holding shift? when i press space it doesn't do anything.

[@markodjuric9534]

Bravo! Short, sweet and concise!👌

[@ritambharasingh9788]

How do we change the icons in dropdown once it is set as auto layout and made into a component?

[@annakropina8144]

Thank you for the video. I wonder if it's possible to do scrolling fro auto layout? I couldn't find any information on that.

[@ruorobee]

The modal window x button isn't working for me. When I add the frame with the corner x to the auto-layout modal it is positioned behind it such that only three quarters of the x is seen. When I bring to front it changes the positions of the frame within the auto-layout i.e. bringing it between the title and the body text. Did I miss something?

[@movntn]

Are there any tricks for building out a max-width like feature? I'm trying to max-width a text layer in an auto layout frame that also includes an icon on the right.

[@manueloliveira7933]

Hey there, so, im putting all the elements under the same layer, I position them the way I want, press SHIFT A anddddd... the elements assume the position of the layers. Im making a button and instead of the text get inside the rectangule shape, they simply fight for the same position, how can I fix it? was it a setting that I changed by mistake? HELP NEEDED Good week to all

[@nouhahmed7743]

Never wached figma video more concise and informative than this. Please more more videos about other figma topica. Especially vector graphics. Any way much thankx for ur miracles time.

[@aizhanzakai6887]

I had a problem with doing auto-layout with a rectangle as a background (the text and icon would jump off the frame), after several attempts to fix it, I realized, both text and icon have to be contained IN the rectangle. Hope that helps someone like me who is just starting out :)

[@justinvinson1766]

2 objects. 1 is text and the other is a box. I want to make a button. I hit auto layout and they are side by side but obviously I want the box behind the text. This happens everytime I hit autolayout and I have no clue how to fix it.

[@AnshMehraa]

These videos just fill me up with energy

[@AkshitAkash]

And your videos does the same to me 😇

[@gurarshdeepsingh5881]

6:18 How to get that rotation straight line below text(button), any shortcut ??

[@juliosalgado956]

Hello Figma crew, could you please help me find how do I wrap words with a background coloring that follow their shape? I forgot the name of this process but it's fairly common.

[@winniekwan4328]

such a powerful feature and it blows my mind. Thank you for this awesome video! - Figma newbie

[@buraknux2139]

Great video, why every time we need to align vertically?. Can it be default vertically aligned, please.

[@alextrejo307]

Awesome and very clear! thanks a lot!

[@mrfriki]

At 4:15 you are swapping the position of elements with Cmd+arrows. I don't seem to be able to replicate that on Windows thoug. I can swap them by selecting an object with the mouse and moving it around but the shortcut (in Windows) Ctrl+arrows will change the objects dimensions, what am I doing wrong?

[@brandonburlington3513]

Sweet. So how would you auto clip the text when it leaves the parent box?

[@PimpmyType]

A-MA-ZING! Love this!

[@ylyala6920]

Thx loves the efficiency of the tutorial ! Best!

[@dujestojan]

Rogie, no one has ever managed to explain more things in less time! Bravo!!! @Figma, please give Rogie a raise BTW you guys are not ready to see the Rogie King website (sound on 🔊)

[@avaricsymphorian]

Great video! Very helpful and concise. My only critique: the lack of transitions between demos makes things feel too abrupt for my taste; I feel like I'm getting smacked in the face with a new demo, lol. Even a simple half second fade-out/fade-in would help, i think.

[@jeyanthan360]

I love u guys.. definitely..Figma community💖

[@Abandon-art]

The "'fill container" option doesn't work anymore. Whyy is this so complicated to make the text fill the box?

[@PaulinaJuba]

Is it possible to do auto layout following a curve?

[@samanthahope7547]

Thank you so much, this was really helpful!

[@blakephillips4007]

Really cool. Thank you for these great tips!

[@eswag153]

How do you deal with the icon being misaligned with the text?

[@davidbruno-oshiokpekhai3463]

Amazing!!!! 😍 Thank you for this video.

[@timsilva_]

Y'all are the best. The 0 height hack is mega useful!

[@rogieking8773]

It's so useful for so many things! I know the team is actively working on solutions for common hacks like this, so I imagine that one day, we won't need it!

[@timsilva_]

@@rogieking8773 Sweet, I'll definitely keep an eye out for those updates, so exciting. PS you rock in these videos!

[@rogieking8773]

@@timsilva_ Thanks for the encouragement, Tim! Can't wait to guest star in National Treasure: V

[@cindrmon]

thanks! very helpful! sort of picked it up somehow

[@managebetterinc]

Extremely helpful video, thanks!

[@kamyarrastegarnia4154]

5:32 In layer pannel you can see Frame 1 has the lowest position compare to Footer, Content, Header. Why in Canvas you can see Frame 1 is upper than Dialog Box?

[@kindasport]

Nice that Figma gets it that the Background is the base layer @1:06 but what if i want to change this in the variant? Were did the Background go?

[@deeptisharma90]

loved how jampacked this video is with every autolayout feature.

[@rohithrajukanchanapalli2722]

That’s some cool stuff under 7 minutes 🎉

[@johnnybecrafting9286]

ty! is there a figma file for this video?

[@tonypino2818]

This is a ridiculously high roi video. Well done.

[@FahimMD]

I've been using Figma for 3 months now. Came from XD. When using auto layout, the problem I'm facing with icons and text is it doesn't really align perfectly that well. As an OCD and designer, it eats my mind. Am I the only 1? Example 01:23.

[@yvesnathan6966]

I tried but it keeps separating my object and my text

[@juliamarie6505]

Omg. That was brilliant.

[@SwapnaranjitaNayak]

What happened at 6.45? What is the shortcut key

[@MrFarqi180]

This is great! Thank you so much!

[@brianbremges111]

Why is my close icon frame falling behind the other frames in the parent frame when I have it at the top of the auto layout with the height hack? 6:00. Basically the corner of the container is overlaying it...

[@ttyrtube]

Same here!

[@ryanpatrickrebo]

Rogie! Good to see ya man

[@MarinaZahovora]

Thanks a lot. You're great!

[@Design999]

Hi, How did the close frame put to the top? I mean layout padding should have pushed it down, right? I am learning on my own and trying it on a review card but everytime I try to place it, layout pushed inside to have the padding in the upper section...

[@rianferdianto9020]

you dont need to make it as auto layout. You just need to : 1. add new frame 2. put the close icon to the new frame(number1) 3. klick the new frame. in the right corner find "clip content" unchecked. 4. you can easily move the close icon pass through the frame

[@bunniewood]

1:07 didnt work for me. The text and button where separated

[@sparkplug964]

Thanks Figma, this is most epic.

[@matthewhyslop5213]

Hi, please help, for a mobile app, why would I want to set fixed height or width for something? Everything will adjust size I feel

[@matthewhyslop5213]

How do I scale the size of components uniformly as you switch between different sized phone screen sizes?

[@jamesnorton4953]

Super helpful thanks!

[@axoltl82]

I love learning from you Thank you! you make it fun, fast and not nerdy.

[@rogieking8773]

This is my new favorite comment!

[@sidx45]

How to duplicate a component without losing its component tag and autolayout parameters? Is that a variant, copy paste dont work, copy paste properties dont either. I must be missing something whic is making it so conplicated to do such a simple thing

[@davidlymburn9746]

When I add the close button and set height to 0.001 (min 5:49) the close button goes behind all the other frames. I can't seem to bring it to the front. Any ideas?

[@uiuxcraft]

I am having the same issue.

[@LaszloUzonyi]

super simple, very helpful!

[@vanwagon]

The reposition close button section killed me 😲😲

[@joyce615]

is there a way to get the exercise files?

[@person81045]

What happened at 2:13? Seems like the whole thing was skipped.

[@nguyen19nguyentrung16]

I love this, tks so much!

[@nldnj]

Super helpful! Thanks a lot

[@rozzAugust]

Wo nice video, thank you very much

[@RiadDZz]

pretty much css flexbox but in figma 😂 awesome content

[@lianeroux1261]

Me it dosent work the container dosent want to take the componant :(

[@kseniavoitovich4901]

Thank you so much❤ useful and fast!

[@wsfunk]

Thank you, Rogie!

[@elenamalakhina160]

Hello, guys from Figma! I can't freely move any component inside the Auto Layout frame after changes. In your example, we may see how freaky the alignment of a heart icon+label looks. Objects are not balanced, and it is impossible to move the icon, for example, at the baseline of the text or anywhere. You left just 5 options: left, right, top, bottom, and center. It disappoints.

[@MrScott2435]

THANK YOU SO MUCH FOR THIS, IT'S GOING TO SAVE ME SO MUCH TIME ;-;

[@Elusar316]

I needed that modal window X button trick so much!!! Thank you! Where can I get more of such not obvious tips for Figma?

[@rogieking8773]

This series comes out with a bunch of little hidden gems like those tips! We've got two additional videos on vectors as well as I'm releasing them weekly :D