11:45 AL Conflict/ At least define one direction 19:3024:10 Independent Padding hack 29:40 Select AL Colum 38:40 AL Example 46:40 AL different size icon 53:50 AL Auto animation
37:59 you can also choose a device for prototype and you don't need to isolate scrolling content. Also you can add a constraint to bottom navigation and make the frame longer, this way it'll work in prototypes accurately and you'll be able to see the actual design in the editor.
I really hope the next feature Figma adds will help with rearranging elements when designing responsive websites.. Things like rearrange vertically instead of horizontally once certain min width constraints are reached, things like that. The current version of autolayout is nearly there though
So fast , it's hard to keep up with the speed of thought and execution from a student point of view. Right when I'm trying to see whats going on in the layers I'm left in the dust. Lol. Just some user feedback . I'll definitely keep watching til it clicks though, I'm really enjoying the learning content. Thanks guys!
Thank you for all of these tutorials. I'm a huge fan of auto layout. One thing I'm trying to grasp is what are the rules for when constraints show up and when they are disabled. I see in the source file you provided, there is auto layout + constraints. Sometimes once I apply auto layout my constraint options disappear and I'm just trying to figure out how to design something like your Mewstagram from the ground up.
New Auto Layout is great. But really miss the fact that there is no visual difference between a regular frame and an auto layout frame. That visual cue was really helpful in "approaching" the frame, knowing how it would respond when e.g. copy/pasting.stuff in it. Now I have to check the layer panel or design panel first. Overall it would be great if there were more visual cues on the canvas like with constraint where you can see if they are set correctly just by inspecting a layer. Just more efficient.
Thanks for the feedback, Buddy! The team has also seen this feedback come up at other times and like always, will take it into consideration as we continue to invest in making Auto Layout better!
@@Figma I just found out, when you're in Inspect tab, and hovered around the margins, it will show all it's side margins. Tbh I'm not gonna be even mad if those slanted pattern margins guide will show on the Canvas too, without going first in the Inspect tab when we're 1. Resizing an Auto Layout frame by the new Margins popup 2. Resizing an Auto Layout frame by its sides, show the current Auto Layout frame being resized, and if it's inside a Parent and a stack, show those guides too. 3. When we're dragging an object inside a Parent Auto Layout frame, show the margins for a few seconds. 4. When we're pressing Alt around each Auto Layout frame below it's cursor. Literally the function is already there on the Inspect tab. You guys just need to integrate it to the Canvas too, without going first on the Inspect tab. This measuring tool will be useful for us Designers too, not just devs. Add a toggle to disable margin guides too on the quick settings drop-down when we click the Zoom percentage.
It would be amazing if you could have further control of how content takes up the space by assigning 'fr' units (css-grid). Example: I have 3 elements. I want element-1 to take 2fr and the other elements to take up 1fr. Currently, the only optiion is for all the elements to take up the remaining space evenly. Framer does this beautifully with their 'stack' layout tool.
How do I create the type of buttons shown at @8:24? Buttons with one of the edges with a stylized outline stroke? edit : One way I can figure out is by stacking a rectangle over a line. Is there a more graceful way?
I've taken one of the cards and replicated it what seems to be perfectly but nothing inside is responsive (like when I make it smaller the text doesn't change or leave the box) any reason this happens?
I feel like the whole auto-layout nesting process is incredibly complex, I would not recommend auto-layout unless you know what you are doing. It actually adds for stress than speed.
i love this new autolayout.. this is so amazing !!! one question.. is it possible to keep the aspect ratio for an image in a card by using autolayout? thanks ..
The size of the Figma UI itself it too small to see what is being clicked on and the values they have. Can they please increase the size of the Figma UI so that we can see what is being done to achieve the result?
Hi, I recently tested auto layout on a grid with 12 column. There are 2 frames, one of them placed on 8 columns, the other one is a sidepanel and it was placed on the rest 4 columns. I want both panel can adjust their own width when I resize the grid. I tried auto layout honrizontal with spacing between those 2 panels at 24 px. And set fill container on both panels. but both panel became same width and each of them scaled to 6 columns width. If I drag the sidepanel to 4 columns, then it became fixed width automatically. How can I make 2
hey guys, i'm just wondering if its possible to make a fully interactive graph on Figma for its users, what i'm wanting to achieve is a bar graph with 4-6 different data fields that when a user clicks a button it adds the data to the graph within the application, cheers
Sorry but little confusing with the new one, old one was easier I think. The naming i.e. Hug Content sound little weird. I will appreciate if there will be a simple video explaining these properties on child first and then parents seperately :)
btw you just create fantastic updates, but there one small thing in the UI of figma that is very annoying and needs just a bit of you attention. Please allow vertical scrolling in layers panel!! This so simple, and so painful right now without it. Extending the layers panel all the time to see the layers structure is so nerve consuming. you can solve this in a blink
Hey Mirko, the layers panel does have vertical scrolling. If you're having an issue with this, try contacting us at support@figma.com and we can see if you've found a bug!
For someone who does not speak native English it is hard to follow. The mouse cursor is constantly moving hectically through the image, the speech is too fast. And then many sentences are only half pronounced and also put forward differently. Sorry, this is too exhausting
Hey Beretta, Andrew from Figma's Product Education team here (we create the step-by-step tutorials for the channel). We have some plans to create a number of Auto Layout video tutorials. If you have any specific examples from this video that you found confusing and could benefit from a tutorial, let me know and I'll see if we can fit it into the videos we're planning!
@@Figma Thanks Andrew. I agree with both comments here and understand it's more of for people familiar with older versions of AL. That said, I'm like Bretta, also pretty new and find a lot of this impossible to jump in on. So if you create the new tutorials or a video of this length for people new to auto layout that would be awesome. A big challenge that I have is that a lot of stuff where I can learn the basics is oriented around the older versions so bridging the gap is really confusing and seemingly impossible sometimes. So please please please do make them it would be a lifesaver. Maybe you can design some kind of training version on your end that you can edit and make minor adjustments to with the future versions of your product. But I hope I explained the problem.
Hey Ishamel, thanks for the feedback! And you're totally right, but luckily we have an entire playlist of Auto Layout tutorials which includes several videos we made specifically for beginners, where we take you step-by-step to create a variety of components. We have more plans to continue adding to this playlist in the future. You can watch all of those videos here ruclips.net/p/PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2
this whole video is useless if your not showing how to make the app live in app store. Nobody cares about designing. News flash, in Prison they are teaching this.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
I've tested the new auto layout a lot on these days and it's a life-changer
Unbelievable support from the Figma team. INCREDIBLE WORK!
The passion you guys bring to the team and the product is contagiously inspiring lol
wow what a great tips and especially selecting columns in a row individually, that was what I really need
That's the video I've been waiting for since the new auto layout release came out.
11:45 AL Conflict/ At least define one direction
19:30 24:10 Independent Padding hack
29:40 Select AL Colum
38:40 AL Example
46:40 AL different size icon
53:50 AL Auto animation
37:59 you can also choose a device for prototype and you don't need to isolate scrolling content. Also you can add a constraint to bottom navigation and make the frame longer, this way it'll work in prototypes accurately and you'll be able to see the actual design in the editor.
Thanks so much guys, loved AutoLayout before, now it's just ridiculously good. Many thanks
Congrats on the work so far! Incredible what you did so far.
I really hope the next feature Figma adds will help with rearranging elements when designing responsive websites.. Things like rearrange vertically instead of horizontally once certain min width constraints are reached, things like that. The current version of autolayout is nearly there though
yeah I d love to see that too. Add flex-child-wrap and we are all happy :D
Cool! Love these new features! Really help on speed up the development process.
So fast , it's hard to keep up with the speed of thought and execution from a student point of view. Right when I'm trying to see whats going on in the layers I'm left in the dust. Lol. Just some user feedback . I'll definitely keep watching til it clicks though, I'm really enjoying the learning content. Thanks guys!
This update of auto-Layout is awesome ! 😍 I have already made a tutorial video on this with what I tested 😊
Thank you for all of these tutorials. I'm a huge fan of auto layout. One thing I'm trying to grasp is what are the rules for when constraints show up and when they are disabled. I see in the source file you provided, there is auto layout + constraints. Sometimes once I apply auto layout my constraint options disappear and I'm just trying to figure out how to design something like your Mewstagram from the ground up.
Why show «Mixed» for padding instead of real values? Why do I need to click to see what I typed 1 second ago?
New Auto Layout is great. But really miss the fact that there is no visual difference between a regular frame and an auto layout frame. That visual cue was really helpful in "approaching" the frame, knowing how it would respond when e.g. copy/pasting.stuff in it. Now I have to check the layer panel or design panel first. Overall it would be great if there were more visual cues on the canvas like with constraint where you can see if they are set correctly just by inspecting a layer. Just more efficient.
Thanks for the feedback, Buddy! The team has also seen this feedback come up at other times and like always, will take it into consideration as we continue to invest in making Auto Layout better!
@@Figma I just found out, when you're in Inspect tab, and hovered around the margins, it will show all it's side margins.
Tbh I'm not gonna be even mad if those slanted pattern margins guide will show on the Canvas too, without going first in the Inspect tab when we're
1. Resizing an Auto Layout frame by the new Margins popup
2. Resizing an Auto Layout frame by its sides, show the current Auto Layout frame being resized, and if it's inside a Parent and a stack, show those guides too.
3. When we're dragging an object inside a Parent Auto Layout frame, show the margins for a few seconds.
4. When we're pressing Alt around each Auto Layout frame below it's cursor.
Literally the function is already there on the Inspect tab. You guys just need to integrate it to the Canvas too, without going first on the Inspect tab. This measuring tool will be useful for us Designers too, not just devs.
Add a toggle to disable margin guides too on the quick settings drop-down when we click the Zoom percentage.
Thanks glad to see. This is flexbox in figma replicated 100/100 🌋
Awesome new features!
Oh, and by the way, thank you a ton for this incredible video, it is super helpful!
It would be amazing if you could have further control of how content takes up the space by assigning 'fr' units (css-grid). Example: I have 3 elements. I want element-1 to take 2fr and the other elements to take up 1fr. Currently, the only optiion is for all the elements to take up the remaining space evenly. Framer does this beautifully with their 'stack' layout tool.
Game changing feature!!! Thanks to the team!
great work guys. really enjoy your software and your videos ;-)
Agreed that hugging cat piles is the best new feature of Figma. Can't find where to get said cat pile in the current UI though.
Such a lit feature ❤️🔥
How do I create the type of buttons shown at @8:24?
Buttons with one of the edges with a stylized outline stroke?
edit : One way I can figure out is by stacking a rectangle over a line. Is there a more graceful way?
Okay I figured it out. It is a drop shadow wih 0 blur and 100 opacity. :D
Nice 💫
Perfect 👍
It's a huge lifesaver
I've taken one of the cards and replicated it what seems to be perfectly but nothing inside is responsive (like when I make it smaller the text doesn't change or leave the box) any reason this happens?
This is the way!
Thank u for this!
Such a great team
I feel like the whole auto-layout nesting process is incredibly complex, I would not recommend auto-layout unless you know what you are doing. It actually adds for stress than speed.
Agree, only add more complexity and confusion.
How do you get the header row to align with the table columns, I can't seem to be able to do it.
i love this new autolayout.. this is so amazing !!! one question.. is it possible to keep the aspect ratio for an image in a card by using autolayout? thanks ..
Not in this iteration of Auto Layout, though it's a feature request the team is aware of!
@@Figma nice♥️
what's the solution when your using auto layout for mobile responsive and desktop website breakpoints
Is there a plan to have a grid Auto Layout? Meaning if we have elements both vertically and horizontally and we want one Auto Layout?
great video
Why didn't you guys name "Space Between" as just "Spaced" ?
"Space between" takes inspiration from flexbox's space-between value. Hope this clears things up!
@@Figma Yes, and thank you for the quick reply! 💖 Figma!
The size of the Figma UI itself it too small to see what is being clicked on and the values they have. Can they please increase the size of the Figma UI so that we can see what is being done to achieve the result?
52:10 HOW to make with autolayout that navigation with underlining?! :(
Hi, I recently tested auto layout on a grid with 12 column. There are 2 frames, one of them placed on 8 columns, the other one is a sidepanel and it was placed on the rest 4 columns. I want both panel can adjust their own width when I resize the grid. I tried auto layout honrizontal with spacing between those 2 panels at 24 px. And set fill container on both panels. but both panel became same width and each of them scaled to 6 columns width. If I drag the sidepanel to 4 columns, then it became fixed width automatically. How can I make 2
Figma is awesome
very helpful!
The way I understand it, Auto Layout is similar to CSS Flexbox?
I just did responsive calendar with this update.. haha insane
hey guys, i'm just wondering if its possible to make a fully interactive graph on Figma for its users, what i'm wanting to achieve is a bar graph with 4-6 different data fields that when a user clicks a button it adds the data to the graph within the application, cheers
started using Figma a few months ago...haven't used anything else since...don't wanna use anything else
Hello,
How you color inside the icon do you use some plugin and can you tell me best Plugin in Figma?
You guys are speaking so speed.
From what I can tell the Ctrl Alt Column select works the same as just using Ctrl?
ye i think so.
in the future will auto layout support CSS Grid
this video is holy
Adding negative margin would be great
Could you guys release a new tutorial for Auto layout, I'm still finding it really buggy.
Hugs. I miss them.
Yes dear sirs.
Sorry but little confusing with the new one, old one was easier I think. The naming i.e. Hug Content sound little weird. I will appreciate if there will be a simple video explaining these properties on child first and then parents seperately :)
btw you just create fantastic updates, but there one small thing in the UI of figma that is very annoying and needs just a bit of you attention. Please allow vertical scrolling in layers panel!! This so simple, and so painful right now without it. Extending the layers panel all the time to see the layers structure is so nerve consuming. you can solve this in a blink
Hey Mirko, the layers panel does have vertical scrolling. If you're having an issue with this, try contacting us at support@figma.com and we can see if you've found a bug!
Figma #1
For someone who does not speak native English it is hard to follow. The mouse cursor is constantly moving hectically through the image, the speech is too fast. And then many sentences are only half pronounced and also put forward differently. Sorry, this is too exhausting
Fascinating，wanna uninstall adobe XD now！😍
Don’t understand this, you’re not showing us how to create these step by step, your only showing us whats already made and how it works.
Hey Beretta, Andrew from Figma's Product Education team here (we create the step-by-step tutorials for the channel). We have some plans to create a number of Auto Layout video tutorials. If you have any specific examples from this video that you found confusing and could benefit from a tutorial, let me know and I'll see if we can fit it into the videos we're planning!
It's clearly not meant to be a step-by-step tutorial but a deep dive into the new features
@@Figma Thanks Andrew. I agree with both comments here and understand it's more of for people familiar with older versions of AL. That said, I'm like Bretta, also pretty new and find a lot of this impossible to jump in on. So if you create the new tutorials or a video of this length for people new to auto layout that would be awesome. A big challenge that I have is that a lot of stuff where I can learn the basics is oriented around the older versions so bridging the gap is really confusing and seemingly impossible sometimes. So please please please do make them it would be a lifesaver. Maybe you can design some kind of training version on your end that you can edit and make minor adjustments to with the future versions of your product. But I hope I explained the problem.
I just look this because want to hug the girl :D
Its fast talk conversation between pros and not intended for students or new bees to catch up smh
Hey Ishamel, thanks for the feedback! And you're totally right, but luckily we have an entire playlist of Auto Layout tutorials which includes several videos we made specifically for beginners, where we take you step-by-step to create a variety of components. We have more plans to continue adding to this playlist in the future. You can watch all of those videos here ruclips.net/p/PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2
i appreciate your tutorials but sometimes you're just going too fast.
this whole video is useless if your not showing how to make the app live in app store. Nobody cares about designing. News flash, in Prison they are teaching this.
Terrible audio in this video make it unwatchable.
Do you like soy?