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?
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.
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!
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!
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?
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 :)
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 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?
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.
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!
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.
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..
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
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
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
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.).
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
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!
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?
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?
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!
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 :)
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.
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.
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?
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.
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.
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?
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).
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.
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
Doesn't work with a component instance, where the component is outside of the container like in this example, only works if child elements are manually selected in the container to have fill container horizontally
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'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?
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.
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.
The thing with the close-button in the corner, doesn't work. When i'm holding space it stays in the frame, but doesn't overlap like your example. Can someone help?
Just saw the answer to that I few comments below misty lulu C 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!
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.
Hi this video is from 1 year ago and since then auto layout has changed much in terms of UI representation i liked the version from 2 years ago it was easy to follow with the card component but i am stuck using the auto layout feature please could you make a updated version of the video from 2020?
Hello there! We have an updated video for the new Autolayout available here: wwwd.ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-floQKLsWAy4.html Hope that's helpful!
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
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.
