Joey Banks on creating responsive and robust components within Figma: ​“Creating a component in Figma is relatively easy. However, building a component that works well in various situations and for different screen widths and heights using tools like constraints and auto layout can be more challenging and intimidating. Let’s first talk about those tools and how they work within Figma, and I’ll share the techniques and practices that have helped me ensure I’m building reliable components for those depending on the system.”

A 7‑minute tutorial from Miggi on using the new Suggest Auto Layout and the AI features ​“Rewrite this,” ​“Replace content,” and ​“Rename layers.” 

A few ways to see the pixel values on Auto Layout frames by KC Oh.

Software Engineer Shirley Miao explains how the new ​“auto auto layout“ was built.

Jackie Chui, a Product Designer at Figma, shares a few more quality-of-life improvements to Auto Layout that the new Suggest Auto Layout feature might have outshined.

“We’ve updated Auto Layout to make it more predictable when you need it and easier to ignore when you don’t. Now, Figma can not only suggest when multiple frames of Auto Layout might be needed for a full design element, but also create those frames for you. This will save you time from having to apply it frame by frame within a design. Plus, you can hold Ctrl to ignore Auto Layout while dragging a design element into an Auto Layout frame to set an absolute position.” Try it out at the playground.

Checks out.

Christine Vallaure’s talk at last year’s SmashingConf on CSS Container Queries and how designers can tackle them using Figma. If videos are not your jam, see her article on Why UI designers should understand Flexbox and CSS Grid.

The beauty of Auto Layout in action by Dmitriy Bunin.

Another week, another topic for designers to argue about (even Figma had to chip in)! 100% agree with Yasir: ​“Designers skeptical about Figma’s Auto Layout probably haven’t tried coding their designs. Once you do, you’ll see everything in code is about stacks and Auto Layouts. It’s a basic principle, not a style choice.”

Christine Vallaure explains the basics of CSS Flexbox and how it translates to Figma’s Auto Layout. ​“Discover how to set up individual flex properties for items and explore the nesting capabilities of Flexbox. While Flexbox is great for component layout, CSS Grid offers more control for overall page layout. Find out how to use both in harmony for optimal design.”

Ana Boyer with a tutorial on how to create a range slider with Auto Layout.

Rogie with a mini-tutorial on making Mario Kart-inspired resizable buttons with fun shapes.

A smart way to utilize line-wrapping in Auto Layout to achieve word highlighting effect.

An in-depth walkthrough of how to use Figma’s Auto Layout to quickly add padding and alignment rules to standardize your design elements from the Noun Project.

Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.

Miggi shows how to make a notification badge that expands to fill its contents with Auto Layout.

Ozan Öztaskiran shows how to create responsive grids in 5 simple steps.

Miggi with a tip on using the new auto layout wrap to handle elements beyond just a single row. Love that Shift-A automatically puts elements into a wrapped auto layout when you have multiple rows of elements selected.

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.