Ridd explains why it’s better to think of each container component as having a single slot instead of a bunch of individual slots.
Seeing a lot of people making the same mistake with slot components...
— Ridd 🏛 (@Ridderingand) November 15, 2022
Here's what to avoid 👇 pic.twitter.com/vu0KxP7vMa
“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.
I was digging through old Figma files and found a few of @rsms's original designs for the ❖ component icon
— luis. (@disco_lu) October 19, 2022
Literally naming the component!
If we changed to another one, what would you choose?
These are all main component / instance pairs pic.twitter.com/OnYxzLIXpq
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”.
The component properties beta is 🔥
— Ridd 🏛 (@Ridderingand) October 18, 2022
Here are 3 ways I'm using the new features to level up my Figma game 👇 pic.twitter.com/txBKz0F5Wz
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.
I'm constantly asked about .base components...
— Ridd 🏛 (@Ridderingand) October 13, 2022
My answer: now that variant sets are smaller AND it's easier to make bulk changes...
The benefit (ease of updating) is no longer worth the cost (ease of use).
But there's one use case I still love 👇 pic.twitter.com/InfTH6Arm3
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.
How can you use component props for contextual spacing?
— luis. (@disco_lu) October 4, 2022
For example, an icon that needs a 12px margin in *some* instances?
– Create a spacer component
– Place that inside a wrapper component for your icon
– Nest that one inside your main component
– Bubble up the props pic.twitter.com/KUv1oX05zs
“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!
Variants pro tip incoming 👀
— Ridd 🏛 (@Ridderingand) September 18, 2022
Create a single set of height variables.
And then apply them across all of your core "atoms" (buttons, inputs, etc.)
3 reasons why 👇 pic.twitter.com/McUW6B2Ua8
Molly Hellmuth with a detailed walkthrough of beta features and why they’re worth using right away.
💡 Figma Tip: Starting using the new BETA PROPERTY features now!
— Molly Hellmuth (@molly_hellmuth) September 20, 2022
This update is huge! There are 3 major ways it’s going to make using component instances much easier for your design team.
Keep reading to learn how.. pic.twitter.com/T0OOkkXRIO
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.
One of the reasons I'm so excited about this new set of features is that it lets people use composition effectively.
— Sho Kuwamoto (@skuwamoto) September 20, 2022
I know that "composition" (used in this way) is an engineering term and not a design term, but I think it applies.
1/n https://t.co/SL5mNhoMNm
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.
Something I'm see a lot is that we prioritise component *creation*, not *usage*
— luis. (@disco_lu) September 13, 2022
This usually ends with something like this (simple example). Building is easier, but usage harder
The "notification" component is buried in variant settings. It's also a different component! pic.twitter.com/R5s63ptJ4w
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.
I just rebuilt my Design System from scratch (to include Config2022 updates)
— Molly Hellmuth (@molly_hellmuth) August 11, 2022
Here are the 3 biggest thing I learned about using Component Properties during this process.. pic.twitter.com/9aNJcmxNjd
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.”