Skip to main content
Solved

Access/Change "Selection Colors" via Plugin API


mrnb

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 🙂

Best answer by tank666

Now it’s possible.
figma.getSelectionColors()

figma.com – 21 Jun 23
View original
This topic has been closed for replies.

11 replies

Gleb
  • Power Member
  • 4708 replies
  • February 18, 2022

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.


mrnb
  • Author
  • 5 replies
  • February 18, 2022

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 🙂


Gleb
  • Power Member
  • 4708 replies
  • February 19, 2022

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.


mrnb
  • Author
  • 5 replies
  • February 21, 2022

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


Gleb
  • Power Member
  • 4708 replies
  • February 21, 2022

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.


mrnb
  • Author
  • 5 replies
  • February 21, 2022

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?


Gleb
  • Power Member
  • 4708 replies
  • February 21, 2022

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

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

mrnb
  • Author
  • 5 replies
  • February 21, 2022

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


Gleb
  • Power Member
  • 4708 replies
  • February 21, 2022

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


tank666
  • 4873 replies
  • Answer
  • July 26, 2023

  • 1 reply
  • August 21, 2024

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.


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