"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"
What an INCREDIBLE set of features man. I am so hyped. I am legit so so excited. I'm just sitting in my room feeling all excited but I dunno who to tell because my friends aren't designers so they can never know how epic this is
Absolute position is really game changer! I will be very happy without 0.001 px height frames. Ty so much team ❤️ Omg bonus is also soo good. I thought you will add rectangle to frame 2 (text's parent frame) and change all paddings but with absolute position its way easier😍
I'm not that stoked. It should be a sticky element and fixed. Just as easy as adding a specific coordinate to the element and pin it there. Not all this back and forth adjusting with parameters of the other text element etc. It's quirky at best.
Great updates! It would be great in the next update if Figma would add support for independent border control (turn off any border, change color, etc).
Hello, we announced the new individual stroke feature at Config this morning! Check out this help center article to learn more: help.figma.com/hc/en-us/articles/360049283914#individual
I've only just started dabbling in Figma and I only wished i had this available when i first started making web designs back in 2000's, it's now taking over my Photoshop workflow. Great job guys, truly is the best software at the moment!
I wish the company I work for put 10% of the effort you guys put into listening to the user feedback and these educational videos. Really well done, I am amazed (and I use that word very sparingly).
When I absolute position a shape, I hope its X,Y value can start from the top left corner of auto layout frame instead of the canvas, that way it feels more like CSS
Excellent! just one thing, in the padding where you have distributed the vertical and horizontal and for all sides, we need to press a key(separate for MAC and Windows), another option could be added for all sides, like horizontal and vertical (if possible) :)
great updates, I hope if you could add a scroll trigger for more precise animations. I remember my designer friend ask about this feature and confuse it is not already exist.
These upgrades are superb! Thanks a ton Figma Team! But why I cannot see Fill Container in Hug Contents dropdown? it's only showing Fixed Width and Hug Contents. Am I missing something?
Hi Arpita, "Fill container" will only appear when you select the children of a auto layout frame. The parent frame will only have Hug contents and FIxed width options. Hope this helps!
At 14:25 is there any way to make 'Frame 1' adapt its size so it exactly fits the new card size (since half of the new indicator sits outside 'Frame 1')
Overflowing from container in auto layout .... Hope someone could help. Started to delve a bit deeper into auto layout and I can't seem to get my head around why when I drag the bottom of the frame up my content overflows the frame. (see screen shot.) Everything in on fill container, my frame is on fixed height and hug contents but goes to fixed width when i drag up. This is not on a desktop or mobile fram it is built purley in an auto layout frame. (Hope all that makes sense.
Hi Raza, the chevron icon should be included in the playground file! Check the "Task card tutorial assets" frame in the file for all the assets we used in the tutorial.
Big up to Figma for this massive update. Absolute positioning is sick but In the instance of adding the chevron next to the title in a card at 7:38 I would rather do that with putting the two in an horizontal auto layout and and set it to fill container, it would've been perfect to show off text baseline alignment there, it's so powerful together.
I am floored by how well you're integrating user feedback into your product improvement roadmap. All of these features are extremely well-received and are essentially fixing the small-but-nonetheless-imperfect issues I had creating anything in Figma. Hats off to all of you - nailed it.
Great! But this specific example with chevron raises some questions. This one could actually be done before the updates, using a nested Auto Layout frame with a header and a chevron.
Great observation! For this example we wanted the design structure to match how the development team would structure the component. Depending on your needs there might be other options for you though! :) Stay tuned to the end of the video for a bonus example using absolute positioning. We’re excited to see how you will use this feature!
I did the same with the Indicator. Very many nestings! But it worked. The only problem was that if you changed something in a nesting, all the other properties changed as well. Again and again check everything whether fixed or fill container or huged ... oh man 🙈
02:33 Negative spacing - yes, we need it so much. Great! 03:00 Canvas stacking order - 👍 04:10 Text baseline alignment - yes, wow👏 finally. 05:21 Resizing options- I coundn't find it🤔 Thats why I am whatching this Draging Shift + opt, Cmd - for all 7:46 Absolute position - Oooh!💃🏻 The rest of it I need to try
The shadow of the card goes beyond the container and if, for example, we want to align these cards in the center, or have left and right margins 16 px, we will not be able to do this. Just as a stroke can be included / excluded, maybe it can be something similar for the shadow.
Love the new Auto Layout update! I would love to see a flex wrap type of feature for Auto Layout :) I feel like that is one of the crucial things that is still missing. I really like the new updates though!
Great update. Love negative spacing and absolute positioning. But I feel like the positioning of the spacing control in the side bar is a step back. It was visually easier to grasp when the values are organized around a box like it was before. Similar to browser inspectors or tools like webflow.
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.
"under the Gap between items dropdown menu." I don't understand where the "spacing mode" is now (I'm not a native speaker). You said : 1. the "spacing mode" is located underneath a space/a spot ; 2. the said spot/space is located between two things. 3. the first thing is the "items dropdown menu" 4. the second thing is "????". NB : what is the "items dropdown menu", by the way ? Where it is ? • Please, help me. Post a screeshot with annotations or something. • Looking for a solution for days, and I'm desperate.
This is absolutely amazing!! I love how you make our experience more and more better each time! I love figma. I have one suggestion. What if there could be 2 dimensional auto layout? Just like CSS grid. It would be cool!
I love you guys! ❤️ You never disappoint with the features you bring in. Truly amazing updates! Thank you for being one of those few companies who actually listen to their users :)
Join Miggi Cardona and Tom Lowry this Thursday (May 19) for a Figma office hours livestream to learn how to use the new properties panel and on-screen controls. They'll also showcase new layout features like absolute positioning & negative spacing. Register: bit.ly/3MnkfUf
hi figma, can you help me? When I creat new Avata variant and change stroke outside , I choose Stroke values inclue i dont see change of variant avata like video, I made wrong??
!!! Why don't you add a function to round the corners by hovering over the corner of the frame, in the same way as auto layout padding? (!!! Почему бы вам не добавить функцию скругление углов, наводя курсор на угол фрейма, по такому же принципу как отступы auto layout?)
And fix the smart animation. And then when you add a shadow, artifacts appear! (И исправить умную анимацию. А то при добавлении тени появляются артефакты!)
I love all of the new features! Only one thing i'm having problem with is applying Text Property. After clicking on text layer in my component it only allows to add Boolean Property. I've seen some comments with people having same issue.
This Absolute Position thing is king! Now I can create a complex shadows underneath the button, using some Auto Layout magic and Constraints. Can't wait to test it out :)
You must be joking, this new update just broke all my previous auto layouts. You had one cool working feature, you hade to mess it up and I'm so pissed right now. FIX THE OLD AUTO LAYOUTS!
The best software design in the world. FIGMA! We love you. It is time to combine data driven designs. And auto publish function. For example we will first finish the design. And second step will be converting static data to Google Spreadsheet live data. And final step will be publishing HTML and make the design online. Maybe post to FTP drive! It will be fantastic !!! The final user only change google data and the design will be always fresh on the internet!
Yes, autolayout is of course a great feature. Love it. But is also partly terrible in the application. AI (!) is missing. Because if you have put together a combination of text and image and list, and you still have to add an object image (or something else) then all "responsive" behavior is gone.... Countless clicks are necessary to adjust everything as smoothly as before. This costs time Very!!! a lot of time
thanks for this video. One thing that changed is there is no "Fill" option on an auto layout. So when creating a table composed of columns (each column is a 'Fill' auto-layout), before I could resize the table and the columns would resize with it. Now seems it's impossible.
Having trouble with the 'Align text baseline' not aligning.. (text baseline aligns to bounding box of the icon, not the icon itself) anyone that knows how to do make them align?
I don't get it, when I hit the text alignment check mark it gets misaligned, not aligned. If they were aligned in the first place they shouldn't be misaligned, they should just stay unchanged. Looks like a classic Figma bug. One of many I may add. And moving the resizing options wasn't a smart move. They are now out of auto layout context and that makes for a longer interaction. It's breaking a mental model. Hm, dear Figma. Please iterate by commons sense and don't change things just for the case of changing things. Sometimes things are best left alone, this is one of those times.
"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"
What an INCREDIBLE set of features man. I am so hyped. I am legit so so excited. I'm just sitting in my room feeling all excited but I dunno who to tell because my friends aren't designers so they can never know how epic this is
ruclips.net/video/VgsD8aZHyuk/видео.html
So relatable.
Yea right?! I can't wait start using this, it's like somone gave me a gift or something...
@@switmer777 sadge
Exatly.
I'm glad you're one of the few software companies actually hearing its users. These upgrades are great!
ruclips.net/video/_7N1yR8nsl4/видео.html
Absolute position is really game changer! I will be very happy without 0.001 px height frames. Ty so much team ❤️
Omg bonus is also soo good. I thought you will add rectangle to frame 2 (text's parent frame) and change all paddings but with absolute position its way easier😍
ruclips.net/video/_7N1yR8nsl4/видео.html
I'm not that stoked. It should be a sticky element and fixed. Just as easy as adding a specific coordinate to the element and pin it there. Not all this back and forth adjusting with parameters of the other text element etc. It's quirky at best.
Yes true @Onur Aydemir. Finally this has come, Thanks Figma
Love the software that hears the users struggle and always makes some improvement. Good Job, Figma!!!
Auto layout is already a game changer. These updates are like answered prayers. All I can say is thank you so very much!!!
I'm in love with Figma. Hands down, the best designing tool ever!
This is awesome! I love the absolute position feature, I don't need to hack it to make it work anymore. Thanks, best design tool ever!
Great updates! It would be great in the next update if Figma would add support for independent border control (turn off any border, change color, etc).
Hello, we announced the new individual stroke feature at Config this morning! Check out this help center article to learn more: help.figma.com/hc/en-us/articles/360049283914#individual
@@ArthurATube Seems they thought of that, too! ruclips.net/video/JUTFghsG8nI/видео.html
OMG! I LOVE EVERY SINGLE THING ABOUT THIS UPDATE!! THANK YOUUUUUU!!!
I've only just started dabbling in Figma and I only wished i had this available when i first started making web designs back in 2000's, it's now taking over my Photoshop workflow. Great job guys, truly is the best software at the moment!
Amazing! All updates will improve my work flow.
Now it's just "fixed ratio" left. Then I'm happy :)
I wish the company I work for put 10% of the effort you guys put into listening to the user feedback and these educational videos. Really well done, I am amazed (and I use that word very sparingly).
Figma’s best version so far … so glad 🤩
Oh man, almost each of these updates addressed a challenge I've faced at some point or the other in my design workflow! Great stuff! :D
You've taken a defining feature of Figma and made it so much more powerful. Thank you!
Absolute positioning is the one I have been waiting for so long!!!
All updates are amazing!!! But, the absolute positioning is the best :) Thank you!
When I absolute position a shape, I hope its X,Y value can start from the top left corner of auto layout frame instead of the canvas, that way it feels more like CSS
These updates are going to be amazing :') all of them are exactly what I was looking for! Thank you Figma Team!🤩
These are awesome features! I love you Figma's creators! ❤🔥
Like the video even before watch it 😂
Cause I know it's gonna be awesome!
That absolute position feature is totally what I need in auto layout
Lovely updates! 👏
This will definitely speed up my work rate. 👌
Excellent! just one thing, in the padding where you have distributed the vertical and horizontal and for all sides, we need to press a key(separate for MAC and Windows), another option could be added for all sides, like horizontal and vertical (if possible) :)
Figma is getting more and more amazing!
great updates, I hope if you could add a scroll trigger for more precise animations.
I remember my designer friend ask about this feature and confuse it is not already exist.
Фигма поразительна. Такого удобного инструмента просто нельзя представить. Аплодисменты стоя.
Thank you, I love it. Let's hope Adobe doesn't mess anything up.
I LOVE YOUUU FIGMAAA!!!! :) Nice work Guys!
I just started learning UX and this feature is a bit complicated for me, especially the hugging and constrains, hope I will get it soon.
Another game changer 🎉🙌🏻
Much needed features figma
Love the absolute positioning..
Thanks a lot! The only issue I've noticed is that the positioning doesn't work in layout in Safari browser
LET'S GOOOOOOOO! Thanks so much!
Amazing updates! 🥳 thank you
also Dark theme finally come, thx you!
Exciting!
This is why I left invison and adobe... Great work these are critical updates.
WOW!!!!! Incredible!
These upgrades are superb! Thanks a ton Figma Team! But why I cannot see Fill Container in Hug Contents dropdown? it's only showing Fixed Width and Hug Contents. Am I missing something?
Hi Arpita, "Fill container" will only appear when you select the children of a auto layout frame. The parent frame will only have Hug contents and FIxed width options. Hope this helps!
Thanks, it worked! superb helpful!
Awesome! 😊
Figma, I love you.
Love this!!!!!!!!!!!!!!!!
It's like a total redesign!
LOVE IT!
At 14:25 is there any way to make 'Frame 1' adapt its size so it exactly fits the new card size (since half of the new indicator sits outside 'Frame 1')
Ohhhhhh myyyyy figmaaaaa!
next please add FLEX-WRAP
I'm happy 💜
HUGE oh my god!
And you don't have "Background blur" in the prototype when it's Overlay!
(И у вас не работает "Background blur" в прототипе когда это Overlay!)
This is dope
🎉🎉🎉
OMG! it was amazingggggg🤩🤩🤩🥲
Overflowing from container in auto layout
....
Hope someone could help. Started to delve a bit deeper into auto layout and I can't seem to get my head around why when I drag the bottom of the frame up my content overflows the frame. (see screen shot.) Everything in on fill container, my frame is on fixed height and hug contents but goes to fixed width when i drag up. This is not on a desktop or mobile fram it is built purley in an auto layout frame. (Hope all that makes sense.
When I include stroke to avatars auto-layout frame, nothing happens, can anybody help?
♥️ Figma >>>>> Adobe
4:56 The collapse button isn't in resource file
Hi Raza, the chevron icon should be included in the playground file! Check the "Task card tutorial assets" frame in the file for all the assets we used in the tutorial.
That's insane
Figma is becoming more and more a Visual CSS tool and it's awesome.
Riiight???? Been waiting for a tool like this forever.
This update is insane!
Everything, that I encountered and struggled with is now simple and easy!
Big up to Figma for this massive update. Absolute positioning is sick but In the instance of adding the chevron next to the title in a card at 7:38 I would rather do that with putting the two in an horizontal auto layout and and set it to fill container, it would've been perfect to show off text baseline alignment there, it's so powerful together.
I am floored by how well you're integrating user feedback into your product improvement roadmap. All of these features are extremely well-received and are essentially fixing the small-but-nonetheless-imperfect issues I had creating anything in Figma. Hats off to all of you - nailed it.
Great!
But this specific example with chevron raises some questions. This one could actually be done before the updates, using a nested Auto Layout frame with a header and a chevron.
Yeah, it wasn't the best example.
Great observation! For this example we wanted the design structure to match how the development team would structure the component. Depending on your needs there might be other options for you though! :) Stay tuned to the end of the video for a bonus example using absolute positioning. We’re excited to see how you will use this feature!
Thanks for asking this question. This was itching my brain. Now I can sleep happily. Great updates Figma! Thank you for being there for designers.
Yeah this confused me, but the example of the coloured tag at the end of the video sums it up pretty well. Super useful feature!
I did the same with the Indicator. Very many nestings! But it worked.
The only problem was that if you changed something in a nesting, all the other properties changed as well. Again and again check everything whether fixed or fill container or huged ... oh man 🙈
Game changer updates, thx Figma team.
02:33 Negative spacing - yes, we need it so much. Great!
03:00 Canvas stacking order - 👍
04:10 Text baseline alignment - yes, wow👏 finally.
05:21 Resizing options- I coundn't find it🤔 Thats why I am whatching this
Draging Shift + opt, Cmd - for all
7:46 Absolute position - Oooh!💃🏻
The rest of it I need to try
The shadow of the card goes beyond the container and if, for example, we want to align these cards in the center, or have left and right margins 16 px, we will not be able to do this. Just as a stroke can be included / excluded, maybe it can be something similar for the shadow.
Love the new Auto Layout update! I would love to see a flex wrap type of feature for Auto Layout :) I feel like that is one of the crucial things that is still missing. I really like the new updates though!
Awesome, No more 0.001 frames
Great update. Love negative spacing and absolute positioning. But I feel like the positioning of the spacing control in the side bar is a step back. It was visually easier to grasp when the values are organized around a box like it was before. Similar to browser inspectors or tools like webflow.
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.
This is exactly what I was looking for, thanks!
"under the Gap between items dropdown menu."
I don't understand where the "spacing mode" is now (I'm not a native speaker).
You said :
1. the "spacing mode" is located underneath a space/a spot ;
2. the said spot/space is located between two things.
3. the first thing is the "items dropdown menu"
4. the second thing is "????".
NB : what is the "items dropdown menu", by the way ?
Where it is ?
• Please, help me. Post a screeshot with annotations or something.
• Looking for a solution for days, and I'm desperate.
This is absolutely amazing!! I love how you make our experience more and more better each time! I love figma.
I have one suggestion. What if there could be 2 dimensional auto layout? Just like CSS grid. It would be cool!
Flexbox/CSS Grid behavior needed. I mean, items should move to the new line when hits the boundaries.
I love you guys! ❤️ You never disappoint with the features you bring in. Truly amazing updates! Thank you for being one of those few companies who actually listen to their users :)
Join Miggi Cardona and Tom Lowry this Thursday (May 19) for a Figma office hours livestream to learn how to use the new properties panel and on-screen controls. They'll also showcase new layout features like absolute positioning & negative spacing.
Register: bit.ly/3MnkfUf
hi figma, can you help me? When I creat new Avata variant and change stroke outside , I choose Stroke values inclue i dont see change of variant avata like video, I made wrong??
!!! Why don't you add a function to round the corners by hovering over the corner of the frame, in the same way as auto layout padding?
(!!! Почему бы вам не добавить функцию скругление углов, наводя курсор на угол фрейма, по такому же принципу как отступы auto layout?)
And fix the smart animation. And then when you add a shadow, artifacts appear!
(И исправить умную анимацию. А то при добавлении тени появляются артефакты!)
I LOVE IT!!!
I LOVE EVERYTHING ABOUT THIS CHANGE!!!
Great! But still waiting combination of autolayout with grids or adding persentage to autolayout
Thanks for listening to your users!! Could the next thing be to let us preview the fonts?
Finally. No more billion layer hacks to bypass bad auto layout restrictions.
It such amazing updates! big thanks for the @Figma teams!!
I love all of the new features! Only one thing i'm having problem with is applying Text Property. After clicking on text layer in my component it only allows to add Boolean Property. I've seen some comments with people having same issue.
I love you figma
The baseline alignment feature doesn't work the way you show in the video
same for me
@@r3dp1ll they still havent fixed that? :(
I'm literally screaming!!!
Use me as the "HUGE THANK YOU" button!!!
This Absolute Position thing is king! Now I can create a complex shadows underneath the button, using some Auto Layout magic and Constraints. Can't wait to test it out :)
Love the new updates so much! It's a lifesaver :)
Awesome, no more 0px frames😄
Finalllly!!! Love it.
That's awesome! You literally added all the things I needed for working with autolayouts
but... Figma prototyping is still: Click ---> LOADING *Make coffee* --> Still loading --> Prototype ready. Please fix
You must be joking, this new update just broke all my previous auto layouts. You had one cool working feature, you hade to mess it up and I'm so pissed right now. FIX THE OLD AUTO LAYOUTS!
That's fucking amazing. I LOVE YOU FIGMA! Peace of mind in every part of this feature release, thank you so much for everything you do
The best software design in the world. FIGMA! We love you.
It is time to combine data driven designs. And auto publish function.
For example we will first finish the design. And second step will be converting static data to Google Spreadsheet live data.
And final step will be publishing HTML and make the design online. Maybe post to FTP drive!
It will be fantastic !!!
The final user only change google data and the design will be always fresh on the internet!
Yes, autolayout is of course a great feature. Love it. But is also partly terrible in the application. AI (!) is missing. Because if you have put together a combination of text and image and list, and you still have to add an object image (or something else) then all "responsive" behavior is gone.... Countless clicks are necessary to adjust everything as smoothly as before. This costs time Very!!! a lot of time
thanks for this video. One thing that changed is there is no "Fill" option on an auto layout. So when creating a table composed of columns (each column is a 'Fill' auto-layout), before I could resize the table and the columns would resize with it. Now seems it's impossible.
Next feature request on the auto layout - allow different/individual spacing between items within auto-layout similar to Stack feature of Adobe XD.
Having trouble with the 'Align text baseline' not aligning.. (text baseline aligns to bounding box of the icon, not the icon itself) anyone that knows how to do make them align?
I don't get it, when I hit the text alignment check mark it gets misaligned, not aligned. If they were aligned in the first place they shouldn't be misaligned, they should just stay unchanged. Looks like a classic Figma bug. One of many I may add. And moving the resizing options wasn't a smart move. They are now out of auto layout context and that makes for a longer interaction. It's breaking a mental model. Hm, dear Figma. Please iterate by commons sense and don't change things just for the case of changing things. Sometimes things are best left alone, this is one of those times.