“Creating components with automated sizing behavior saves a lot of time during the process. They also let us think more like a developer that has to implement the real application. That is why it is essential to master Constraints and Auto Layout in Figma.”

Dennis Cortes goes over his approach to building scalable components in Figma using Variants, Variant Groups, and Auto Layout. This video touches on the basics, from definitions of each feature to more advanced methods of building out different types of variants in Figma.

Mariz brings a great point — the current implementation not only hides the values but also makes you click on another UI control to change them.

Interactive Components (currently in beta) now work with Auto Layout, and that opens doors for some fun interactions.

Danny Sapio shows how to create sliders and loading indicators with Auto Layout.

“In this Figma Tip, we create an Auto Layout chat bubble to be used in FigJam. Chat bubbles outlined in this tip and some additional Auto Layout notecards can be downloaded and reused from a community file.”

New short video from Figma:55 on using Auto Layout and Variants to make a table.

“In previous Auto Layout videos, we showed how to create an Auto Layout component from scratch with the end-product already in mind. But what if you’re still ideating and don’t know what the finished product will look like yet? Designing can be messy and unpredictable. But you can easily add auto layout at any point of this process.”

“How to move and place elements and objects over Auto layout elements and frames without placing inside of them. Spoiler alert: hold space bar while dragging them.”

I shared a tip on using 180° rotation to reverse layers order in an Auto Layout frame, so the first layer is top- or left-most.

Joey Banks shows the difference between the two Auto Layout modes.

A detailed guide to the latest version of Auto Layout.

Speaking of Auto Layout, this tweet by Rasmus Andersson (Figma’s Staff Designer in the past) and the following discussion in replies provides an interesting look into why the items in an Auto Layout go backward and why this probably won’t change soon.

Live-building Sign-in and Registration components for the official Tailwind UI Figma kits.

Joey Banks build a Segmented Control component using Auto Layout, Variants, and hidden layers.

“In this Figma Tip, learn to set up a 4px baseline grid using layout grids, and how to set offset values to your text blocks using auto layout to account for fonts’ different baselines and keep a consistent vertical rhythm in your designs.”

Just a few days ago, I tweeted that Auto Layout needs Styles, and now Pavel Laptev releases a plugin just for that! ​“The plugin brings an experience of Figma styles to the Auto Layout feature. You can make separate configurations of Auto Layouts, save and load them, lock or change at any time.”

A nice trick to work around some of Auto Layout’s limitations.

“Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we’ll teach you more advanced Auto Layout techniques to create a flexible card component for a trip planning website.”

A new tutorial from Blush, based on Pablo Stanley’s Figma Crash Course on YouTube. ​“Learn the basics of Figma’s new Auto Layout and speed up your creative workflow with this awesome feature.”