[Older version] Figma Tutorial: Auto Layout

[@ichrisbarrett]

I don't know how the woman doing the voiceover remained so calm. This is amazing!!

[@FerdiCildiz]

same for me!

[@Nashadelicable]

Haha, it went by like a blink and I was like, wasn't it 8mins? It was

[@GrahamPrior]

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! 😳😊

[@buildux]

This is the best day! So many new possibilities to explore, and lots of new tutorials coming!

[@malamadreable]

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

[@HajimeChan]

The most intuitive software I’ve ever learnt.

[@Figma]

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!

[@Figma]

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!

[@IKolpikov]

It's a killer feature. Much love for figma team! Your development vector is so good. Every new update makes users happy!

[@JamieShieldsNZ]

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.

[@mrslkhv]

Sketch has native auto layout feature for a few months now. You have to check it out.

[@Chorociej]

@@mrslkhv yep, but it's broken af

[@ahmedkhaled1068]

@@mrslkhv is it? weird that no one mentioned it.

[@kimeiga]

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,

[@vlahman_]

the satisfaction that I have when I scroll the film posters on vertical position is immeasurable. thank you.

[@oldtret]

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

[@michamlodozeniec6346]

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...

[@asif_mojtoba]

THANK YOU SO MUCH FOR SHARING THE FILE!!! YES, I'M THAT HAPPY TO USE THE CAPSLOCK!

[@rohangaikwad255]

My biggest worry about figma is now put to rest. Now I can confidently claim that Figma is the best design tool out there. Thanks, Figma.

[@igobyart]

Wow. This was 8 minutes of learning just how powerful Figma is. This is a great, really helpful tutorial if you're trying to get up and running.

[@HaniHassan1]

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.

[@randomuser66438]

It's not

[@stevensavoie856]

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. :(

[@deenest9992]

I'm blown away by how easy this product is to use, and how good these tutorials are!

[@Figma]

Thanks for the support, Dee! Let us know if there's a tutorial you'd like to see in the future.

[@Foxygrandpa2131]

Learning all these tools is making me a better designer and developer! This deep level of organization makes the final code much more clean.

[@Figma]

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.

[@Foxygrandpa2131]

Figma Already subbed! Would love you guys to do a design system series.

[@bouncehouseofficial]

RIP SKETCH.

[@gctheroes4956]

It's true. I didn't want to leave my Sketch wife, but this mistress named Figma is my soulmate. I never open sketch any more.

[@peterbotond7759]

Rip long time ago m8.

[@IBiancoNeve]

lol

[@paulXmbingu]

RIP XD

[@kirkkenny7762]

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.

[@phil-l]

This just enabled us to save literally HOURS per week, this is GREAT

[@Ozeki_Negima]

Every new Figma tutorial I watch makes me say "wow." This program is incredible.

[@stevensavoie856]

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.

[@pacocu9839]

Again, Figma is the best design software ever created.

[@talhashaikh1435]

Best thing is figma give student free acess to this amazing features ...hats off

[@sergeyd2199]

Finally! Great stuff! One thing: I'd like to change l/r a and t/b paddings independently. Having margins would also be useful.

[@Metal_Face_Doom]

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!

[@arsaamofficial]

If figma adds a feature like "Repeat grid" similar to adobe Xd, then this product will be way beyond its competition. Lot of love for the figma team

[@eddolateralusio]

No need to, just use cmd+D

[@arsaamofficial]

@@eddolateralusio Thank you !

[@characarosandi1589]

This is honestly amazing. The fact that you guys thought of this feature and were able to make it intuitive is praise-worthy. Great stuff!

[@mariolunameza8145]

With this feature Figma be like: Why be a king when you can be a God? 🔥🔥🔥🔥🔥

[@ed1nh0]

I'm a Windows user and I don't care how good is/was Sketch. Never used it. But every tuto I watch from Figma's team just blow my mind!

[@mindofmorons4268]

YOU BRING DESIGN TO THE WHOLE NEW LEVEL. I CAN'T THANK FIGMA TEAM ENOUGH!

[@demon4511]

This is just like Flexbox.. but for designing. Amazing, keep up the great work!

[@selboury]

This is really nice, good job! Would be great to have built in button component states: hover, click, active, selected, disabled etc... 🙂👍

[@chudzij]

done lol

[@Metal_Face_Doom]

As a staunch Sketch user... I've been feeling terrible that I'm going to cheat on my beloved tool!!! Lovin' some Figma right about now! ❤️

[@AlexandraPryakhina]

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.

[@Figma]

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.

[@LeoStephanou]

Totally new to Figma, and this video has made me fool in love with it without even touching it yet. Great tutorial. Thanks

[@Zealotux]

Thank you so much for existing, Figma.

[@abdurrahmantrimanto1894]

OMG!! It's the most amazing deadly killer feature on Figma. Figma army going super crazy with this!

[@kwokyinmak3729]

yo whatsup figma stop being so dope

[@Fabian-_-]

That's great! Switched to Figma a year ago and I love it! Would love an official Linux desktop client though, but the unofficial ones are great too :)

[@TectonicPlate]

Same, I'm still waiting for that

[@TsogtErdenebal]

So much EXCITED!!! Thank you, Figma! Greetings from Mongolia.

[@desssigner]

Thanks goes to Figma Team. Definitely great feature :)

