Learn how to use min and max values when working with the auto layout in your designs, with a bonus of updated text truncation and max lines feature for paragraph text.
Zander is showing how to quickly create a responsive card grid.
Designing responsive card grids in @figma, supafast! ⚡️ pic.twitter.com/4qj223lP2j
— Zander Whitehurst (@zander_supafast) June 27, 2023
Molly Hellmuth shares five updates you can make with the new min/max sizing and auto layout wrap that will make a big difference in your designs. Tip #5 on having text grow in both directions is my favorite!
⭐️Figma tip: 5 easy updates you can make with figma's new min/max sizing that will make a BIG difference in your designs!
— Molly Hellmuth (@molly_hellmuth) June 30, 2023
Especially when paired with auto layout wrap.. pic.twitter.com/W1bXfMS1mH
With the latest round of auto layout updates, learn how you can wrap objects to a new line, set minimum and maximum widths and heights, and truncate text based on a set number of lines.
Dylan’s recap of all the updates from the keynote, in a brand-new blog. “Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”
If you have time for only one thing this week, this should be it. First, Figma CEO Dylan Field introduces new features — variables, auto layout updates, and advanced prototyping. Then, CTO Kris Rasmussen talks about rethinking product building from the ground up and how the new Dev Mode is bringing design and engineering closer together. In the end, Dylan talks about file browser refresh, font previews, and what AI could look like in Figma — wrapping things up by announcing the acquisition of Diagram.
I watched every Config keynote over the years, and this year’s announcements were the most anticipated and ambitious ever. It’s incredible to see how Figma is growing in depth and breadth at the same time, now providing incredibly advanced tools while covering an entire product-building process from brainstorming to design to development. Exciting time to be a maker.
Jan Mraz with a short video showing a few Auto Layout tips. I keep forgetting that the canvas stacking option exists! No more weird hacks with rotating a container 180°.
Useful tips and tricks for Figma autolayout! 😍 pic.twitter.com/JtK1brNvLI
— Jan Mraz (@janm_uiux) June 2, 2023
Let Destroyer recursively detach instances, remove Auto Layouts, and detach Styles within your current selection so you can iterate faster. When working collaboratively and wishing to quickly try out an idea, it’s always a hassle to detach the component and remove Auto Layouts.
Learn how to build a dual range slider that is adjustable using Auto Layout so you don’t have to create a ton of variants to show different options.
Hold the Spacebar when moving an object to ignore Auto Layout.
🧙♀️ 11 second tip 🧙♀️
— Helena (@minor_axis) December 9, 2021
Ignore auto layout in Figma by pressing space bar as you drag an object. pic.twitter.com/fjUe8gcAAz
Danny Sapio shares some great Auto Layout tips and shortcuts that can speed up your work.
In this series for educators and students, Miggi introduces Auto Layout features and covers best practices and tips for designing layouts that can change with their content.
Seems like support for min/max width and height are coming to the Auto Layout! Previous leaks by Nima Owji included support for variable fonts and text baseline alignment, so the chance that this is really coming is pretty good!
#Figma is working on ADVANCED SIZING which allows you to set min/max width and height for the auto layout! pic.twitter.com/1MwwwjKcs4
— Nima Owji (@nima_owji) February 3, 2023
Well, now we all know how to refer to the Auto Layout alignment control.
In a call today someone called this a cracker and from now on this is the term I will be using when demoing Auto layout pic.twitter.com/FxPejtRFsw
— Ana Boyer (@_AnaBoyer) February 1, 2023
Joey Banks is back with a bit of advice on his new approach to using Auto Layout for building responsive components. “With my approach today, I first like to drag out an unfinished component instance and stretch it in bizarre and unexpected ways to see what happens. If I can make this component work as expected in the strangest sizes, I’ll feel confident that it’ll work for nearly all situations.”
MDS is killing it with a killer Auto Layout tutorial. Who cares if it’s a bit late for Halloween!
I made a killer auto layout tutorial for @figma. There are three critical things you need to understand in order to use it efficiently... pic.twitter.com/x17cnAg9az
— MDS (@mds) November 8, 2022
I found this discussion quite interesting and illustrative. Personally, I always use Auto Layout while working on semi-final designs, but it often gets in the way in the early stages and I resort to good old groups and frames. On a similar note, check out answers to Ridd’s impossible question on choosing between Auto Layout and components.
Miggi shows how to do hanging opening quotes with Auto Layout.
A pet peeve of mine is seeing opening quotes set within a block of type. Using Auto layout and absolute position, you, too can make better quote blocks in @figma. #figmatip
— miggi but spooky 👻 (@miggi) October 18, 2022
More about optical margin alignment: https://t.co/dSTmOWEgUy
& in CSS: https://t.co/dCBrtS8lFx pic.twitter.com/kfMQ6sJ5mE
Learn everything you need to know to master the latest version of Auto Layout and optimize your work.
An interesting application of smart Auto Layout hacks to create fully responsive chart components.