Create component variant using plugin

Plugin and Widget API Questions
1

Hi, I’d like to generate component variants with Figma plugin.

I tried this but it doesn’t work.

componentSet.addComponentProperty(“myProperty”, “VARIANT”, “Default Value”);

And there seems no way t set ComponentProperty for a component variant.

If Figma hasn’t released these functions, I wonder when will Figma allow plugins doing this?

Thanks,

2

Please take a look at the developer documentation:

Adds a new component property to this node and returns the property name with its unique identifier suffixed. This function only supports properties with type ‘BOOLEAN’, ‘TEXT’, or ‘INSTANCE_SWAP’ and will error if called on a ‘VARIANT’ property.

Use the .clone() method on the ComponentNode inside the ComponentSetNode and then use appendChild to insert into the ComponentSetNode or create a new component with figma.createComponent() and then appendChild to the ComponentSetNode.

2 Likes
3

Hi, thanks for your answer, but you haven’t answered all my questions.

I read the developer documentation and understand that it is not allowed to add component properties of type “VARIANT”.

I have also tried to create or clone componentNode in componentSetNode, but the problem is that I didn’t find a way to customize the properties so that later I can use a variant of the component by toggling the properties in the side pane.

If you could let me know how to customize the variant properties through the plugin code, I would be very grateful.

Thanks,

1 Like
4

I don’t quite understand what problem you are facing.

How to set the properties and value of a variant?
Change the ComponentNode.name property following the pattern: PropertyName=PropertyValue, PropertyName=PropertyValue, …

How to add a component property?
Use addComponentProperty.

How to apply added component property to node in inside ComponentNode?
Store the value (which you got after using addComponentProperty) in a variable and change the componentPropertyReferences property of the desired node.

To be more specific, please share enough information, full code, screenshots/video so that anyone can help you.

1 Like
5

Hi, thank you for your answer. It solved my problem!

What I want to do is using plugin code to generate many component variants (say 100), each variant are defined by a group of the properties. For example:

Variant1: shape=box, state=normal, size=normal
Variant2: shape=box, state=hover, size=big
Variant3: shape=box, state=mouse down, size=big
…

Previously I couldn’t find a way to define all those properties. Now I know Figma is parsing the variants’ names to define all the properties, that answered my question!

Thank you!

6

thankyou so much, this helped!

1 Like