"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about auto layout in Figma: help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design"
Man, after spending hours trying to figure this auto layout feature out, I finally come to an understanding. I'm fairly new to figma and design, and this video is super duper valuable. Though I've watched it more than 10 times, but now I'm starting to get confident. I appreciate the upload guys.
Awesome, powerful, and easy to use functionality-thanks! Quick note: from a beginner's perspective, it feels like you skipped some important steps starting at 0:37 .
WHAT! That 0% opacity/toggle layer visibility trick to hide items is genius! I hadn't thought of simply making a component completely transparent to make it disappear while retaining the size and shape 🤯 Thank you, thank you, thank you!
We announced some new updates for auto layout at #config2022. To learn more, check out our new auto layout tutorial here: ua-cam.com/video/floQKLsWAy4/v-deo.html
Hello! With the new auto layout updates, we've moved the spacing mode options under the Gap between items dropdown menu. For space-between, type or choose "Auto". For packed, enter a number.
@@adrianozuna875 this is surprisingly not UX friendly lol. I have litteraly spent +5hrs trying to figure out this option (or the lack of). I know we are supposed to know every single updates but come on figma what the heck lol
@@Figma Personally i cant find packed/space between anywhere. I had to use the double click in the grid which is so obscure i would never have found it.
Once I've turned the entire nav into a component, and I've added the new menu component into my new design project file, I cannot utilise Auto Layout anymore. For example, I can't add a new 'list item' component into the menu, or add another button into it. Is this normal?
I love the auto-layout feature, but I wish I can change default alignment settings. I don't like it to be the top left instead I want centre centre. Thanks, for this super useful and powerful feature.
This is great feedback, I've definitely wanted the same in the past, and will pass your feedback along! If you haven't already, you can join our new support forum at forum.figma.com to discuss feature requests and more!
Hi, Thanks for the video. I am actually new. I tried to change the frame to Ipad Mini and it worked But When I change to Iphone sizes it got messed up... Why? Shouldn't it be responsive? Or Am I missing something? 😁
Hi. It may be a dumb question but I don't really get why it's necessary to turn the List item text layout into an auto layout before creating a nav menu auto layout. What would have been the problem in using 3 usual text layouts to make a nav menu auto layout, please?
I have a question please. So say I want to have a logo and menu / list items same as here in this tutorial. But I want the menu items to be centred. If I remove the option of ''space between'' and set a fixed distance between logo and menu items , than whenever I resize the frame the menu items keep centred but the logo on the left disappears. How could I fix that and instead also keep logo in place?
Would have been great if you showed how it could be responsive and change to a Mobile size nav menu with the nav menu icon of (3 stacked horizontal lines). Also, I am trying to drag my button into the nav menu, but it's not adding it to the nav menu like it did in the video. I'm sure. a lot with Figma has changed in over 2 years, is there something I am suppose to be doing that varies from this video in 2023? Thank you for this, incredibly helpful! 💙
At 6.04, how are you getting 'move to page - local components', as I am not getting it. I tried clicking the right mouse click/ left mouse click on the frame or frame heading, I get the rest but just not the move to page? Please help
for @5:30 if you are recently watching it, then in updated you don't have space between as written text, it will this way " ]|[ "(set it to auto to make it resposnsive)
Ok so.. I feel dumb because this was a bit difficult for me. I'm super new to Figma. Why doesn't my button automatically make space/ resize in the Nave menu when I drag the button component in between the Nav button component? I've rewatched the video many times...
I created my own avatar and I couldn't get it to settle into the Nav Menu as the Button did. I added auto-layout to the avatar and made it into a component so I'm not sure why it wouldn't insert into the Nav Menu component. Any advice?
Hi, is your nav menu the main component or an instance of a component? Only a master component can be edited, while an instance can only allow overriding properties such as colors, opacity, and text content.
Why are u turning a component into a component? Didn't that used to be a component in a frame inside a frame that was nested outside the component that held auto layout outside the first component, that in turn was a frame that contained the elements? Or should I just head back to XD...
5:05 i am following this tutorial and there is no dropdown to select between packed and space-between. Auto layout section looks a little bit different. Where now can I find this dropdown?
Hello! With the new auto layout updates, we've moved the spacing mode options under the Gap between items dropdown menu. For space-between, type or choose "Auto".
Glad you thought so, Wesley! We're working on more auto layout content and have a new video dropping later this week. Subscribe to the channel so you get a notification when it's out.
I really like this feature and tutorial, however I have a question about it. I've made a mobile navbar with this auto layout in auto layout method, which has a variant too (dark mode) and these are also main components. I forgot to set this "left and right" constraint on them and already copied instances on many-many frames. So I thought I just change the constraints on my main components and it will change it automatically on all the instances, but no. Why is that? Why my changes on the constraints of main components not appear on the instances? And is there a quick solution to fix my mistake, or I have to copy and paste to replace all my instances?
hi, thank you very much for this helpful tutorial. but at minute 6.45 the "constraint and resize" menu appears different, both in the web browser version and in the app version (Mac use). In fact, not only do I not find the items indicated in the tutorial, but I also can't get the dynamic resizing of the main Frame in which the component is inserted ... I don't know if it's me who's wrong, or it's a question of different versions of Figma
Hello Stefano, we've updated the auto layout features last month and moved the resizing options to the top of the panel. You can learn more about the new auto layout updates in this new tutorial: ua-cam.com/video/floQKLsWAy4/v-deo.html
Does anyone have the time stamp to a new video with the update on the resizing? I'm at 4:25 in this video, and the resizing isn't an option in Figma. I'm afraid I'm lost now.
Hi Figma-team, I missed the major part of your last event ""Figma like the pros: Tips and tricks from the team that builds Figma", when will this be available online?
What would be the best way to use this for tabs? I have many pages which require different amount of nav items, but when I try to duplicate one of the nav items on a child component, it duplicates it outside the nav menu (hence no auto-layout for the new item). I've solved it by adding many nav-items to the master nav component and hiding the ones I don't need on each scenario. Is there a better/cleaner way to do this?
Hey Chus, hiding unused elements is a great idea and one that we frequently recommend. The other thing you could do is create variants for various sizes "nav-4" for one with 4 items and "nav-6" for one with 6, for example. We have a tutorial for Variants on our channel in case you're new to variants!
You're welcome, Jami! We've got another auto layout video out later this week. If you subscribe to our channel, you'll get a notification when it's released!
I cant seem to get a component inside of another component by dragging it in. It always pops off to the side but not into the other frame. Do I need more than one thing inside the thing in order for the draggy thing to work? lol
I’ve found that it only works if you drag the component from the Assets menu straight to the frame. If you move a component that’s already on the board, it will just try to add it on top or behind it.
Hey all, I got lost at the Avatar portion of this. I didn't know how to publish the Tripma library (which you'll need for the avatar). It's easy. click duplicate at the top right of the tripma design set (the link provided by "Tripma Design File" in the youtube video above. Then, open the design set in figma (clicking on recent helps me find the file sometimes). Then, once in the Tripma Design File, click on "Assets" then on the little icon that looks like an open book. In the pop-up window, click on publish library and viola! You are sorted.
Hi Emmanuel, at 0:37 we've moved the component from the "Designs" page to the "Local component" page. To do that, right click to open the menu, hover over to the "move to page" option, and select the "Local component" page. Hope this helps!
Bruhhh......i sat here trying to figure out how the hell do you delete it and while it remains in the asset panel ......after a solid 20 min and putting the video to 0.25 i realized you had a page called Components ....pff
I tried to replicate but i couldn't completely. And it's just frustrating. Why is this program so unintuitive. I opened Adobe XD for the first time, the other day and i managed to make something without any tutorial, i just figured it out.
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about auto layout in Figma: help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design"
Petitioning for an updated version :)
Man, after spending hours trying to figure this auto layout feature out, I finally come to an understanding. I'm fairly new to figma and design, and this video is super duper valuable. Though I've watched it more than 10 times, but now I'm starting to get confident. I appreciate the upload guys.
Awesome, powerful, and easy to use functionality-thanks! Quick note: from a beginner's perspective, it feels like you skipped some important steps starting at 0:37 .
WHAT! That 0% opacity/toggle layer visibility trick to hide items is genius! I hadn't thought of simply making a component completely transparent to make it disappear while retaining the size and shape 🤯
Thank you, thank you, thank you!
Glad you liked that tip, Sergio!
We announced some new updates for auto layout at #config2022.
To learn more, check out our new auto layout tutorial here: ua-cam.com/video/floQKLsWAy4/v-deo.html
Hey @Figma What if I want the nav links in center? Then what shuld I do? Thnx
Can you update the video or make a new one, things look completely different here in 2023, hope for the best
I switched to Figma a year ago. That was a good decision :)
auto layout just changed my life so much, love u figma
Glad to hear it, Santi! Don't forget to subscribe to the channel to get notified when we post more auto layout content!
Thank you so much for this useful and practical tutorial, Ive learned a lot, auto layout feature really makes life so much easier !!!
You're welcome, Stephen! Auto layout is probably my favorite feature, and couldn't agree more!
@5:40 'space between' is no longer listed as one of the options. You'll need to double-click on the center row of the alignment selector.
Hello! With the new auto layout updates, we've moved the spacing mode options under the Gap between items dropdown menu. For space-between, type or choose "Auto". For packed, enter a number.
LORD THANK YOU
@@Figma This new update has been giving me so many headaches
@@adrianozuna875 this is surprisingly not UX friendly lol. I have litteraly spent +5hrs trying to figure out this option (or the lack of). I know we are supposed to know every single updates but come on figma what the heck lol
@@Figma Personally i cant find packed/space between anywhere. I had to use the double click in the grid which is so obscure i would never have found it.
Dude, this is the only video that works. Thanks for posting!
Amazing. I bought courses on Udemy which didn't even help. This is gold!
all these shortcuts are so powerful
Glad you liked the shortcuts, Akshay! We've got another Auto Layout video out later this week. Be sure to subscribe to be notified when it's out.
Once I've turned the entire nav into a component, and I've added the new menu component into my new design project file, I cannot utilise Auto Layout anymore. For example, I can't add a new 'list item' component into the menu, or add another button into it. Is this normal?
Loved it!! I had to play it on 75% speed, but learned tons! And thank you for the source file as I used it to grab the avatar to practice.
Lol. I went slower. I kept pausing it. xD
Awesome and Impact Tutorials ....Neat and Clean Explanation👋👋👋
I love the auto-layout feature, but I wish I can change default alignment settings. I don't like it to be the top left instead I want centre centre. Thanks, for this super useful and powerful feature.
This is great feedback, I've definitely wanted the same in the past, and will pass your feedback along! If you haven't already, you can join our new support forum at forum.figma.com to discuss feature requests and more!
Just started using Figma. Mindblowing app!!!
amazing, finally! love figma. though without auto layout it used to be a mess with nested objects which now can be done by using just one or a few
We need the next chapter of this serie !!!! :)
Hey Giovanni, next video is out tomorrow morning (Pacific time)!
Very cool, it would be great to see your next video, also would like to see how it handles bottom part of website (footer)
Thanks for the feedback! The footer is in the plan to cover in a future episode (not the next one).
Hi, Thanks for the video. I am actually new. I tried to change the frame to Ipad Mini and it worked But When I change to Iphone sizes it got messed up... Why? Shouldn't it be responsive? Or Am I missing something? 😁
I had to watch this twice BUT I DID IT! lol thank you!
This is a great tutorial. Thank you!!! The background music is distracting and definitely not needed though.
awesome. I really love this. kindly discuss next how a transition splash screen works
Hi. It may be a dumb question but I don't really get why it's necessary to turn the List item text layout into an auto layout before creating a nav menu auto layout.
What would have been the problem in using 3 usual text layouts to make a nav menu auto layout, please?
I have a question please. So say I want to have a logo and menu / list items same as here in this tutorial. But I want the menu items to be centred. If I remove the option of ''space between'' and set a fixed distance between logo and menu items , than whenever I resize the frame the menu items keep centred but the logo on the left disappears. How could I fix that and instead also keep logo in place?
Wow I never noticed there is a 'space between' option, thank you
Would have been great if you showed how it could be responsive and change to a Mobile size nav menu with the nav menu icon of (3 stacked horizontal lines).
Also, I am trying to drag my button into the nav menu, but it's not adding it to the nav menu like it did in the video. I'm sure. a lot with Figma has changed in over 2 years, is there something I am suppose to be doing that varies from this video in 2023?
Thank you for this, incredibly helpful! 💙
Having the same issue over here!
At 6.04, how are you getting 'move to page - local components', as I am not getting it. I tried clicking the right mouse click/ left mouse click on the frame or frame heading, I get the rest but just not the move to page? Please help
Excellent Figma #autolayout tutorial for nav! I think I can figure out how to simulate 3 column list items with auto layout ... off I go to try it!
This is super helpful!
Where's the next one where you link it and make hover buttons?
Also I tried to make an angled button and auto layout doesn't work for this.
Good video! very useful! But, once I have done all the steps, how can I apply a "Hover" effect to the buttons?
I think that is a step in prototyping stage once you create the component.
What if I want the nav links in center? Then what shuld I do? Pls reply. Thnx
I kept pressing "0" and it kept restarting my UA-cam video... -___-
Ideas what to cover next: tables, complex vertical menus, tabs, cards, rich text pages, banners, sliders. Thank you for sharing with us!
Great ideas, doge! We have a video on cards coming out next week! And we'd love to do tables soon. We'll put these other ideas on the list, too.
Thank you Figma! Great video :)
Hands down Figma :)
for @5:30 if you are recently watching it,
then in updated you don't have space between as written text, it will this way " ]|[ "(set it to auto to make it resposnsive)
Lifesaver. Thanks for commenting this. Didn't think to type "auto" there.
The feature for Hug has been relocated under Frame section.
Ok so.. I feel dumb because this was a bit difficult for me. I'm super new to Figma. Why doesn't my button automatically make space/ resize in the Nave menu when I drag the button component in between the Nav button component? I've rewatched the video many times...
Not able to make it responsive. 😢
i think this is text link not button because when hovering the cursor did not change to hand cursor?
I created my own avatar and I couldn't get it to settle into the Nav Menu as the Button did. I added auto-layout to the avatar and made it into a component so I'm not sure why it wouldn't insert into the Nav Menu component. Any advice?
Hi, is your nav menu the main component or an instance of a component? Only a master component can be edited, while an instance can only allow overriding properties such as colors, opacity, and text content.
Why are u turning a component into a component? Didn't that used to be a component in a frame inside a frame that was nested outside the component that held auto layout outside the first component, that in turn was a frame that contained the elements? Or should I just head back to XD...
5:05 i am following this tutorial and there is no dropdown to select between packed and space-between. Auto layout section looks a little bit different. Where now can I find this dropdown?
Hello! With the new auto layout updates, we've moved the spacing mode options under the Gap between items dropdown menu. For space-between, type or choose "Auto".
@@Figmathank you
This was so incredible
Glad you thought so, Wesley! We're working on more auto layout content and have a new video dropping later this week. Subscribe to the channel so you get a notification when it's out.
The best tutorial for it!
What if I want logo in navigation pinned to left and the nav menu centered instead of pinned right?
What if I want the active state to have an underline instead of a just a color change to the text or background of the nav item?
I really like this feature and tutorial, however I have a question about it. I've made a mobile navbar with this auto layout in auto layout method, which has a variant too (dark mode) and these are also main components. I forgot to set this "left and right" constraint on them and already copied instances on many-many frames. So I thought I just change the constraints on my main components and it will change it automatically on all the instances, but no. Why is that? Why my changes on the constraints of main components not appear on the instances? And is there a quick solution to fix my mistake, or I have to copy and paste to replace all my instances?
hi, thank you very much for this helpful tutorial. but at minute 6.45 the "constraint and resize" menu appears different, both in the web browser version and in the app version (Mac use). In fact, not only do I not find the items indicated in the tutorial, but I also can't get the dynamic resizing of the main Frame in which the component is inserted ... I don't know if it's me who's wrong, or it's a question of different versions of Figma
Hello Stefano, we've updated the auto layout features last month and moved the resizing options to the top of the panel. You can learn more about the new auto layout updates in this new tutorial: ua-cam.com/video/floQKLsWAy4/v-deo.html
@@Figma thank you very very much 🥰🙏🙏🙏
Perfect, tnx.
Does anyone have the time stamp to a new video with the update on the resizing? I'm at 4:25 in this video, and the resizing isn't an option in Figma. I'm afraid I'm lost now.
Update: The fixed width option is now in the first palette under "Frame" below width, and the default is hug.
Hi Figma-team, I missed the major part of your last event ""Figma like the pros: Tips and tricks from the team that builds Figma", when will this be available online?
Hey Edward, it's live here! ua-cam.com/video/sCRYJdKoaxE/v-deo.html&lc=UgyYGf8yQmTlNv1ys_54AaABAg
Awesome!
I don't know why I don't see the "move to page" when I right-click the component. I try to delete the component and it was deleted in assets also
maybe ur already on the only page you have? do you have r than one page?
plz mention Windows shortcut along with Mac in last part of video.
i think something is wrong with the the design File link, it's not opening
Awesome... Thx Figma... 🙏
You're welcome, Saddam!
Figma is great, really
OK, this looks like a menu bar for web development. If so, how do I put this on my webpage?
For Space Between just select the Alignment Box and press X.
Thanks, this is amazing
Very nice, but… what about prototype? Now, the whole thing is a huge button???
Where do I find local components to move it to? ( 0:36 ) ???
i was waiting for this one.
Amazing! Thank you!
The 1st minute is so confusing... why does your instances NOT havea drop down like mine?
Awesome
What would be the best way to use this for tabs? I have many pages which require different amount of nav items, but when I try to duplicate one of the nav items on a child component, it duplicates it outside the nav menu (hence no auto-layout for the new item). I've solved it by adding many nav-items to the master nav component and hiding the ones I don't need on each scenario. Is there a better/cleaner way to do this?
Hey Chus, hiding unused elements is a great idea and one that we frequently recommend. The other thing you could do is create variants for various sizes "nav-4" for one with 4 items and "nav-6" for one with 6, for example. We have a tutorial for Variants on our channel in case you're new to variants!
@@Figma Legends! Thanks for the reply
love this.. thanks
You're welcome, Jami! We've got another auto layout video out later this week. If you subscribe to our channel, you'll get a notification when it's released!
NOICE
I cant seem to get a component inside of another component by dragging it in. It always pops off to the side but not into the other frame. Do I need more than one thing inside the thing in order for the draggy thing to work? lol
I’ve found that it only works if you drag the component from the Assets menu straight to the frame. If you move a component that’s already on the board, it will just try to add it on top or behind it.
@@brentaltm Thank you so much!
I can't find the 'space between' drop down in my screen.
thank you!
auto-layout is best
Totally agree!
Very useful . Thanks for your tutorial ^^
Very helpful ❤️
Glad you found it helpful, Shumit!
Amazing
How to resize menu? there is no possibility to do that now
can someone please tell me where can i get move to page?
Nice
nice
Hey all, I got lost at the Avatar portion of this. I didn't know how to publish the Tripma library (which you'll need for the avatar). It's easy. click duplicate at the top right of the tripma design set (the link provided by "Tripma Design File" in the youtube video above. Then, open the design set in figma (clicking on recent helps me find the file sometimes). Then, once in the Tripma Design File, click on "Assets" then on the little icon that looks like an open book. In the pop-up window, click on publish library and viola! You are sorted.
i cançt see the option move to page, any help?
this is awesome
Glad you liked it, Marlon! We've got another auto layout video out next week so be sure to subscribe so you get notified when it's published!
Woaaaaaah 😍
thanks lot...
I did not find the constrain panel. :(
i dont see move to page in my figma?? 00:36
2:00 How to show up AUTO LAYOUT ALIGNMENT? Thanh you
❤️
2:45 min: I need to tap: Shift + 00 twice to hide and Shift + 0 to show a layer on the browser.
Hey Bappy, good catch! There is a preference for use number keys for opacity in the menu which can adjust this behavior.
Not understanding the auto-layout feature in the past is one of my biggest regrets when using Figma.
what just happened at 0:37??? moved so quick and i can't seem to follow even after replay! Good video though!
Hi Emmanuel, at 0:37 we've moved the component from the "Designs" page to the "Local component" page. To do that, right click to open the menu, hover over to the "move to page" option, and select the "Local component" page. Hope this helps!
I wish for RTL (Arabic language) support soon
Bruhhh......i sat here trying to figure out how the hell do you delete it and while it remains in the asset panel ......after a solid 20 min and putting the video to 0.25 i realized you had a page called Components ....pff
I tried to replicate but i couldn't completely. And it's just frustrating. Why is this program so unintuitive. I opened Adobe XD for the first time, the other day and i managed to make something without any tutorial, i just figured it out.
👍👍👍