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.
To get icon colors to preserve when they are overridden and swapped, you need to make sure that your layer names are the same. You'll see in this gif that add_circle and add_shopping_cart have the same layer name...that's how Figma knows to apply the override as you swap. pic.twitter.com/io8DZFtgBQ
— ˗ˏˋrogieˎˊ (@rogie) July 29, 2022
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.
These two components might LOOK the same...
— Ridd 🏛 (@Ridderingand) July 6, 2022
But they couldn't be more different:
• ✅ One crushes component props
• ❌ One creates a nightmare
5 best practices for component props 👇 pic.twitter.com/x3ooMihZMp
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.
By now you’ve probably seen a few of these before/after screenshots like the one below:
— Ridd 🏛 (@Ridderingand) May 31, 2022
Pretty incredible, right?
Yes, BUT... pic.twitter.com/wE1HVHY2yI
Luis shows a neat trick on how to create an “infinite table” using component properties, where we can toggle on however many columns or rows we need in designs.
Tips time!
— luis. (@disco_lu) May 30, 2022
Using component props, we can create "infinite tables"
So we can toggle on however many columns / rows we need in designs
This prevents us maintaining large variant sets for every permutation of table 🍽
Community file to play with: https://t.co/WqNM5SMjSE pic.twitter.com/yhefqrNImC
Follow Charli Marie’s live stream of working on a quote component and figuring out how to use Component Properties.
Molly Hellmuth with 5 step-by-step examples on how and when to use Component Properties.
💡Figma Tip: Start Using Component Properties
— Molly Hellmuth (@molly_hellmuth) June 1, 2022
Component Properties were Figma’s biggest release at Config2022. They’re shaking up how components should be built on a foundational level, in a big/great way!
Keep reading for 5 step-by-step examples on how and when to use them.. pic.twitter.com/o967PIedl1
Vic, a systems designer working on design systems at Microsoft, wrote a case study on Component Properties with practical examples, some interesting issues and workarounds, and thoughts on why they might be moving away from base components.
Joey Banks on component properties: “In the past few weeks, I’ve had the chance to become more comfortable creating components that contain component properties. What has helped me the most has been to think of this new feature as an additional way, not a separate way, to further organize and create components and variants that scale with the library and system.”
Miggi shows how to make a reusable and flexible tooltip component set using Auto Layout, absolute positioning, constraints, and component properties.
Miggi plays with component properties, Auto Layout slots method, and Interactive Components to make some fun modular content prototypes.
To answer some common questions about Component Properties, Tom Lowry re-recorded the little run-through that he did during one of the breaks at Config.
Ridd is rethinking his approach to content systems with the introduction of Component Properties.
Config was a gamechanger for "Slot" components...
— Ridd 🏛 (@Ridderingand) May 19, 2022
They're now more powerful than ever and I'm starting to rethink how I approach content systems in Figma...
Time for a deep dive👇 pic.twitter.com/1mID6OkAwV
Joey Banks creates a button component using both Variant Properties and Component Properties.
Creating a button component set in @figma, using both Variant Properties and Component Properties 🤓: pic.twitter.com/RhoB8WpXrH
— Joey Banks (@joeyabanks) May 19, 2022
Nathan Curtis wrote a really detailed 3‑part series on building a workflow to assure the quality of design system assets.
Ridd shows why the new Instance Swap component property “blows the roof off of what we can do with components”.
Wow, instance swapping is about to blow the roof off of what we can do with components 🤯
— Ridd 🏛 (@Ridderingand) May 10, 2022
Here's how 👇 #config2022 pic.twitter.com/PiO0DjB2g3
Great improvement that wasn’t highlighted during the keynote.
Selecting similar layers right on canvas is probably my fav 1% improvement @figma rolled out today! pic.twitter.com/dStMGy5sfG
— Adam 🌻 Ruthendorf-Przewoski (@AdamPrzewoski) May 10, 2022