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.

Joey Banks explains why new features are so important for the design systems’ work.

Sho Kuwamoto, Director of Product at Figma, on new features and applying the concept of ​“composition” from engineering to design systems.

New component property features in open beta: exposed nested instances for more customization, preferred values for more clarity when instance swapping, and simplified instances for more focus on relevant properties.

Luis on why it’s important to optimize for the usage of components.

A quick look at the process of updating an existing component with Component Properties and releasing an update with minimal friction for the design team.

Molly Hellmuth shares a few things she learned about using Component Properties after rebuilding a design system from scratch.

Generate all possible instances for your components, including every combination of variants and component properties, all in a tidy labeled table.

“In this stream, Figma Designer Advocate Chad Bergman and Product Manager Jacob Miller share how to apply polish to your components and publishing a v1 of your library.”