Figma Support Forum

Get all nodes that are red

Hi,

I would like to remove all the components that are red, is there a way to filter all the components based on their color ?

Thanks,

Antoine

Of course, it’s super easy if you know the exact color, .

const redNodes = figma.findAll(node => node.fills.find(paint => paint.type === 'SOLID' && paint.r === 1 && paint.g === 0 && paint.b === 0))

Thanks for the answer, but I have another problem. I am trying to get the nodes of the components which are red inside of a pageNode but there are errors for node.fills.find() and redNodes.remove(), saying that:

TS2339: Property ‘fills’ does not exist on type ‘SceneNode’. Property ‘fills’ does not exist on type ‘SliceNode’.

And here is the code:

const pageNodeExport = figma.root.children.find(n => n.name === "Export") as PageNode
const redNodes = pageNodeExport.findAll(node => node.fills.find(paint => paint.type === 'SOLID' && paint.r === 1 && paint.g === 0 && paint.b === 0));
if (redNodes){
    redNodes.remove();
}

How can I solve this?

It’s a TypeScript error, which doesn’t mean your code is wrong, it means TypeScript thinks it’s wrong. It knows that findAll function and other similar functions can return all types of nodes (type SceneNode — note that node.type has no relation to the typescript types, unfortunately), and it doesn’t know that your condition will only return objects of a specific type. To fix it, if you know the type of objects you will be getting explicitly, you can make a type assertion: node as FrameNode. Or a better way would be to implement a function with the type predicate and make sure your object is indeed a FrameNode (or whatever other types you need). Both of these things are explained here: https://www.typescriptlang.org/docs/handbook/advanced-types.html

Also for testing purposes, you can simply use // @ts-ignore comment above each line which you want TypeScript to ignore. Or don’t use TS at all, use regular JS.