Luis shares a few tips on structuring library files. He recommends optimizing variants for searching and usage rather than maintenance, and suggests this file structure: Page → Section → Variant. Also, check out his other thread on naming and splitting your library files.

Epic thread by Molly Hellmuth on the best practices for using property, variant, and Auto Layout features. She just rebuilt her popular UI Prep design system with the latest Figma features and learned a lot in the process.

Clara Ujiie came up with a simple workflow for visually testing components. (The same tutorial is available as a Twitter thread, if that’s your jam.)

Ridd just launched Dive with an amazing lineup of design educators. In this tutorial, he designs the new Dive website and shows how his use of components to speed up workflow in Figma, talks about visual design principles and his approach to UI design in Figma. Lastly, he shows how easy it is to go from Figma to Framer to a published website.

Now it’s easier to track changes to components and styles. A new icon shows when styles or instances have changed, lets you accept changes for individual instances or layers, and even shows a before vs. after preview! See a quick demo by Jacob Miller.

Ana is building off of her tip on creating nested icons that preserve color overrides, and now makes them duotone.

Joey Banks is back with a bit of advice on his new approach to using Auto Layout for building responsive components. ​“With my approach today, I first like to drag out an unfinished component instance and stretch it in bizarre and unexpected ways to see what happens. If I can make this component work as expected in the strangest sizes, I’ll feel confident that it’ll work for nearly all situations.”

In a short thread, Nitish Khagwal explains how instance overrides work in Figma.

Ridd explains why it’s better to think of each container component as having a single slot instead of a bunch of individual slots.

“Component properties launched at Config earlier this year, but was over a year in the making. Essentially React properties for Figma components, ​“props” removes the guesswork out of your design system and better aligns design components with code. Join the tech leads of the project for a behind the scenes look into how the feature came together, the power it unlocks for your design system, and a look into some of the exciting updates we’ve made post launch.”

“We’re excited to continue our Building blocks office hour, where we discuss all things Design Systems. In this episode, Figma Designer Advocate Chad Bergman and Product Manager Jacob Miller will share tips and tricks for optimizing your component library, including how to best use the latest component property features.”

“Learn about how to use component properties to create a pseudo slot card component.”

Luis shows some of the original designs for the component icon by Rasmus Andersson. At this point, it’s hard to imagine anything other than ❖, but I also like #7 and #14.

A new plugin from Figma Developer Advocate Jake Albaugh for inspecting component properties as they would look in code. It currently supports the definition and instance code for Angular, React, Vue, and Web Components.

Ridd shows how to use the new beta to expose the subcomponent state, avoid breaking down components, and set preferred values for ​“slots”.

With the recent improvements to variants and components, Ridd makes a point that the benefits of using base components are no longer worth the cost for the design systems work. That said, they’re still great for exploratory work.

An interesting technique from Luis on using component props for adding spacing around icons only in some instances, for example when used inside a button.

“Using Component Properties, we can update our library and make the components a bit more clear, flexible, and semi-self-documenting for the users of the library. In this tip, we share how preferred values and exposed instances can make the component consumption experience easier for designers.”

Ridd with a pro tip on using Variants. Good prep work for the design tokens in the future!

Molly Hellmuth with a detailed walkthrough of beta features and why they’re worth using right away.