[@netzdiplomat579]

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.

[@sammyasher]

Did you ever figure this out? Encountering the same issue. They're referencing a button in the video that doesn't exist in the current version.

[@simonlarragy9376]

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.

[@philippeaka2772]

😍 Amazing guys!! You don't even have to install a plugin, really nice.

[@__hushm3]

Auto layout be like Gods hand. 😭 I never knew the feature was this awesome, I'd have saved a ton of hours!

[@NikolaVelev]

Wow. Another amazing new feature!! Bravo Figma!

[@valyavalio]

You are the best company on the planet!

[@Metasphynx]

this is a best Christmas gift

[@MilfordDesouza]

Wish I learned Figma sooner. It would've sped up my workflow by a lot

[@larry_chen]

Feels much more intuitive than Sketch's Smart Layout

[@companyreviews294]

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.

[@uxniels]

Thanks for listening to your users 👍🏼 I will switch from SKETCH for good 😉

[@전은지-d8x]

피그마는 진짜 최강의 프로토타이핑 툴이다.. 가슴이 웅장해진다

[@lepermessia4]

Фигма развивается семимильными шагами, ждем добротной анимации.

[@oneSaint]

Thanks for this. That Google syncs bonus nugget at the end there. 😙👌

[@alterbria]

Seriously, Figma Team, y'all might as well páy for my hearts exams from now on...because it simply can't take it ❤️

[@opankihaha]

today is good day! Thank you dear Figma

[@kevinfulford5886]

This definitely made my day, thanks for the hard work!!

[@wise_nut]

I'm really grateful that I have Figma... ❤️

[@hfromero]

Finally! This is the only feature i was missing from Sketch :)

[@BlanktonMees]

Genius! I just yesterday thought that it would be super helpful feature. Thank you guys!

[@mbrunygroth]

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?

[@Figma]

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.

[@mbrunygroth]

@@Figma Well you all are crushing it! Thanks so much :D

[@RukyasuX]

Thank you very much, Figma. This is a game changer.

[@MichaelRichins]

This is a game-changer!!!!

[@_sonicfive]

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!

[@kieran2347]

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.

[@andreycheboksarinov]

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!

[@rotkesoib]

Is an amazing new feature, thanks Figma team !!!

[@jusren]

GOLDEN TUTORIAL!!!! OMG! Not sure if Sketch does any of this stuff because I haven't used it in awhile..hot damn!

[@hola-munecas]

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.

[@jeffubeku6143]

Alignment can’t be controlled within auto layout. I just tried what she stated in 4:00 but it didn’t work

[@Figma]

Hi Jeff, we updated Auto Layout on November 19th, 2020. We're working of creating some new updated tutorials soon! 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

[@ramil2733]

Figma is always ahead of time, can they catch up? 😂

[@jangobout]

We don't have flying cars, but we do have Figma

[@pameladuursema6951]

Thanks for the tutorial! This is going to save me so much time.

[@dvargasb]

I FEEL BLESSED! 🥰

[@gabriella2186]

