Luis measures and compares the performance of a complex component built as a single mega-variant vs. nested and bubbled instances. While the nested instance approach is faster and more maintainable, he shares a few alternatives that are worth considering.

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

Component properties can now be bound to variables, unlocking the ability to use translation strings in props. Learn how to bind them together in this video by Chad Bergman or this thread by Jacob Miller.

The modal you use to swap instances of a component has been upgraded in UI3 and now matches the layers panel, with folder nesting and options for list and grid views.

In this clip of the Sneak Peek episode, Dion Chooi shows how LottieFiles organizes and uses components in Figma.

Molly recommends organizing components with sections to provide a hierarchy in the Assets panel and allow viewing components with a specific background color. Pro tip: set a background to a ​“danger” color for deprecated components.

Christine Vallaure shares an updated list of her old favorites and plenty of new tips, highlighting what you might have missed when working with components in Figma. (Thanks for the friend link!)

Ridd explains how to make your components easier to use by exposing nested instances.

“The Washington Post’s inclusive process for creating new design system components bridges the gap between design and development to make features that help navigate the news online.”

Designer Advocate Mal reminds us that it’s crucial to consider the discoverability of components when building a set and points to a new feature of the Assets library that shows a number of component variants and a playground for exploring them.

A set of benchmarks to level up the quality of your Figma components and define what constitutes a good component. The content is divided into two sections: ​“Design”, featuring items that can aid in crafting a component; and ​“Testing”, containing considerations for testing your component before final publication.

Chad shows how to use variables to change a variant on a component instance in your designs.

Chad shows how to use variables to change your variants on nested component instances when setting a mode.

In the second part of his monumental article, Luis covers ​“how to build adaptable, indexable, logical, and specific components as part of the FRAILS framework.” (The two-part series was strategically published before the Christmas break, giving you some extra time to read it.)

A new long-read from Luis Ouriach published in the Smashing Magazine: ​“Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls, starting from how to make designers on your team adopt the complex and well-built system that you created to what are the best naming conventions and how to handle the auto-layout of components, indexing/​search, and more.”

Luis shows how to make slot components more useful by ​“outsourcing” the component composition to a main component, whilst still allowing for completely flexible content within.

Finally a solid improvement to detaching instances.

A new video from Lauren with a deep dive on when to use variants vs. variables with modes.

The second guide introduces the concept of ​“container queries”, which are slowly gaining adoption in CSS and will fundamentally change the way we approach responsive design. Christine compares the current approach of using media query breakpoints with container queries and investigates how to imitate them with the current Figma features.

Two new articles in the UX Collective from Christine Vallaure, who graciously shared free ​“friend links” with Figmalion readers. The first one explores a new approach to creating responsive designs with variables and modes, whereby components automatically adapt to the screen size they are placed on and only resize within the provided breakpoints. In this case, variables automate which component gets displayed and set stops at certain minimum and maximum points to stay inside your breakpoint range. I had no idea that string variables can be used to select a variant of the component 🤯