Designer Advocate Joey Banks shows a preview of what’s coming in November. Can’t wait!

Announcements from the above keynote, presented as a blog post. ​“We believe in embracing concepts from engineering and design, adopting the rigor and reusability of code while preserving the rapid iteration and uninhibited exploration that makes visual design so powerful. […] When code and design components mirror each other, teams can move much more efficiently. Today, we announced Variants, Interactive Components, and improvements to Auto Layout that will allow teams to do just that.”

“Elements can fill their containers in both directions; you can set independent padding values; and items can be set to space between.” (Coming in November.)

Can’t wait to see what they’ve got!

The 3rd part of the series focuses on creating constraint-based field components with Auto Layout to build forms that scale to various browser sizes.

A trick that combines Auto Layout, frames, and fills to resize image layers along the vertical and horizontal axes.

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!