Figma is free to use. Sign up here: https://bit.ly/3msp0OV
We’ve announced some new updates on auto layout at Config 2022, including negative spacing, absolute position, and more! In this tutorial, we’ll walk you through what’s new and what’s changed in auto layout.
Play with auto layout with our community files: https://www.figma.com/community/file/784448220678228461
Learn more about auto layout on our Help Center: https://bit.ly/3MZRhtp
Check out our previous auto layout video tutorials:
– Auto layout review card iterations: https://youtu.be/q2h72oKSjcA
– Card component with auto layout: https://youtu.be/WuKnJFxrxNg
– Auto layout navigation menu: https://youtu.be/bh98SF7OjUk
– Auto layout button: https://youtu.be/PNJxeD29ZTg
00:00 Intro
00:15 What’s new in auto layout
00:30 New to auto layout? Check out our previous tutorials
01:00 Link to playground file
01:06 Tutorial overview
01:59 Update to layer ordering
02:33 Negative spacing
03:00 Canvas stacking order
04:10 Text baseline alignment
05:21 Update to resizing options
06:00 Canvas controls
06:52 Update to padding and alignment controls
07:46 Absolute position
09:26 Tip for updating resizing options
10:52 Tip for adjusting spacing mode
12:42 Strokes occupy space
13:40 Absolute position Bonus
14:33 Use the card design for the UI of the mobile app
15:09 Recap
#Figma #Config #Config2022 #FigJam #Tutorial #NothingGreatIsMadeAlone
Music:
Underground Stars by Loxbeats https://spoti.fi/34tPBBO
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/underground-stars
Music promoted by Audio Library https://youtu.be/vpJDMD2EzkA
source
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: https://bit.ly/3MnkfUf
I love you Figma ❤
Nice work again Figma, keep growing!
Anybody knows the tools used to produce smooth looking tutorial videos like this? It is just the likes of Final Cut Pro, is is there something more specialized for this kind of task?
hell mother fucking yes. thank for finally adding reversed ordering and negative spacing
but… Figma prototyping is still: Click —> LOADING Make coffee –> Still loading –> Prototype ready. Please fix
Thats just the final deathblow for Sketch … 😇
Also, huge performance improvements. Feels so lightweight even on my old gen 3 intel i5.
Figma is now so ahead of the pack, it just does not make sense why anyone would have to use any other prototyping tool
Been seeking to understand auto-layout, this video does justice to my cravings. Thank you Figma.
What a time to be alive
In the end you created a component and then made variants of it for different colors. but then – if u change the avatar style or font u need to change it in all variants…
Next feature request on the auto layout – allow different/individual spacing between items within auto-layout similar to Stack feature of Adobe XD.
This update is mind-blowing. Figma is now invincible. 🤩
Magic.
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!
such amazing improvement!
off topic but does this girl have instagram bc her voice is so hot
Why still no max-width feature?
wow… no text size control like media queries ??
Amazing! Figma always great <3
This is dope
Thank you figma for this amazing updates !!! 🔥🙂
AdobeXD is now left farther in the dust. I can barely see it now!
"The chevron is excluded from the auto-layout flow, and ignored by its siblings" 🙁 me irl
This was so satisfying to watch.
Wow. It's almost as if we (the users) are defining the Figma product roadmap.
Beautiful. Could some kind of flex-wrap be useful on auto-layout elements?
this is by far the only software in the world that if I were asked how likely I'll recommend it to others on a scale of 1 to 10, I'll give a 10 without hesitation. I hope figma will continue to be so exceptionally great after it dominates the entire prototyping market, cuz I definitely think it will.
How did you mask the list when dropping into the page mock at 15:00?
Great upgrades. The absolute position is huge and very welcome!
Auto-layout has always been badass, but this update makes it even more cooler. It was possible to achieve end result but with a lot of hacks (retrospectively looking at new approach). This would make the workflow of creating such experiences lot more natural.
Still no repeat grid. What a shame
Finally the absolute position, thnks Figma
All updates are amazing!!! But, the absolute positioning is the best 🙂 Thank you!