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
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
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.
Absolutely! I wanted to demonstrate that you could have all four values input in there - arguably doing an asymmetrical example would have been better!
@@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?
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!
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.
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?
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!
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..
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!
Now we need a frame that you can set to “position absolute”, so you can put into an auto layout frame in any position you need. Cause in my opinion, the 0 height frame is not a scalable and not elegant hack.
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.).
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!
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
The tutorial is amazing! I'm wondering at 5:16 how the CLOSE button can display entirely even though part of it is beyond the frame boundary? I tried but my CLOSE button can display only the part that is within the frame
Exactly. There are many assumptions in this tutorial and it is unnecessarily fast. My close button als doesn't totally show up outside the frame. The guy needs to just slow down and teach without assumptions if this is really a beginner tutorial. Otherwise, let that be clearly stated.
After some time I found out what's wrong. You need to select the frame and in the right panel uncheck "Clip content" box. Now moving + space bar works fine!
The hint at roughly 4:20 doesn't quite work, as it seems the close button centres itself as the height of the text box increases (I reckon the desired effect is to have the close button remain fixed in place regardless of the text box height). This is seen at ~ 5:01
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 :)
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.
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
Dude I love how fast these videos are. It's probably taken me longer to write this comment than it did to learn Auto Layout. To the slowpokes in the audience: it's a video. You can rewind it, pause it, play it back at reduced speed, whatever you need -- it's wonderful, you should try it. Idk what happened at 2:15 though... Also, what's the song in the intro?
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.
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?
Awesome fast overview. Now just let me set the z-index of an item individually. Right now if you want say a floating action button to be in a auto layout page, you can't because it will always be shown behind other content.
@@mancerrss If I want it in the bottom right of the frame, yes, but I want I want it to be X distance from the top of the screen (so in prototypes its visible).
@@gtivr4 Agreed. I think the other thing we need (and we've heard this requested a bit) is a setting for "Ignore Auto Layout", where you'd effectively be doing what I was doing with the zero height frame trick (but with more flexibility)
@@rogieking8773 Yeah, that would accomplish the same thing. It would be extra awesome if there was a way to drag an element around the page with a key pressed that made it ignore autolayout. I Love AL, but there are times when it slows things down and adds frustration
at 4.10 i don't see that option "space between" in my figma. does anyone else have the same problem. my figma is updated to the latest version. BTW thanks for the easy-to-understand videos. its really helpful and amazing :)
Hello! With the new auto layout updates, we've moved the spacing mode options under the Gap between items dropdown menu. For space-between, type or choose "Auto". For packed, enter a number. Learn more about it here: help.figma.com/hc/en-us/articles/360040451373#spacing-between
It does not work for me. I tried to repeat every step of that dialog box and close button several times, but holding the space key does not help at all! The close button falls out of frame or the edge cuts off.
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 :)
How did you put the cross icon on top of the frame without the icon getting hidden? I tried your suggestion of a space bar but not working for me.pls comment.
the same thing happened to me! and I figured out~choose the frame, look at the tool bar around X Y W H, uncheck the box of "clip content" and it's there!
Thanks for that zero-height frame hack! One question is how to make that responsible checkbox with the label when the label is multiline and the checkbox is vertically aligned to the top?
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.
Hi Juan! The red frame was placed inside the Dialog frame which has Auto Layout applied to it. When you select the red frame you'll see under the resizing property section that the horizontal sizing is set to "Fill container". This will allow it to automatically resize itself and fill the Dialog frame as you see in the video.
What I don't like about Auto Layout is it doesn't respect objects' size and positions relative to each other. Rather it assumes and approximates, then forces it's own values. If I select a text box and a button shape and click "Auto Layout" the first thing that happens is the button shape is given an arbitrary vertical and horizontal padding, disregarding the padding of the original design. A better UX would be to respect the original padding values. Sketch's symbol layout feature did this. The Anima Sketch plugin had a padding feature that did this as well.
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?
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?
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.
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 🔊)
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.
In every example you did you assumed it allowed you to duplicate with cmd d. mine won't work. also how do you add an image to an already made auto layout.
Very cool but the text is never perfectly (vertically) aligned, it's really annoying. I could see it in the video as well when combined with an icon inside a button :(
Right, I was using our brand font, Whyte for these examples and the line height is a bit wonky on that font. I've seen this with a few other fonts as well, but not with more mainstream fonts like Inter, Helv, etc.
Most channels would take 20 minutes to go over these feature. I love how dense/efficient these videos are.
i guess I am pretty randomly asking but do anybody know of a good place to stream newly released tv shows online?
@Manuel Vivaan I use FlixZone. Just google for it :)
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
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
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.
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
im confused still
Me too!
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 :)
Absolutely! I wanted to demonstrate that you could have all four values input in there - arguably doing an asymmetrical example would have been better!
@@rogieking8773 I love those powerful hidden features. Keep giving us these Figma in 5, Rogie. They're great!
@@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?
The condensed and concise nature of theses videos is just amazing.
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!
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.
THANK YOU FOR THIS! Auto Layout was giving me SUCH a headache, and now I think I get it!
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?
thank you so much I am beginner and figma is lil confusing for me but that type of tutorials helps me a lot
This clarified so much from the 2hr livestream! Much appreciated
Glad to hear it!
@@rogieking8773 it's really amazing. HUGE HUGE THANKS FROM Ukraine :)
These videos just fill me up with energy
And your videos does the same to me 😇
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!
Life saver!
still same with your issue. any tips for me?
i found "absolute position" in figma. and you can use it to make close icon in top of the dialog
Ohhh the "clip content" option! This is so smart
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..
Good video man! What happened at 2:16 ? That looked like a good example coming up ;)
Yeah, I was just gonna comment on that. It seemed like it was abruptly cut off.
I think he realised that the house icon was not alligning well 😅😅😅
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!
Now we need a frame that you can set to “position absolute”, so you can put into an auto layout frame in any position you need. Cause in my opinion, the 0 height frame is not a scalable and not elegant hack.
Agreed with you, Filipp! The team at Figma is always listening and I can't wait for when they push out changes in this direction.
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.).
Y'all are the best. The 0 height hack is mega useful!
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!
@@rogieking8773 Sweet, I'll definitely keep an eye out for those updates, so exciting. PS you rock in these videos!
@@timsilva_ Thanks for the encouragement, Tim! Can't wait to guest star in National Treasure: V
I needed that modal window X button trick so much!!! Thank you!
Where can I get more of such not obvious tips for Figma?
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
On 5:54 How did you get the close element to be on the foreground? Thx.
did u solve this problem? how?
The tutorial is amazing! I'm wondering at 5:16 how the CLOSE button can display entirely even though part of it is beyond the frame boundary? I tried but my CLOSE button can display only the part that is within the frame
Exactly. There are many assumptions in this tutorial and it is unnecessarily fast. My close button als doesn't totally show up outside the frame. The guy needs to just slow down and teach without assumptions if this is really a beginner tutorial. Otherwise, let that be clearly stated.
After some time I found out what's wrong. You need to select the frame and in the right panel uncheck "Clip content" box. Now moving + space bar works fine!
@@henriquebs12 oh my goodness! Thank you a lot, man! I was really challenged and didn't understand why the close button was always within the frame))
I also had difficulty in getting the same result. I did not realize about the clip content. Thanks @Henrique Barcelos.
@@henriquebs12 Thank God. Spent half an hour trying to figure this out.
Rogie, your intros are perfection! haha. Saving this playlist for later viewing. Been loving diving into Figma. :)
So much love! Miss you!
wth where has this been my whole life? This would've saved me so much time instead of doing all the pixel-pushing myself ;-;
sed life
The hint at roughly 4:20 doesn't quite work, as it seems the close button centres itself as the height of the text box increases (I reckon the desired effect is to have the close button remain fixed in place regardless of the text box height). This is seen at ~ 5:01
I think that could be compensated for by using the top alignment in the auto layout alignment box
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 :)
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.
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
Dude I love how fast these videos are. It's probably taken me longer to write this comment than it did to learn Auto Layout.
To the slowpokes in the audience: it's a video. You can rewind it, pause it, play it back at reduced speed, whatever you need -- it's wonderful, you should try it.
Idk what happened at 2:15 though...
Also, what's the song in the intro?
I had some trouble understanding that part too. Did he have to copy each list item as a component or..??? I didn’t quite get the listing parts.
What a great video! Also Rogie is a wonderful and eloquent communicator. Thank you for this tutorials guys...!!!
Love the speed of this video! Often videos like this can be filled with chit chat and take forever to get to the point.
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.
Figma is absolutely magnificent! Thanks for the great work!
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?
Awesome fast overview. Now just let me set the z-index of an item individually. Right now if you want say a floating action button to be in a auto layout page, you can't because it will always be shown behind other content.
We need this so much! The team is aware and I'll continue to communicate this to them.
What do you mean by this?
Can't you just put a frame, FAB in bottom right constraint and it's on the topmost hierarchy?
@@mancerrss If I want it in the bottom right of the frame, yes, but I want I want it to be X distance from the top of the screen (so in prototypes its visible).
@@gtivr4 Agreed. I think the other thing we need (and we've heard this requested a bit) is a setting for "Ignore Auto Layout", where you'd effectively be doing what I was doing with the zero height frame trick (but with more flexibility)
@@rogieking8773 Yeah, that would accomplish the same thing. It would be extra awesome if there was a way to drag an element around the page with a key pressed that made it ignore autolayout. I Love AL, but there are times when it slows things down and adds frustration
at 4.10 i don't see that option "space between" in my figma. does anyone else have the same problem. my figma is updated to the latest version. BTW thanks for the easy-to-understand videos. its really helpful and amazing :)
Hello! With the new auto layout updates, we've moved the spacing mode options under the Gap between items dropdown menu. For space-between, type or choose "Auto". For packed, enter a number. Learn more about it here: help.figma.com/hc/en-us/articles/360040451373#spacing-between
It does not work for me. I tried to repeat every step of that dialog box and close button several times, but holding the space key does not help at all! The close button falls out of frame or the edge cuts off.
You may need to uncheck clip content so the close button doesn't cut off
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 :)
It's cool that figma shows hacks for missing features
Super helpful thanks!
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?
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! 🙌
I just watched with an "HAAO I GOT IT" face. Thanks!:)
How did you put the cross icon on top of the frame without the icon getting hidden? I tried your suggestion of a space bar but not working for me.pls comment.
the same thing happened to me! and I figured out~choose the frame, look at the tool bar around X Y W H, uncheck the box of "clip content" and it's there!
@@chopinlulu THANK YOU SO MUCH !!!
Bravo!
Short, sweet and concise!👌
The nugget is here, 5:41 create a frame with 0 height.
Wo nice video, thank you very much
I am new to Figma and this can solve my padding and margin problems quickly!
Thanks for that zero-height frame hack! One question is how to make that responsible checkbox with the label when the label is multiline and the checkbox is vertically aligned to the top?
You can always put the checkbox in a frame/auto layout frame of its own and adjust the padding. Then just align the parent frame to vertical! :D
This is like flexbox in figma! Cool!
Exactly, thought the same thing!
Ugh THANK YOU! Just discovered this term on TikTok, and then I came here to learn about the term.
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.
Thx loves the efficiency of the tutorial ! Best!
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.
Awesome and very clear! thanks a lot!
I tried but it keeps separating my object and my text
Amazing!! One question, how did he autoresize the red frame when dropped into white frame in 5:31?
Hi Juan! The red frame was placed inside the Dialog frame which has Auto Layout applied to it. When you select the red frame you'll see under the resizing property section that the horizontal sizing is set to "Fill container". This will allow it to automatically resize itself and fill the Dialog frame as you see in the video.
@@Figma Thank you so much!! 😃
ty! is there a figma file for this video?
Sweet. So how would you auto clip the text when it leaves the parent box?
What I don't like about Auto Layout is it doesn't respect objects' size and positions relative to each other. Rather it assumes and approximates, then forces it's own values. If I select a text box and a button shape and click "Auto Layout" the first thing that happens is the button shape is given an arbitrary vertical and horizontal padding, disregarding the padding of the original design. A better UX would be to respect the original padding values. Sketch's symbol layout feature did this. The Anima Sketch plugin had a padding feature that did this as well.
Great!!! Thanks a lot for your video. It was really cool. I need to try right now all this examples. Have a nice fay!
I love learning from you Thank you! you make it fun, fast and not nerdy.
This is my new favorite comment!
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?
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?
Love your videos, love the Matrix resemblance. Keep up uploading Figma in 5
Rogie! Good to see ya man
So nice and helpful
Figma doesn't always know my box needs to be the card of stuff on top of it when I hit auto layout.
Amazing, I love straight to the point content. Thank you so much.
Amazing!!!! 😍
Thank you for this video.
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?
What happened at 2:13? Seems like the whole thing was skipped.
Nice! That solved a few of the issues I had :)
So glad to hear it!
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.
Thanks Figma, this is most epic.
That’s some cool stuff under 7 minutes 🎉
Great video, why every time we need to align vertically?. Can it be default vertically aligned, please.
Wtf happens between 2:15 and 2:17? You just gave up?
Extremely helpful video, thanks!
I did learn a ton!
okay, serious question.
where would one get those cat headshots??
This is crazyyy helpful
good tutorial. thanks!
🙌 Rogie my man you are the King 👑
Thank you!
Auto layout: most feature I love.
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 🔊)
It was a valuable tips
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.
so good!
In every example you did you assumed it allowed you to duplicate with cmd d. mine won't work. also how do you add an image to an already made auto layout.
I love u guys.. definitely..Figma community💖
Is it possible to do auto layout following a curve?
6:18 How to get that rotation straight line below text(button), any shortcut ??
thanks! very helpful! sort of picked it up somehow
Amazing 👌
super simple, very helpful!
loved how jampacked this video is with every autolayout feature.
Very cool but the text is never perfectly (vertically) aligned, it's really annoying. I could see it in the video as well when combined with an icon inside a button :(
Have you tried messing with the font line height? I usually find that that effects vertical alignment.
Right, I was using our brand font, Whyte for these examples and the line height is a bit wonky on that font. I've seen this with a few other fonts as well, but not with more mainstream fonts like Inter, Helv, etc.
Why does your figma look like this? I don't have some of these options.
me neither I'm missing the resizing section
1:07 didnt work for me. The text and button where separated
This is great! Thank you so much!