Creating variants using component instances in the new version of Figma

Ask the community
#1

In earlier version it was easy and quick to create set of variants, based on a component instance.

  1. Create source component “Thing (Master)”
  2. Make instance from the component
  3. Select that instance, and create variant component from the instance e.g. “Thing (Variants)”
  4. Then just add the variants by clicking “New variant” as you please

variants-using-a-instance
variants-using-a-instance746×570 73.9 KB

If you preferred the flow described above in earlier version, have you discovered a painless way to replicate this in current version of Figma?

2 Likes
#2

This has been resolved.

Creating new variant is possible by clicking “Add variant” button from the top toolbar. In earlier versions there was alternative flow to this. I wasn’t aware of this button until now :slight_smile:

add-variant-button-top-toolbar

3 Likes
#3

For anyone else disliking mystery icons, “Add variant” is also hiding in the context menu under “Main component”.

3 Likes
#4

This “Add Variant” option is really bad to find, lost a lot of time to see where this simple action could now be done! In my opinion, it’s a bad UX decision with this new update

1 Like
#5

Another issue that I have found is that Figma now tries to categorise all Properties into three categories ~ “Boolean”, “Instance Swap”, and “Text”.

Maybe this is yet another steep learning curve for me to distinguish each of them. But even as simple as Boolean false/true option ~ is still a mystery to me as it keeps giving me a side error message “not used within component”.

So far the only one that replicates the closest earlier version of Figma is “Text”. You set a property name. And set a value anything you wish. Done. That’s it. move on. Ironically this allows you to still set boolean false/true without that error “not used within component”.

I have no idea or why they convolute things unnecessarily.

1 Like