Figma for Education: Learning Auto layout
Вставка
- Опубліковано 9 лют 2025
- 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.
Duplicate a copy of the workshop file here: www.figma.com/...
Figma is free for students and educators: figma.com/educ...
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #FigmaForEdu #workshop #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
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
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!
that was my thought. didn't figma already teach this for free 🙄
Miggi is the best 😂
This was amaaaazing! I freaking love this man. Finally I can say I really understand auto layout! best teacher ever
Hands down most helpful and clear tutorial I've come across so far.
One of the best Figma tutorials i have come across....kudos!
Thank you for your contribution, the spirit of "education for all" of figma is not dead :)
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!
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!
One of the best tutorials ever that helps me a lot. It's like a reference for me.
So far, the best tutorial I've seen on Auto layout
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).
I love how you didnt immediately start talking about something irrelevant. You got right to the point 🎉
quite literally the only tutorial that makes sense. thank you so much
Miggi is a gift to humanity
This is the best tutorial I've found since I started learning Figma, muchas gracias Migue! abrazo
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!!!
1:01:35 is super helpful 😁😁thanks so much for this tutorial!
i created a progress bar that has some dots distributed evenly on it. also, the line needs to adjust based on the width of the page, even sometimes the dots needs to have different styles.
This video really solved all ! loved this!
Super helpful! Thanks for putting this tutorial together
Lots of love to the Figma team ❤❤❤
Thank you. I learned a lot in one hour 🙏🏻
thank you for breaking it down for ACTUAL BEGINNERS. Other "Beginner" tutorials are still not beginner friendly and go WAY too fast.
Thanks for the workshop,
it was very helpful
mind blowing! So good lesson!
"We're gonna begin now" is at 8:45 in case anyone is wondering.
Thank you so much Maggi from Figgi for this tutorial. It's super helpful.
wow🤩This is Amazing! Thank you Miggi, Thank you Figma!
Thank you for such an awesome tutorial.
Thank you for your explanation, it was really useful!!
thanks foe the great video about autolaayout.
I'm pretty sure most people who watch (and re-watch) the segment on hug/fill will still not grasp the concept. It's probably one of the more difficult to master as a newcomer. Was hoping for a more thorough explanation on here. Still though, Miggi is a great teacher. Will see if he has any other videos where he covers the topic.
Totally agree with you. I struggled for a LONG time to understand that aspect of auto-layout, and therefore MUCH more time should be spent on teaching the understanding of the frame resizing, because if that is not understood, auto-layout falls down, and becomes an enormously frustrating experience, that only the seriously determined will persevere long enough to crack this. Even so i resent all the wasted time i spent trying to figure this concept out.
That said i have to admit that Miggi did the best job of all the videos i have watched on Auto-Layout, I particularly like the way he suggests creating a little wireframe to play around with your responsive boxes, and critically to understand WHAT element is being responded to - the element inside the container or the parent frame itself - this demonstration focuses all the attention on aspects of responsiveness. A lot of tutorials out on UA-cam, seem to concentrate on real world examples, which takes your focus away from the fundamentals, and easily distracts you to look at all the "shiny bits" of the layout. So bravo Miggi and thank you. A lesson on the fundamentals is clearly the way to really learn and understand the concepts of auto-layout, which has become even more powerful in recent updates.
Which brings me to another issue, because Figma updates the app so often, most videos you watch on UA-cam will show outdated interface and sometimes even functionality. The drawback of a fast evolving product. You can easily find yourself getting endlessly frustrated trying to follow tutorials, because the interface has changed, and when you are a complete novice, your first thought is that YOU have done something wrong, or there is a bug in the app, when really you need to regularly check the MOST recently updated tutorials
great video!!! how do you screenshot the area that you selected with your mouse?
So easy to follow!! this was great
one of the most helpful videos, thank you!!
Thanks for the great tutorial. In 1:01:40 you say that any object has constraints if it is in a frame, and that an auto layout is a frame, but when i place a frame in an auto layout, that frame does not show Constraints in the Properties panel; when i place a frame in a frame (that is not an auto layout) i see the Constraints display in the Properties panel. ???
For item constraints to be available in the auto layout frame, it should be designated as an absolute positioned element.
@@Figma Can you explain more
Thank you miggi for sharing!!! 🎉 … I dream that one day we will have the wrap property. 😅
@figma and we have it now! 🥳
Hi, I have been trying to learn autolayout since sometime from earlier figma tutorials. Just confused about the fill container option that I cannot see in my design panel, I believe its updated now. Is this tutorial the latest as I even checked the config 2022 tutorial and it still doesn't solve my doubts.
Here are two updated videos: ua-cam.com/video/1odqpkfkDL8/v-deo.html
and
ua-cam.com/video/3XIQZrrhx-I/v-deo.html
Hope this helps!
@@Figma Thanks for the reply. Truly appreciated!😇
Thank you very much!
alt + Click Fixed-size in Text Panel is not working to set the text field to truncate text. It is because of the new updates or there is another way to set it?
Very helpful, Thank you
Hey Migi, I have a question about Auto layout. After i made an auto layout and went to another object, when i go back to the previous button the frame wont adjust if i add some text on it. Thanks
Why cant I add text to an autolayout box? Its coming outside the box . How to put it inside that text container?
Miggi is a figma guru🔥❤️, please can you do something on grid layout
very grateful for this
Figma Kindly make a videos on component’s in figma
Tutorial muitíssimo bom!
how do you screenshot the area in figma?
Nice work
Please make videos about component
how to make a card like this..like all the things in card are autolayout on thier own?
Thanks man..💯
Thanks alot ❤️
Useful
Thankyou soo much!
How does we get photo booth?
You can find it in the insert panel (shift+i) its a widget search "photo booth".
Please publish 1080p videos, it's blurred!!
Thank you!
please someone answer, is this video compatible with updates after 2023 config?
It is, but there are a few updates to consider. You can now use min and max values for width and height. You can now wrap items. Space between is an auto value between elements. And you can set a max number of lines for text truncation.
These two videos cover the updates: ua-cam.com/video/h9g3KUpFCOw/v-deo.html
and
ua-cam.com/video/c3S5MR_LEYM/v-deo.html
Cool
I wish we could bookmark minutes of a video in UA-cam and save them as favorites :(
👍
5:17 to skip to the actual lesson
11:44 for the very basics
34:26 removing auto layout
😃
The quality of video is poor:-( I can not see some of numbers and letters on screen
Why is figma new version is just so different
We have an updated Auto Layout workshop for the redesigned Figma here: ua-cam.com/video/3XIQZrrhx-I/v-deo.html
buh'in
1.06.00
Thank you very much!