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

[@eprisrichardson678]

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

[@jasminehuynh941]

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

[@k16e]

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!

[@nanayaa-ansah]

that was my thought. didn't figma already teach this for free 🙄

[@ayomikunboyede8589]

Miggi is the best 😂

[@saradia5989]

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!

[@christnhvv256]

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

[@milamigrante]

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

[@eprisrichardson678]

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!

[@bk25568]

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

[@taiwoadebayo7648]

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

[@jkyortiz]

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

[@TheDreemchaser]

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

[@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).

[@skillswiththomas]

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

[@Ehsan.Mortazavi]

Thank you. I learned a lot in one hour 🙏🏻

[@CrabbyTeffi]

Super helpful! Thanks for putting this tutorial together

[@wangsusharky]

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!

[@giardiniera7130]

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

[@Aherre]

So easy to follow!! this was great

[@karanurao]

Thanks for the workshop, it was very helpful

[@minzhu6094]

mind blowing! So good lesson!

[@Nardybardy]

one of the most helpful videos, thank you!!

[@santiecam]

Miggi is a gift to humanity

[@nicole_nico22]

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

[@guessinfrench]

Thank you for your explanation, it was really useful!!

[@mingsirakowit3316]

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

[@aloysiofranca]

Thank you very much!

[@user-lm1om8de7n]

Lots of love to the Figma team ❤❤❤

[@datokraveishvili7612]

great video!!! how do you screenshot the area that you selected with your mouse?

[@user-nb5kp5uq9w]

Thank you for such an awesome tutorial.

[@muhammadArfanYuliadi]

Thankyou soo much!

[@meenakshisundarams9518]

very grateful for this

[@bk25568]

thank you for breaking it down for ACTUAL BEGINNERS. Other "Beginner" tutorials are still not beginner friendly and go WAY too fast.

[@SharadAllen]

Thanks alot ❤️

[@adegboyegashittu5946]

Very helpful, Thank you

[@kabiryounas8238]

Thanks man..💯

[@MzS_92]

Thank you!

[@nataliamendes1518]

Tutorial muitíssimo bom!

[@dominguezjunior1403]

Nice work

[@elflacosoyyo]

Thank you miggi for sharing!!! 🎉 … I dream that one day we will have the wrap property. 😅

[@elflacosoyyo]

@figma and we have it now! 🥳

[@Yowgin]

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

[@danhle0606]

Useful

[@aniketkumar2331]

Figma Kindly make a videos on component’s in figma

[@amcds2867]

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

[@Figma]

For item constraints to be available in the auto layout frame, it should be designated as an absolute positioned element.

[@momalzahid8074]

@@Figma Can you explain more

[@bikramnath9766]

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?

[@user-uo8rn2kp1m]

how do you screenshot the area in figma?

[@cobycole23]

Miggi is a figma guru🔥❤️, please can you do something on grid layout

[@mahamudulislam6729]

Please make videos about component

[@mannugaur8391]

how to make a card like this..like all the things in card are autolayout on thier own?

[@underscoreroa]

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.

[@kirstymclaren3869]

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.

[@kirstymclaren3869]

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

[@kirstymclaren3869]

Which brings me to another issue, because Figma updates the app so often, most videos you watch on KZbin 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

[@suryajayarajan42]

Why cant I add text to an autolayout box? Its coming outside the box . How to put it inside that text container?

[@andres-digitalmarketing5433]

Cool

[@AkinsRealm]

👍

[@andyg1735]

"We're gonna begin now" is at 8:45 in case anyone is wondering.

[@lokisingh9944]

Please publish 1080p videos, it's blurred!!

[@UXMuskan]

How does we get photo booth?

[@Figma]

You can find it in the insert panel (shift+i) its a widget search "photo booth".

[@monicaa78]

😃

[@yusra5100]

please someone answer, is this video compatible with updates after 2023 config?

[@Figma]

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.

[@Figma]

These two videos cover the updates: kzbin.info/www/bejne/nmrKZH6Lpat2hdk and kzbin.info/www/bejne/mWS2ZoCIlLF4j68

[@laguirre94]

I wish we could bookmark minutes of a video in KZbin and save them as favorites :(

[@andyg1735]

buh'in

[@TriaViridiVela]

1.06.00

[@aleksandranka2570]

The quality of video is poor:-( I can not see some of numbers and letters on screen

[@PapaWilk]

5:17 to skip to the actual lesson

[@PapaWilk]

11:44 for the very basics

[@PapaWilk]

34:26 removing auto layout

[@adscafe1237]

Thank you very much!