Molly shows how to simplify a common list design element by using the new Grids instead of nesting vertical Auto Layout stacks inside horizontal rows.

As Christine Vallaure writes, ​“if you want to master Figma’s new Grid, you need to know how CSS Grid works.” In this in-depth guide, she explains how both of them work and shows where Figma ends and the browser takes over to do the heavy lifting, so you don’t miss out on the flexibility, responsiveness, and layout power that only the browser can fully deliver.

“Grid is a new auto layout option that makes it easier to design responsive, flexible layouts. In this playground, you’ll learn how to use rows, columns, span, and more to create everything from galleries to bento boxes to card layouts.”

Luis shows how to design a data table with grids. This is one of the grid applications I’m most excited about. Notice how he adds notes with the new annotations tool as well — I’ve been using it more and more for notes lately, while keeping comments limited to discussions.

A help article on the new grid flow for Auto Layout.

Molly Hellmuth with a tip on using the ​“Ignore auto layout” feature to add a scrollbar to the menu, among other things. It’s one of my favorite features, making it easy to preserve Auto Layout while making designs more realistic and interesting.

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.