Figma for Education: Learning Auto layout

Auto-layout in Figma is a property you can add to frames and components that lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.

While these tools are designed to help designers work faster, they can be intimidating at first if you don’t understand the basics. In this session, we will introduce auto layout features, and cover some best practices and tips for designing layouts that can change with their content.

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #FigmaForEdu #workshop #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[eprisrichardson]

5:18 Tutorial Begins / Figma Interface Basics
8:45 What is Auto Layout and Why is it Useful?
11:45 Layout Basics / Creating and Removing Auto Layout Frames
- 14:51 Example: Make a Simple Letter Avatar
- 16:40 Nesting Auto Layout Elements
- 21:18 Spacing Between Items
- 21:53 Apply Negative Spacing, Adjust Constraints
- 24:13 Padding
---- 24:34 Adjust Padding on Canvas and Constraints
- 27:48 Example: Make a Bulleted List from Scratch
35:34 Resizing
- 36:08 Flexible Resizing
---- 37:05 Resize Behaviors
- 38:35 Container Responds to Content Size (Hug)
- 41:43 Content Responds to Container Size (Fixed/Fill)
- 44:02 Review: Resize Behaviors (Hug, Fixed, Fill)
- 46:50 Resizing Nested Items
- 47:24 Resizing Shortcuts
50:25 Alignment and Advanced Layout / Alignment and Spacing Mode
- 51:40 Text Baseline Alignment
- 54:00 Canvas Stacking
- 57: 40 Text Truncation (Review as it was already discussed throughout resizing)
58:43 Absolute Positioning
- 1:02:35 Placement & Constraints of Absolute Positioned Items
1:03:40 Q + A

[ke]

These are really thorough. And, watching them all over and over (over time), they're way better than all these expensive so-called "Figma masterclasses". Kudos to the Figma for Education team!

[skillswiththomas]

One of the best Figma tutorials i have come across....kudos!

[saradia]

One of the best tutorials ever that helps me a lot. It's like a reference for me.

[zvocanajocana]

The most thorough tutorial I've come across so far. I saved it and watched couple of times. I also saved the files so I can always easily go back and remind myself of something. Thanks Figma!

[mequable]

So so SO educational and in-depth. Such an excellent educator! This video is educating in the right way for overall understanding - both explaining what things are about in an in-depth way, and showing keyboard shortcuts while doing each step. Thank you very much. (this is also the first figma tutorial that I've come across that really explains things; 15+ years in Illustrator and a few months in XD didn't do me any favour when coming to Figma).

[jasminehuynh]

Hands down most helpful and clear tutorial I've come across so far.

[christnhvv]

This was amaaaazing! I freaking love this man. Finally I can say I really understand auto layout! best teacher ever

[eprisrichardson]

Of course, this is the most thorough tutorial I've come across so far. It's definitely one I needed the most. Otherwise, I'm not sure I would have been aware of the absolute positioning feature. I was a designer before I was a developer, but I never stepped into Figma (I was hooked on XD since I have a PC and couldn't get Sketch. Lol). Now that I am learning Figma, I am loving how it keeps developers in mind when adding new features!!! Thanks for the tutorial!

[milamigrante]

Thank you for your contribution, the spirit of "education for all" of figma is not dead :)

[taiwoadebayo]

So far, the best tutorial I've seen on Auto layout

[TheDreemchaser]

I love how you didnt immediately start talking about something irrelevant. You got right to the point 🎉

[bk]

quite literally the only tutorial that makes sense. thank you so much

[giardiniera]

This tutorial is INCREDIBLE!!! Sending all of my colleagues from Springboard this way, best Figma resource I've seen so far.

Only question, anybody else having trouble getting the text truncation shortcut to work? It's fine because you can just go into the menu, but I'm just stumped as to why, at least on my Macbook, option + "Fixed Size" in text panel won't work.

Thank you for this!!!

[jkyortiz]

This is the best tutorial I've found since I started learning Figma, muchas gracias Migue! abrazo

[karanurao]

Thanks for the workshop,
it was very helpful

[mingsirakowit]

Thank you so much Maggi from Figgi for this tutorial. It's super helpful.

[NicoandAndy]

wow🤩This is Amazing! Thank you Miggi, Thank you Figma!

[CrabbyTeffi]

Super helpful! Thanks for putting this tutorial together

[FahadManzoor-gt]

Thank you for such an awesome tutorial.