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.
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!
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?
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.
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
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.
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!
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 🔊)
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?
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!
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 :)
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.
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.
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!
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 :)
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..
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 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
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
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: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?
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.
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.
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.).
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?
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!
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.
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?
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?
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.
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?
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!
Alright taht's a good idea to compress the whole timing. Two things are missing: the disclamer that this video is for English natives only and some explanation of what are these auto-layouts for (from practical point of view).
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?
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!
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!
The condensed and concise nature of theses videos is just amazing.
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?
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!
This clarified so much from the 2hr livestream! Much appreciated
Glad to hear it!
@@rogieking8773 it's really amazing. HUGE HUGE THANKS FROM Ukraine :)
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! 🙌
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
thank you so much I am beginner and figma is lil confusing for me but that type of tutorials helps me a lot
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.
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
These videos just fill me up with energy
And your videos does the same to me 😇
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 🔊)
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?
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
Ugh THANK YOU! Just discovered this term on TikTok, and then I came here to learn about the term.
I am new to Figma and this can solve my padding and margin problems quickly!
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
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 :)
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.
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.
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!
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
What a great video! Also Rogie is a wonderful and eloquent communicator. Thank you for this tutorials guys...!!!
Rogie, your intros are perfection! haha. Saving this playlist for later viewing. Been loving diving into Figma. :)
So much love! Miss you!
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 :)
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..
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.
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
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
Thx loves the efficiency of the tutorial ! Best!
I just watched with an "HAAO I GOT IT" face. Thanks!:)
Bravo!
Short, sweet and concise!👌
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
Wo nice video, thank you very much
Super helpful thanks!
That’s some cool stuff under 7 minutes 🎉
This is like flexbox in figma! Cool!
Exactly, thought the same thing!
Amazing!!!! 😍
Thank you for this video.
I love u guys.. definitely..Figma community💖
Rogie! Good to see ya man
Figma is absolutely magnificent! Thanks for the great work!
This is crazyyy helpful
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?
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.
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.
Auto layout: most feature I love.
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.
so good!
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.).
So nice and helpful
Great!!! Thanks a lot for your video. It was really cool. I need to try right now all this examples. Have a nice fay!
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?
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.
I did learn a ton!
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
loved how jampacked this video is with every autolayout feature.
Amazing 👌
Awesome and very clear! thanks a lot!
Omg. That was brilliant.
Love your videos, love the Matrix resemblance. Keep up uploading Figma in 5
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?
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?
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 😅😅😅
Nice! That solved a few of the issues I had :)
So glad to hear it!
just a little too fast on the tips but thank god its recorded!
thanks for the awesome video!
🙌 Rogie my man you are the King 👑
Thank you!
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.
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.
Thanks Figma, this is most epic.
It was a valuable tips
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?
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
I love learning from you Thank you! you make it fun, fast and not nerdy.
This is my new favorite comment!
On 5:54 How did you get the close element to be on the foreground? Thx.
did u solve this problem? how?
Extremely helpful video, thanks!
This is a ridiculously high roi video. Well done.
Great video, why every time we need to align vertically?. Can it be default vertically aligned, please.
Thank you a million, bro!😍
What happened at 2:13? Seems like the whole thing was skipped.
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 !!!
Alright taht's a good idea to compress the whole timing. Two things are missing: the disclamer that this video is for English natives only and some explanation of what are these auto-layouts for (from practical point of view).
It's cool that figma shows hacks for missing features
The reposition close button section killed me 😲😲
good tutorial. thanks!
thanks! very helpful! sort of picked it up somehow
Sweet. So how would you auto clip the text when it leaves the parent box?
Thanks a lot. You're great!
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.
THANK YOU SO MUCH FOR THIS, IT'S GOING TO SAVE ME SO MUCH TIME ;-;
Thank you so much❤ useful and fast!
Super helpful! Thanks a lot
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?
The nugget is here, 5:41 create a frame with 0 height.
i don’t see the option to change packed to space between
This is great! Thank you so much!