Two features announced on the Config Europe are already live! New Instance Swap menu and updated Inspect tab help both designers and developers navigate large, complex libraries in Figma.

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.”

“Combine variations of the same component for different interactive states, colors, and sizes to mirror your front-end code and simplify your asset library.” (Coming in November.)

Luis shows how converting the whole GitHub Primer buttons library to variants took less than a minute.

“Add interactions between component variations in your design system and reuse them in your prototypes with no extra work.” (Launching in January 2021.)

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.

Meng To points to a useful feature that can be easy to miss.

How to keep an aspect ratio of a nested element when resizing its parent. Really smart workaround!

“Part ²⁄₅. Add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.”

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.

“Join Designer Advocates Joey and Rogie as they dive into components: see them leverage constraints, apply auto-layout, explore negative frame spacing, styles, and more.”

The link to a community project is in the replies.

Finds detached component instances in your document, so you can decide what to do with them.

Make sure to check replies for more ideas.

In this weekly Office Hours in Figma, Anthony DiSpezio and Rogie King are talking about team structure, multiple component libraries, versioning, and updating components at scale.

Smart workarounds for making reusable progress bar components that can indicate different values.

Drag-n-drop from the Assets tab is a time-saver.

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

A valid point that specifying an element as a component and then detecting all the places where it has already been used would be a great alternative to the existing approach of defining components before using them.

A list of 5 solid principles for building components — reusability, nesting, UI and UX patterns, reusing styles, and consistent naming structure.