Change frame color with variable of color library

In my Figma project i have a color library imported that i’m getting this way.

const availableLibraryVariable = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();

const colorsLibrary = availableLibraryVariable.find((library) => library.name === "colors");

Then i’m getting the variables in the library collection this way:

const colorsLibraryVariables = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(colorsLibrary?.key);

This is one of the library items (color).

{
“name”: “background/law-school/primary”,
“resolvedType”: “COLOR”,
“key”: “6e07ad8def7c441404abc072ced5c85bccc9fa99”
}

This is the the color variable that i’m getting this way.

const colorLibraryItem = colorsLibraryVariables[0];
const colorVariable = await figma.variables.importVariableByKeyAsync(colorLibraryItem.key);

{
id: “VariableID:6e07ad8def7c441404abc072ced5c85bccc9fa99/710:31”
codeSyntax: Object
WEB: “background/university/primary”
description: “”
hiddenFromPublishing: true
key: “6e07ad8def7c441404abc072ced5c85bccc9fa99”
name: “background/law-school/primary”
remote: true
resolvedType: “COLOR”
scopes: Array(1)
0: “FRAME_FILL”
valuesByMode: Object
22:0: {type: ‘VARIABLE_ALIAS’, id: ‘VariableID:2057bf5ce03176e63440923236355371570c64a9/621:75’}
22:1: {type: ‘VARIABLE_ALIAS’, id: ‘VariableID:7ece16b65be5eef58b465f30cbea62bb6a0b85a5/519:3’}
variableCollectionId: “VariableCollectionId:b93b2bafcb7f84578fad5e994cf74df004d34dff/163:227”
}

The problem is that i don’t know how to use this information to change a frame fills with one of this colors of the library.

Screenshot_1

if i have to use only the name or have to get the RGB.

Thanks in advance

See sample code here:

i have already see that code but it didn’t worked.

For example the clone() function doesn’t exist for it self.

const fillsCopy = clone(node.fills)

i know node.clone()

What’s the problem with creating such a function?

no problem with that, i tought it was a Figma function that i wasn’t finding.
And also a lot of problems with the Types.
I think i have figured it out.
Thank you

no problem with that, i tought it was a Figma function that i wasn’t finding.
And also a lot of problems with the Types.
I think i have figured it out.
Thank you

[Discourse post]

Could you clarify which “Types” you are talking about?

i don’t understand

of course.
Here is my solution

  const colorsLibraryKey = "your_library_key";
  const colorsLibraryVariables =
    await figma.teamLibrary.getVariablesInLibraryCollectionAsync(
      colorsLibraryKey,
    );

  const colorVariable = await figma.variables.importVariableByKeyAsync(
    colorsLibraryVariables[35].key,
  );

  const node = figma.getNodeById("your_node_id") as FrameNode;

  if (node) {
    // const fillsCopy = clone(node.fills)
    const fillsCopy = [...(node.fills as Paint[])];

    // Fills and strokes must be set via their immutable arrays
    fillsCopy[0] = figma.variables.setBoundVariableForPaint(
      fillsCopy[0] as SolidPaint,
      "color",
      colorVariable,
    );
    node.fills = fillsCopy;
  }

I have to force some types like : FrameNode, Paint and SolidPaint

I understand, you are talking about specifying Types in TypeScript. I can’t help you with this because I don’t write in TypeScript.

1 Like