Skip to main content
September 20, 2023
Question

Creating a property with multiple variant options

Hi there, I am trying to add functionality to my plugin that lets me add a property with multiple Variant options, however, when I try to use the addComponentProperty method, it seems to only accept a default value and when adding other values, I believe that their type must be an ‘INSTANCE_SWAP’, is there a way around this? and please correct me if I am wrong

This topic has been closed for replies.

7 replies

Gleb
Power Member
September 20, 2023
figma.com

This function supports properties with type 'BOOLEAN' , 'TEXT' , 'INSTANCE_SWAP' or 'VARIANT' .

September 20, 2023

Yes, I have used it, but here is the thing, I am trying to create a VARIANT property that has Three values, the property is called State and its values are [“Active”, “Inactive”, “Disabled”], but the addComponentProperty lets me only add one default value (“Active”) and I can’t add the other variant values/options.

Gleb
Power Member
September 20, 2023

I believe you need to call the addComponentProperty method on the parent ComponentSetNode, not on a regular ComponentNode. I could be wrong though, as I don’t have much experience with this.

September 20, 2023

Yes I did that, and you are right, you can’t call the addComponentProperty method on ComponentNode, but still, the problem exists, I can’t add more than one variant values/options.

But thanks for the help anyway!

Gleb
Power Member
September 20, 2023

As a workaround, you can create a new component node or duplicate an existing one and append it to children of the component set node. That would create a new variant, you’ll just need to set the right parameters for it. But I still think it should be possible to use the function you want to use, I just don’t have time to test it now to give you a specific example.

tank666
September 20, 2023
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
September 21, 2023

Thank you so much, this worked fine 🙏