Skip to main content

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 = colorsLibraryVariablesy0];

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:

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


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


pDiscourse 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.

Reply


Terms & ConditionsCookie settings