Skip to main content
Question

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

9 replies

tank666
  • 4858 replies
  • January 17, 2024

See sample code here:

figma.com

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()


tank666
  • 4858 replies
  • January 17, 2024

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


Josh
  • Former Community Manager
  • 1019 replies
  • January 17, 2024

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]


tank666
  • 4858 replies
  • January 17, 2024

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


tank666
  • 4858 replies
  • January 17, 2024

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


Reply


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