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

Rogie comes to the rescue and explains how to preserve a fill color when icons are overridden and swapped. It’s worth keeping a layer name consistent across icons in the library if you plan to use them in different colors.

That’s a really smart idea — browse a library of pre-made UI elements and copy-paste them straight to Figma. Categories make browsing the collections very easy. May be valuable for rapid prototyping at the early stages or for exploring ideas. (Keep in mind it didn’t work for me in Safari, but works perfectly in Chrome.)

Ridd shares five awesome strategies for using component properties: strategic nesting, progressive disclosure, minimizing decisions, emojis, and streamlining the instance swap.

Edward Chechique wrote a detailed and well-illustrated guide to component properties.

Figma dropped a new tutorial: ​“With component properties, you can define which parts of a component can change. And instead of creating separate variants, you can use component properties to reduce the number of components needed. This takes the guesswork out of designing for anyone using these components and they can quickly make adjustments as Figma keeps component property controls in one place.”

“We’re excited to talk about yet another awesome new feature: Component properties. Join us as product manager Jacob Miller and designer advocate Chad Bergman share more on how you can reduce variant explosion in your design systems and improve developer handoff.”

Ridd warns that using component properties introduces a new type of responsibility for designers and explores what the most effective handoff deliverable actually looks like.