Access/Change "Selection Colors" via Plugin API

Hi community,

i have a question regarding “selection colors”. Is it possible to access and change the colors of figma.currentPage.selection[0] in order to change all occasions of “color x” to “color y” with one change?

So I don’t need to access every single child element and change its color there.

Thanks in advance :slight_smile:

1 Like

You can’t access all colors directly like this: selection colors is a high-level feature while the API exposes mostly low-level building blocks which you can use to customize anything pretty much. I don’t see a problem in iterating over all children using something like figma.currentPage.selection[0].findAll and writing a couple of conditions inside of it.

Yes, you’re right. Could achieve it with findAll(((child) => child.type === ‘INSTANCE’ || child.type === ‘TEXT’|| …)

and

if ( fillStyleId === myStyle.id) { // switch colors }

Works fine for the case.

Thanks :slight_smile:

Yeah, if you need only certain types of nodes, if you had access to selection colors this wouldn’t have helped anyway, since selection colors show colors from all objects within selection.

In this case I really wanted to recolor all elements which had a certain color. So “selection colors” would work in this case.

Oh, I thought you wanted only specific types of nodes judging by this part: child.type === ‘INSTANCE’ || child.type === ‘TEXT’|| … — you don’t need it if you want all nodes.

but I want all nodes, where I can check for an strokStyleId and fillStyleId to change them. And based on the typescript errors I get, I need to check for certain types of nodes. Don’t I?

1 Like

Ah, for that yes. Or you can do this, not as clean but gets the job done:

if ('fillStyleId' in node) { 
  // use node.fillStyleId 
}

Nice, never thought about that. But is it inefficient because it iterates over every single element? Or doesn’t it impact that?

No, it simply checks if a property exists on an object. findAll iterates over every single node.

Now it’s possible.
figma.getSelectionColors()

2 Likes

yeah but… that doesn’t fit the case. term selection is ambiguous here. see the use-case described by OP. the method you linked gives you the colors of user’s ACTUAL current selection only. selection as in… user clicked on it and it now has a border around.

i believe OP referred to Selection colors section on the right side-bar that tells one all the colors used within a group.

so… these… which… yea, i get it. it only shows up for the user selected clicked component…
image
would be nice to have a getter / setter for those for EACH component on a Figma page so that… if you rename your tokens you can iterate through all component’s selection colors and update them according to a migration spec.