In the first part, Rogie uses constraints and components to build navigation that scales from mobile to desktop. In the second part, he shows how to use Auto Layout to design flexible grids, hero, and card components that adapt to any browser size.

The team at Evil Martians shares how designers and engineers can speak the same language by using dynamic components built with Auto Layout. The article presents multiple techniques with good animated examples.

When you don’t use an Auto Layout, a Drop Shadow with blur set to zero may be a nice alternative.

“Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how to combine components, constraints, and Auto Layout for the best results.”

An interesting approach of using pre-defined spacer components and Auto Layout for managing space in design mockups.

Ryan Warner once again, this time at Egghead: ​“By adding auto-layout to our button component, we can change the text within the button while automatically maintaining consistent horizontal and vertical padding, just like we would in code.”

The link to a community project is in the replies.

Ramy Majouji, Product Designer at Glossier, and Joey Banks, Designer Advocate at Figma, show how they use Auto Layout and other features to speed workflows up.

Aleksei Kipin shows how to apply the Atomic Design approach to creating Figma components.

Joey Banks from Figma shows how he uses Auto Layout to generate previews of their newsletter template for both desktop and mobile.

Brian and Marshall discuss creating layouts with Sketch’s Smart Layout and Figma’s Auto Layout, and compare the experience with implementing layouts in CSS and SwiftUI.

Quick video showing real-life usage of Auto Layout in a few beautiful mockups.

Figma’s Director of Product wrote a detailed explanation of why layers are ordered backward inside an Auto Layout frame. This thread is a good illustration of how many factors have to be considered even for a seemingly simple design choice.

An interesting observation that what we need next is states, styles groups, and variables. Yes, please!

Auto Layout can be used for so much more than just buttons and lists. This post shows how useful it is for working with copy and images.

Not sure if this post should be called ​“quick tips” as it mostly surfaces unresolved problems, but it’s an interesting look at the limitations of the current implementation.

An in-depth tutorial covering 3 common use cases for Auto Layout — button with an icon, content card, and a chat log screen.

It’s finally here! 🙌 The biggest news of the last week is a long-awaited release of Auto Layout. When adding it to a frame, the items inside are stacked next to each other vertically or horizontally. The frame’s size is then determined by the total size of the items within it. This is a game-changer for working with components. Make sure to also check out a video tutorial.

While we are waiting for a real auto-layout to ship, this plugin dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. Demo video in the author’s Twitter.