Skip to main content
Question

List all the properties of a component instance


Nidhin_Kuttikkattu_Rajeevan

How can I find all the properties of a component instance?
const instanceVariant = Figma.currentPage.selection[0] as InstanceNode
const allVariantsNamesArr = instanceVariant.mainComponent.parent.children.map(
(child) => child.name
);

This command prints all variantProperties. But I wish to list all properties.

This topic has been closed for comments

12 replies

tank666
  • 4868 replies
  • June 2, 2023

Nidhin_Kuttikkattu_Rajeevan

Thanks Tank…

Here, I tried to print instance.componentProperties is doing the job…

Could I ask, can I set these properties from plugin? For example, if there is a property,

LightStatus = false,
can I set LightStatus = true?

I have done this, but only problem is,
node?.setProperties({LightStatus : false })

But I can’t give like that. It is as a string in an array.

I mean,
let nodeProperties: Array;
nodeProperties= [“LightStatus”,“WindowStatus”]

let nodevalues: Array;
nodevalues= [“false”,“true”]

in a loop, I have to set like
node?.setProperties({nodeProperties[0] : nodevalues[0]})

is it possible?


tank666
  • 4868 replies
  • June 2, 2023

Yes, sure. But note that you can only set properties that exist in the component/component set. Also note this:


Nidhin_Kuttikkattu_Rajeevan

Unfortunately, i am getting error. A help will be really appreciated.

Attaching what I have done:

//This target node is an instance actually. Please ignore about getNode(), I am not giving
//explanation of it, but it returns a component instance.
let targetNode = getNode(workingClone)

let tI = targetNode as InstanceNode

//This tI has more than //20 properties. I listed them using propDefs. so, it prints
//present set values.
const propDefs = tI.componentProperties;

//now, I have a test object. it is something like below.
testCase
{ nodeName - It is string
nodePropertyName it is string
nodeValue it is string
}

I am trying to populate a object that I can use inside setProperties() function for the targetNode

so following block will generate a result object. But I get error as above.

for (const prop in propDefs) {

    let propertyNameWithoutHash =   prop.substring(0,prop.indexOf("#"))
    if(propertyNameWithoutHash ===testCase.propertyName)
    {
      result[prop]=testCase.value           
      break;
    }        
  }
  targetNode.setProperties(result)      

Actually, the target property type is boolean. I am passing a string “true”. I am sure error is because of that. But hardcoding always True/False is not right way I felt.


tank666
  • 4868 replies
  • June 5, 2023

Sorry, I didn’t understand you right away. The false and true values ​​must be of boolean type.


Nidhin_Kuttikkattu_Rajeevan

Yes, I can set it now. Thank you. I will have to try the Variant type also


Nidhin_Kuttikkattu_Rajeevan

for a variant property, I am getting this error.
Error: in setProperties: Unable to find a variant with those property values

But I am sure, it is. For example,
FRUIT is the property name, and possible values, APPLE, ORANGE, BANANA.

I tried to set BANANA

code is
result = {}
result[FRUIT]= “BANANA”
targetNode.setProperties(result)

One thing I noted that, when I was working with booleans,

let targetNode = getNode(workingClone)
let tI = targetNode as InstanceNode
const propDefs = tI.componentProperties;
each items in propDefs had a #value for example Fruit#148:15

but in failed case,
it is not


tank666
  • 4868 replies
  • June 8, 2023

Could you share a link to the test file?


Nidhin_Kuttikkattu_Rajeevan

I do not have a test file. So I am not able to share it. But I found the problem. It is not because the variant setproperty issue. Actually, the mainComponent of the target Node has combination of variants as below.

FRUIT = BANANA, COLOUR=RED, PRICE = LOW
FRUIT = APPLE , COLOUR = GREEN, PRICE = MEDIUM
FRUIT = ORANGE, COLOUR = ORANGE, PRICE = LOW

In my plugin, I am trying to set FRUIT = BANANA, but at this time, COLOUR = GREEN, PRICE= MEDIUM. But that combination is not exist. So, it reject the setProperties request.

my csv is having 3 lines actually
fruit:banana,
colour:red,
price:low,

since I am trying to call setProperties, line by line, it crashes. Can I set all three properties together in a single call?


tank666
  • 4868 replies
  • June 13, 2023

Yes, of course, you can set multiple properties at once when you call this method. Just add these properties to your object.


Nidhin_Kuttikkattu_Rajeevan

OK. I will try to iterate the csv file sequentially, then I will fill a result{} array,
after that I will try to feed that result into the setProperties…


Nidhin_Kuttikkattu_Rajeevan

Thanks Tank. It is working fine… Thank you.


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