Luis explores a few approaches for handling components used in multiple design files but not yet ready for the main library. Delaying the creation of components until later doesn’t scale. Using naming conventions and canvas organization to separate local components doesn’t help with bringing them to another file. The best solution is to create Staging Libraries, ​“where your specific team, feature, squad, whatever can create what is in effect an extension of the system for your specific piece of work.” When the component needs to be used across multiple files, it can be pushed from the local level to the Staging library, and once it’s ready to become a part of the design system, it can be moved to the Global library.

A smart technique for debugging design system usage that will nicely complement the new Check designs linter: ​“I wanted to see which parts of my designs were using tokens and components from my design system, just by looking at the canvas. The solution: an additional variable mode paired with an outline component. Toggle it on, and everything using the system lights up: tokens in bright cyan, components with dashed outlines. Everything else stays unchanged.”

It’s wild how long it takes to build some of these larger features. Jacob Miller, a Product Manager for the Design Systems and AI team at Figma, shares an early exploration for slots from 3 years ago! I’ve been begging Jacob for slots at this year’s Config and got a feeling that they’re already working on it, but still it will be launched only next year.

If you wonder why it’s taking so long, Jacob wrote an insightful reply on how his team approaches these changes: ​“With design systems features, we have to plan them years in advance. Things like components, variables, and styles are used on the order of billions — one wrong move will result in breaking files and ruining critical design work. We have to be methodical. […] With DS features, I’m usually planning them around 3 years in advance.”

If you’re curious how slots and other new features will work, check out Jacob’s AMA.

Lauri Lännenmäki shows yet another use case for Make — after designing a complicated component with different properties and states, make an interactive playground to give to the developers. Great opportunity to test edge cases and experiment with interactions.

If you missed a 2‑hour-long video Vibin’ on Inflight shared in #221, Ridd shared a short snippet demonstrating an advanced technique of turning similar objects into instances of a component by using Select Layers, Master, and Destroyer plugins.

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