Skip to main content
Question

List down all the possible attributes in figma property in plugin


Nidhin_Kuttikkattu_Rajeevan

Hi Could I ask a question?

I have a componet called Fruit. I created an intance of Fruit in my Figma document. It has properties like colour, origin
Suppose possible options for colour are Green, Red, Orange, DarkRed
Suppose possible options for origin are Indian,Netherland,England,France

It will come under variant properties. So in my plugin, I will set colour=Green using setProperties API.

I read this property Green Blue etc from a txt file. So sometimes there is a chance that Green is green(Capital letter,small letter issue) and Figma plugin throw error if there is no exact match. So in plugin I would like to read all the possible combinations of colour before throwing an exception. How can I do that?

For example, if I click fruit instance node, can I iterate through its properties like colour and origin then list all available values of colour and origin to a string array? So before I assign colour = inputFromTextFile, I can check if InputFromTextFile is Green or green.

This topic has been closed for replies.

16 replies

Nidhin_Kuttikkattu_Rajeevan

@tank666 any guidance tips?


tank666
  • 4873 replies
  • October 20, 2023

Nidhin_Kuttikkattu_Rajeevan

I have seen this. But how can I iterate the items in the combobox of a property. When I try to print, it is returning only the present value


Nidhin_Kuttikkattu_Rajeevan

for example,
if Apple is an instance node, when I select it, I can see the properties on right side,
it will presently shown as
Colour = Green
Origin = India

But if I press green, I will get a combo box option, other values. So I wish to iterate those values when I select an instance node.


tank666
  • 4873 replies
  • October 20, 2023

Sorry, but I can’t confirm this. The output should be something like this:

{
  'PropertyName 1': {
    type: 'VARIANT',
    defaultValue: 'Default',
    variantOptions: ['Default', 'Variant 2', 'Variant 3', '…']
  },
  'PropertyName 2': {
    type: 'VARIANT',
    defaultValue: 'True',
    variantOptions: ['True', 'False']
  },
  …
}

Nidhin_Kuttikkattu_Rajeevan

Exactly that variantOptions is I am looking for. But it is not showing in my log.
I did as this.

let mySelectedFruit = currentPageSelection[0] as ComponentNode;
console.log(mySelectedFruit .componentProperties)

It is not showing VariantOptions


tank666
  • 4873 replies
  • October 20, 2023

Check the ComponentSetNode.


Nidhin_Kuttikkattu_Rajeevan

ComponentSetNode?

I tried as this
let mySelectedFruit = currentPageSelection[0] as ComponentSetNode;
console.log(mySelectedFruit .componentProperties)

it returned undefined 😦


tank666
  • 4873 replies
  • October 20, 2023
InstanceNode.mainComponent.parent.componentPropertyDefinitions

Nidhin_Kuttikkattu_Rajeevan

Fantastic. It prints. But I am pretty sure, if you not give this tip, I would have keep struggle with this. Thanks alot. Now I will try to iterate that VariantOptions. 🙂
Happy weekend


Nidhin_Kuttikkattu_Rajeevan

Do you think it is iteratable? VariantOptions ?


tank666
  • 4873 replies
  • October 20, 2023

I do not understand your question. Are you asking if arrays are iterable? Yes, arrays are iterable objects.

developer.mozilla.org

Nidhin_Kuttikkattu_Rajeevan

Oh no 🙂 Come on…

It is returning as
{
‘PropertyName 1’: {
type: ‘VARIANT’,
defaultValue: ‘Default’,
variantOptions: [‘Default’, ‘Variant 2’, ‘Variant 3’, ‘…’]
},
‘PropertyName 2’: {
type: ‘VARIANT’,
defaultValue: ‘True’,
variantOptions: [‘True’, ‘False’]
},

}
as you mentioned, I need to iterate each property in the returned data and go to variantOptions… So I am stil trying to know how to
navigate to VariantOptions from InstanceNode.mainComponent.parent.componentPropertyDefinitions


tank666
  • 4873 replies
  • October 20, 2023
ComponentSetNode.componentPropertyDefinitions['PropertyName'].variantOptions
developer.mozilla.org

Nidhin_Kuttikkattu_Rajeevan

Ah thanks,

It works now. Cheers.


tks!!You help me a lot!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings