Chuck Rice explains his Flexbox imitation technique combining the approach from the Breakpoints plugin with the updated Auto Layout. Pretty cool if you need to imitate the flex-wrap
CSS property.
That’s a pretty badass collection of shortcuts — I didn’t know most of them!
Neat shortcut: ⌘-click on the Auto Layout padding field to adjust all paddings.
Neat @figma easter egg: ⌘ + click in an auto-layout padding field to adjust all paddings. pic.twitter.com/UCt34URAqi
— Mordechai Hammer (@_mordechai) June 7, 2022
“Learn all about the redesigned Auto Layout. We’ll walk you through how to use the new properties panel and on-screen controls, as well as showcase the new layout features like absolute positioning, negative spacing, and more.”
Layout FM podcast host Rafa is joined by special guests Joel and Oscar from Figma to talk about their work designing AutoLayout V4.
Miggi shows how to make a reusable and flexible tooltip component set using Auto Layout, absolute positioning, constraints, and component properties.
Joey Banks creates a card layout similar to iOS’s Wallet app with negative values within an Auto Layout container.
I'm so happy that @figma finally allows for negative values within Auto Layout containers, which make card layouts, like those within iOS's Wallet app, really easy to create! ↔️ pic.twitter.com/InlupvM3Op
— Joey Banks (@joeyabanks) May 24, 2022
Miggi plays with component properties, Auto Layout slots method, and Interactive Components to make some fun modular content prototypes.
Cool minor improvement — default Auto Layout value now reflects the Big Nudge number instead of being hardcoded to 10 pixels. You can change it in the Preferences → Nudge amount.
Did the default values in Auto layout change to your nudge amount before or after @figma #Config2022? pic.twitter.com/1OWEQVsiRr
— Dan Eberhardt🏊🏻🚴🏻🏃🏻 (@incontrast) May 15, 2022
Miggie with a pro tip on Auto Layout — typing in “auto” as the spacing value will change the spacing mode from Packed to Space Between.
One more late night @figma auto layout tidbit.
— Miggi (@miggi) May 19, 2022
If you type in "auto" as the spacing value, it will change the behavior from packed, to space between! pic.twitter.com/rnW1oqoOPy
Molly Hellmuth discusses five major changes to the Auto Layout introduced at Config 2022.
Designers Joel Miller and Oscar Nilsson worked on the new Auto Layout together. In this thread, Joel talks about some of his favorite things about this release.
ICYMI, @oscrse and I talked about our design process behind the new version of Auto Layout! This project was all about the balance of complexity/simplicity and designing for the space between.
— Joel Miller (@joeltalksdesign) May 11, 2022
While you wait for the recording, here’s my top 5 highlights of Auto Layout in @figma pic.twitter.com/5LCYoUZcfK
”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.”
Hosts of the Design Details podcast, Brian Lovin and Marshall Bock, cover all of the exciting new releases from Config 2022 and do a deep dive into the new version of Auto Layout.
Anton Kuznetsov shares two workarounds for creating negative spacing with Auto Layout. The easy way is to use Space Between, but there are some limitations, so Anton offers using a frame as a wrapper.
Dan Hollick shares a few pros and cons of using Spacer components vs. Auto Layout.
Why do people use Spacer components?
— Dan Hollick 🇿🇦 (@DanHollick) January 26, 2022
Personally, I prefer using Auto Layout wrappers and controlling spacing with gaps but there might be a use case I'm overlooking?
Made some pros and cons below 👇 pic.twitter.com/uHHJndbRrn
Nice concept of what one of the features in Auto Layout 4 may be. I’d definitely love to see this!
A few good tips on using Auto Layout by Danny Sapio.
Molly shares a few takeaways from recreating a responsive Asana dashboard in Figma.
💡5 tips for designing a responsive dashboard in Figma
— Molly Hellmuth (@molly_hellmuth) November 23, 2021
Responsive design seems to be one of the trickier topics for my students so I made a project for them (Recreate the Asana Dashboard in Figma). Below are some of my favorite takeaways from the project. pic.twitter.com/RHtIRQnLIm
Danny Sapio is showing how Auto Layout can be used to create a scalable and flexible interface.