Why can't I see any styleIds in my fills even though they are using color styles?

Plugin and Widget API Questions
1

I want to write a plugin that checks every layer within a component to ensure it’s using colour styles. My component has some layers using local colour styles and other layers using colour styles that come from a published library.

I can traverse nodes and have this bit of code inside my node traverse function.

function traverse(node: any) {
      if ('fills' in node && node.fills) {
          for (const fill of node.fills) {
console.log(fill, fill.paint, fill.styleId, fill.style)

but there is no paint, styleId or style on my fills. The property doesn’t seem to exist.

At the top of my code I have const paintStyles = Figma.getLocalPaintStyles() and when I console log that I see an array of 3 items which is what I expected…that is how many styles are being used in the component.

But why am I not able to access style or styleId? Is this something to do with async behaviour and the style info not having loaded at the point of console.log?

2 
node.fillStyleId

Please see the developer documentation:

3

Thanks for the reply but I had read the documentation before I posted the question. The issue is there are no styleIds associated with any of my nodes even though the Frame nodes and Text nodes are using local and published library styles. That is what I don’t understand. Any ideas?

4

What does it mean? Have you checked the fillStyleId property of the node?

Fill does not have such properties. Where did you get them from?

5

All node.styleId values are undefined. If I console.log(node) I just get e.g. FrameNode {id: “154:132”}.

6

Could you share the link to the test design file?

7

Sure, thanks for looking at this. Let me know if you want me to change the permissions to edit. https://www.figma.com/file/IMPeLFpbuLC6nWlE9U47Fy/Plug-In-Research?type=design&node-id=4%3A7&mode=design&t=dq3h1Oy1CY5wuCK1-1

8

All your objects have a color style applied and the fillStyleId property contains a value.
frame-14
frame-15
text

9

That is so odd. I am not seeing that. See here:

image
image1753×1243 339 KB

How are you seeing those properties - via a console.log(node)?

The only difference was the file I shared with you was my personal/free Figma account which doesn’t have access to the development option. The same Frame is copied in my work Figma account and the screenshot shows what is being output when I console.log(node). It’s not to do with permissions on my work account is it?

10

Click on the (…) next to the property to get the value.

Please check out this article: