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,
Best answer by tank666
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.
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.
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,
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.
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!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
