Figma for Education: Learning Auto layout
Vložit
- čas přidán 23. 02. 2023
- 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/community/file/...
Figma is free for students and educators: figma.com/education
____________________________________________________
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
One of the best tutorials ever that helps me a lot. It's like a reference for me.
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 :)
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!
quite literally the only tutorial that makes sense. thank you so much
So far, the best tutorial I've seen on Auto layout
This is the best tutorial I've found since I started learning Figma, muchas gracias Migue! abrazo
Thank you. I learned a lot in one hour 🙏🏻
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!
Miggi is a gift to humanity
Super helpful! Thanks for putting this tutorial together
I love how you didnt immediately start talking about something irrelevant. You got right to the point 🎉
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!
So easy to follow!! this was great
Thanks for the workshop,
it was very helpful
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).
wow🤩This is Amazing! Thank you Miggi, Thank you Figma!
one of the most helpful videos, thank you!!
mind blowing! So good lesson!
Thank you for your explanation, it was really useful!!
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!!!
Lots of love to the Figma team ❤❤❤
Thank you so much Maggi from Figgi for this tutorial. It's super helpful.
thank you for breaking it down for ACTUAL BEGINNERS. Other "Beginner" tutorials are still not beginner friendly and go WAY too fast.
Thank you very much!
Thank you for such an awesome tutorial.
Thanks alot ❤️
Thankyou soo much!
very grateful for this
Thanks man..💯
Tutorial muitíssimo bom!
Thank you!
Thank you miggi for sharing!!! 🎉 … I dream that one day we will have the wrap property. 😅
@figma and we have it now! 🥳
Very helpful, Thank you
great video!!! how do you screenshot the area that you selected with your mouse?
Useful
Nice work
Figma Kindly make a videos on component’s in figma
Miggi is a figma guru🔥❤️, please can you do something on grid layout
👍
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 CZcams, 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 CZcams 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
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
Please make videos about component
Cool
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
"We're gonna begin now" is at 8:45 in case anyone is wondering.
😃
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?
I wish we could bookmark minutes of a video in CZcams and save them as favorites :(
how to make a card like this..like all the things in card are autolayout on thier own?
Why cant I add text to an autolayout box? Its coming outside the box . How to put it inside that text container?
how do you screenshot the area in figma?
Please publish 1080p videos, it's blurred!!
buh'in
How does we get photo booth?
You can find it in the insert panel (shift+i) its a widget search "photo booth".
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: czcams.com/video/h9g3KUpFCOw/video.html
and
czcams.com/video/c3S5MR_LEYM/video.html
1.06.00
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
Thank you very much!