Haha, I actually can't take the information in very well because it's borderline monotone, I keep rewinding... we need some expression to keep it engaging! 😳😊
but what "So many new possibilities to explore"?? Figma Auto-Layout plugin has much more possibilities. It will be better if theese options include in native auto layout
For me this was the last nail in the Sketch coffin. I used anima’s auto layout plugin for sketch and this alone held me back from switching to Figma. Today’s update made my day and I actually think this is better than the Sketch plugin. Great work Figma.
good point but i have always wondered if anima is really better than sketch's own auto layout. I think anima came to adobe xd too and their figma integration is in beta,
I'm new in UI-UX design but I have to say, even for a newbie like me it's a pretty cool tool, intuitive and easy to understand, there are some features I need to learn of course to make better animations etc, but by watching your videos I can see how to easily do them. Thanks, it's pretty motivating to see your prototypes come to life. :D
We're excited to release Auto Layout! There are some additional tips for using Auto Layout in the article on our Help Center, like using visibility and transparency for two distinct behaviors. help.figma.com/article/453-auto-layout You can also play with Auto Layout in the Playground File: www.figma.com/c/file/784448220678228461 Let us know how you're using Auto Layout to speed up your design process, and what you'd like to see us do next!
I'm here after 5 years in Sketch. Today I migrated Sketch project to Figma for the first time and this video cause jaw drop. I could save tremendous amount of time in the past. If only I knew earlier...
Glad to hear you're enjoying Figma, Jonathan! Be sure to subscribe so you'll be notified of our other videos, and feel free to let us know what you might want us to cover in a future tutorial.
We updated Auto Layout on November 19th, 2020. The latest version includes new features, but also some changes (specifically to alignment of child objects). You can read the updated documentation on our Help Center help.figma.com/article/453-auto-layout or view the Auto Layout Playground file: www.figma.com/community/file/784448220678228461 We'll be producing new Auto Layout tutorials in the future, so subscribe to be notified when we release them!
Innovators louds silently. This is the figma's team specialty. Love, respect and thanks Team Figma for another amazing feature. I am assuming design to code conversions is coming after this feature.
I would love it if there was code to design as well. It sounds silly, since this is the pre code stage, but I'd love to block out elements the figma way then adjust things in code. As good as you can get with the menus, css is just a faster way to design and refine when you're good at it too. But there is a lot more to css than the figma tools offer, so considering that this is a niche pleasure feature, I doubt we'll be seeing it soon or ever for that matter. :(
Lets appreciate the work they did to make this feature as good as possible. Just something as small and obvious as selecting an element and moving it within the auto layout element via arrow keys is actually a good bit of work, much more than the result leads you to believe. Yet these quality of life features are plentiful in auto layout and in figma in general. Auto layout would work without these additional touches and we would praise them the same with or without them, yet here they are. Thanks guys for all the extra work.
Sketch was never all that. Always felt like it was held together with the code equivalent of sellotape. Figma works everywhere, co-operatively and has more and better features. The people behind Sketch thought they'd made it and didn't have to bother improving.
Just thinkin' back to my days as a e-commerce web designer that used Photoshop 5.5. The time and pain of updating rows and rows of thumbnails, titles, descriptions, and prices was intense! Now, all of that isht could be designed in seconds! Figma FTW!
That was fantastic. Thank you! Some settings have changed in Figma but if you keep experimenting you can figure it out. Persevere and press undo a lot.
Wow this is really cool and amazing! No wonder I keep hearing the word "figma" everywhere I go. This is an awesome design app. I gotta learn this. Yes! Thanks for these awesome tutorials.
This lady starts very upbeat, then after 5 minutes she begins curving her excitement. I am sure this took a while to produce. But the content is great!
This video is from 2 years ago, i cannot follow up since the auto layout features has changed so much could you update this video i am stuck using autolayout.
Great tutorial! What happens when the description for a particular movie is too long. I tried that at the very end and the movie poster changes in size. I made the height fixed but then the time buttons move up and down.
14:18 You can choose a fixed width for the text. However, you can't pick a fixed width for the auto layout frame itself. I hope I didn't miss anything, but I am in need of a feature rn and it doesn't seem to exist: The auto layout atm works only in one direction. You could add an option though, that when you choose to fix the width of an horizontal auto layout frame, that the content exceding that width will appear in a new line. So you have the buttons to show time like in the video. Let's say you activate this "wrap overlap" (or whatever) option. If you paste a 4th button then, it will go in the next line. Right now you have this feature, but only for text as shown in the video.
Great! I hope this is just the first step. Waiting when it will work with Constraints (to be more powerful). Because now it works only with simple stuff. But anyway, great feature!
I LOVE LOVE LOVE this feature BUT… It doesn't seem to allow you to use constraints once you turn a frame into an auto layout frame. This makes it impossible to have two horizontal elements grow vertically with one another. Right now, the only options for aligning elements in these auto-layout frames is top/left center bottom/right. Are there plans to add a justify alignment?
Hey Michael, thanks for the feedback! We're definitely thinking about how the next version of Auto Layout can work, and we're aware of the use cases where using Constraints is really important.
Can anyone please explain why at 06:35 the narrator grouped the movie cards with Auto Layout and not with regular grouping (Cmd+G)? The regular one would still work, no? If we group the cards with Cmd+G, we still can set the distance between the cards, and we still can put the whole thing into a smaller Frame for scrolling. I didn't understand why Auto Layout was needed at that stage.
Hey Alexandra, In this specific instance, things would be very similar. However, Frames have many benefits over groups, and some people (myself included) prefer to use them over groups whenever possible for those reasons. Some benefits include: Adding a Fill or Stroke, using Effects, rounding corners, adding Auto Layout, setting fixed dimensions, or creating a Component (which is also a Frame). One benefit here is that if you wanted to add a fifth card, you can just use Cmd + D to duplicate and add it to the Auto Layout Frame at the end. With a group, it would just duplicate on top.
Why is it that sometimes when I group 3 groups together, there isn't a + Auto layout button on the right panel?? The only way I can do this is by pressing Shift A....it's slightly confusing when that option disappears, but appears again for 2 groupings
This is a super cool feature, but I can't handle one thing. Am I understand correctly what here is no way to make cinema cards change their sizes if I change artboard size (for iPhone 11 Max, for example)? Left-Right constraints doesn't work for Auto Layout :(
How do i make a list with auto-resizable scrollbar? How do i make a labeled checkbox, with autoheight and custom width? Since release in December i didn't figured out how to imitate these pretty common use cases using your half-assed auto-layouts.
It is very cool, but Auto Layout is not work well with Component, so we can't use them for now, because we always make a component card, dublicate it and then change component, and all cards changes. So I hope you will add all the component functions to the Auto Layout in the future.
![[Older version] Figma Tutorial: Auto Layout](/img/logo.svg){kind=logo}
