How do I get the styles of nodes?

[Carmen_Branje]

Hi There

So I’ve isolated a component node, now that I have it, how do I get the styles that are applied to it? I want to get the color and text styles so that I can match them to local style names.

const nodes = figma.currentPage.findAll(node => node.type == “COMPONENT”);
for (let i = 0; i < nodes.length; i++) {
const localnode = nodes[i];
}

Thanks,
Carmen

[Gleb]

Hi Carmen, you can get all visual properties of any node including styles in geometry-related properties: ComponentNode · Figma Developers. Specifically, if you would need to get fill style, you can use let styleId = node.fillStyleId and then import this style by ID using let styleObject = figma.getStyleById(styleId) (figma · Figma Developers).

However, if you don’t need the style itself (its properties like name etc.) and you need only its properties (color, opacity, blend mode), you can get the fills array on the node and check which properties it has.

[Carmen_Branje]

Thanks for the reply!!

Unfortunately my node object is missing the fillStyleId property???

[Carmen_Branje]

I think it might be related to a type problem as I’m getting this error

“Property ‘fill’ does not exist on type ‘SceneNode’.”

Which I don’t get since I’m using

const nodes = figma.currentPage.findAll(node => node.type == “COMPONENT”);

to get the node??

Carmen

[Carmen_Branje]

My issue no is that when I try and get the style name is return an id even though I using this function . . .

let styleID = (nodes[i] as ComponentNode).fillStyleId.toString();
figma.ui.postMessage(figma.getStyleById(styleID));

I’m expect it to print out the style name, but it printing out below

Output:

1. {id: “S:35ecd45c408528c3a90cec0d6b063f76de446f29,59:0”}

2. id: “S:35ecd45c408528c3a90cec0d6b063f76de446f29,59:0”

[Andrei_Iancu]

Does it help you to look to existing code? If so, check Styler repo which is public.

Here is the class i used:

andrei-inc/Styler/blob/master/src/code/modules/styler.ts

[Gleb]

After you get style by ID, it returns the PaintStyle type object. To get its name, simply add .name to it:

figma.ui.postMessage(figma.getStyleById(styleID).name);

[Ryan_Didevar]

Hi I faced this problem recently and I finally solved it by reading Figma’s document. This error occurs because if you use this code the plugin will crash as if no elements in project weren’t selected by users. the only thing you have to do is adding two conditions to check this matter and avoid to crash.

if (!selection) {
return;
}
if (selection.type !== ‘FRAME’) {
return;
}