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.
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) {
1 let propertyNameWithoutHash = prop.substring(0,prop.indexOf("#"))
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.
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
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?
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…
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.
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?
Yes, sure. But note that you can only set properties that exist in the component/component set. Also note this:
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) {
1 let propertyNameWithoutHash = prop.substring(0,prop.indexOf("#"))
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.
Sorry, I didn’t understand you right away. The false and true values must be of boolean type.
Yes, I can set it now. Thank you. I will have to try the Variant type also
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
Could you share a link to the test file?
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?
Yes, of course, you can set multiple properties at once when you call this method. Just add these properties to your object.
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…
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.