i’m so excited to try this out myself

[@yakovlevmaxim]

Yeah! Guys, you are simply the best 🔥

[@Shogunsteel27]

It is really helpful and i just loved the way you explained.

[@msukmanowsky]

Mind. Blown. 🤯

[@mantastrumpickas5508]

I was waiting for this feature for so long ♥ BUT........ My buttons are made of "atom" components, so this feature doesn't work on my buttons ... sadly.......... Maybe there is other way to make it work? No? :(

[@88gono]

Wow this is amazing. Thanks for making such a great app :)

[@natali-g]

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.

[@hovhadovah]

Excellent tutorial! The only thing I couldn't figure out is where the Resizing option is. I don't see it on my end.

[@riquerique194]

So this is like Repeat Grid, but it's actually better? I had a bad experience with Adobe Creative Cloud and Adobe XD (Their installers are so buggy), so after a day trying to fix the issues, I just gave up, so Figma appeared and I have to say that is actually a very great tool, I just think that the UI could be a little more friendly like XD, great work with the tool.

[@brianmcdonaugh6370]

Reaffirming my commitment to the product

[@jpthedio]

This is so good. Like flexbox in Figma. 😍

[@lynchpaulme]

Answers to so many questions!

[@DavidShantzwildoutwest]

Webflow's div blocks seem more standard in terms and functionality. AutoLayout is similar with some functionality stripped. It actually seems easier to use, but as I mentioned, is missing a few features. I'm not sure how you might define breakpoints where a complete new design becomes the starting point. A key example of the differences would be in developing a web application which will span desktop as well as mobile users, a requirement for largely unique content for desktop vs. mobile is common. How is this defined? So I want the movie posters to be 2x in desktop and obviously not require horizontal scrolling...

[@MobiusCoin]

Cool, you now have flex row and flex column, now can we have space-between, space-evenly, and space-around? Also can we set asymmetric padding?

[@billaddison82]

Feels like almost everything should be auto-layout now. Like event text blocks can all be within an auto-layout frame to act as paragraph spacers etc.

[@LucasSilberberg]

i can't see the rezise text option 😪 minute 4:32

[@Figma]

Hey Lucas, the placement of text resizing values changed recently. It replaced paragraph spacing in the main properties panel, so you no longer need to open the additional type settings.

[@LucasSilberberg]

@@Figma tks. i found it 😃

[@gilbertumeh]

Please, can you help us with the Google sheet Sync plugin tutorials?

[@jekins]

OMG! You are best of the best. Thank you!!!

[@KilllerWhale]

I remember the days in Sketch where you had to use empty rectangles to create padding and spend the next 2 hours troubleshooting why it's not not working

[@Hawkhunter07]

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

[@deniscumak9285]

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.

[@joshuaorosuru260]

Does any one know where the full tutorial of the theater app design is?

[@mohammadumer1116]

Love it. Thanks Figma, love you xx

[@lukenadolny]

Hrm - how do we align items within a parent auto-align container now with the 3.0 update? I'm no longer seeing the alignment options on individual items..

[@Figma]

Hey Luke, there was a change with version 3 that removed independent alignment of child items (very few users were using this feature). Instead, you can change the alignment for all of your items from the auto layout parent frame using the alignment flyout menu. If you want to align one item differently than the other items, I would 1) select the item; 2) place it in another AL frame using Shift + A; 3) set the new frame to Fill Container; 4) change the alignment within the new frame.

[@Figma]

You can read about the changes on our Help Center help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-Layout Also duplicate the Auto Layout playground file for hands-on learning: www.figma.com/community/file/784448220678228461

[@lukenadolny]

@@Figma wow yall are awesome! thank you so much for the prompt reply!!

[@eotikurac]

all of this is excellent, but when making a card i don't want to use padding top and bottom to make space between the title, description, image, etc. it looks weird. when stacking these in css i almost always use margin-bottom on image, title, description. to get this to work out i need to create a rectangle with the height of the margin and place it under the title. this isn't generating any css code and i'm either doing something wrong or this isn't a feature of figma.

[@SearthianMidnight]

can someone explain the difference between auto width and fixed with? i didn't quite understand the explanation...