Is there a guide for converting multiple variants to use component properties?

I want to know this, too

same here 🙂

Same. I had shown/hidden variants for a leading icon on my button component. I tried replacing it with a component prop with the exact same name and that did mostly work, but it resets the icon back to the default. So either there’s a detail I’m missing or there’s not a seamless migration process.

Really curious about this too…

I don’t see a way around triggering the “missing variants” message if what you’re doing is reducing variants. I took a Side Nav Item component in our system down from 45 variants to 3 variants, so what I’m doing in the release notes is communicating to the designers that it’s a breaking change. I let them know that they’ll see the missing variants message, and how to deal with it. It’s not really ideal but I think the team communication around it is key.

But how to go about design files that use those variants that have been removed? You’ve basically removed 42 variants but if they’re used in design files, how do you update the designs? Manually…? 😭

Figma, please provide some sort of “convert” feature if possible (if I’m not missing something).

This would be super helpful. If not for all cases, then at least for the variants which are already using True/False.

Got a lot of variants solely for visibility things in components, and while wonderful, this new feature (even if only the Booleans) is sort of useless for existing and extensive design libraries/systems.

Implementing is super fast. Just shaved down a component set with +100 variants to around 4.
Publishing, updating, breaking and manually fixing all instances is probably not even worth doing.

Right now I’m doing copies of all main component sets and modifying those. Then updating as I go along editing and creating new stuff in various files.

A convert feature would be awesome of course, but seems unlikely. But also would work — some smartness by matching variant’s name and boolean propery name and keeping the link between component and intance alive.

Currently to have my libraries (multiple larger different projects) using Figma’s latest goodness, I pretty much need to declare many of the components dead, and start replacing them by hand. A plugin idea here perhaps?

With the introduction of the new component properties I’ve found that a lot of my variants are not entirely redundant. Often, I don’t need variations at all. But trying to remove a variant set and reduce the component back to it’s native, single item state is something I haven’t been able to figure out yet.

It seems I have to keep a single property=value convention, which doesn’t feel necessary any more. Is there a command I can use to remove the variant set and reduce the component to it’s single-state basic point?

I think an automation would be difficult. It’s a ground-up rethink of how components are built. I’m sure it’s certainly possible, but, in our design system, it’s really a “start over and do it this way now” process. Introduce the new one. Deprecate the old one. I’d be interested to hear from Figma, but I don’t expect it soon. Would love to be proven wrong 😉