Skip to main content

Hi everyone,

I’m developing a Figma plugin that extracts design properties from selected nodes, including text styles and color tokens.

 

For text styles, I successfully retrieve the applied style using:

const textStyle = figma.getStyleById(node.textStyleId);

This works great for identifying and mapping text styles.

 

However, I can’t find a way to get the color variable applied to a node. When inspecting node.fills, I only see the RGB color, but not the token assigned in Figma variables.

 

Example:

In Figma, the text color is set using a variable:

color: var(--color-foreground-primary, #000);

 

But when I check node.fills in the plugin API, I only get:

{
  type: "SOLID",
  color: { r: 0, g: 0, b: 0 }
}

I tried checking node.boundVariables, but it doesn’t seem to return color-related variables.

 

Questions:

1️⃣ Is there any way to get the applied color variable name (e.g., "color-foreground-primary") in a Figma plugin?

2️⃣ Can we extract this information from boundVariables, fills, or another API method?

 

If there’s a workaround, I’d love to hear it! 🚀 Thanks in advance.

Can we extract this information from boundVariables, fills, or another API method?

You can get the variables bound to the fill in the following ways:

node.boundVariables;
node.fills[i].boundVariables;
node.fills[i].gradientStops[i].boundVariables;

PaintStyle.boundVariables;
PaintStyle.paints[i].boundVariables;
PaintStyle.paints[i].gradientStops[i].boundVariables;

 

Is there any way to get the applied color variable name (e.g., "color-foreground-primary") in a Figma plugin?

To get the variable name, first get the variable ID using the above properties and then use the getVariableByIdAsync(id) method.

That worked perfectly! Thanks

I was also successful pulling the fill variable id and name using node.fillssi].boundVariables.color.id; but I’m not able to pull a text variable id and name from a text layer using the same script. node.boundVariables.fontFamily.id returns undefined and node.boundVariables.fontFamily returns the array. What am I missing?

node.boundVariables.fontFamily.id returns undefined and node.boundVariables.fontFamily returns the array. What am I missing?

You need to check the array element.

node.boundVariables.fontFamilyyi].id

The same applies to the fontStyle property.

node.boundVariables.fontFamily.id returns undefined and node.boundVariables.fontFamily returns the array. What am I missing?

You need to check the array element.

node.boundVariables.fontFamilyyi].id

The same applies to the fontStyle property.

I was using array 1] when it should have been airy 0]. node.boundVariables.lineHeightt0].id worked! Thanks for the help.

Reply


Terms & ConditionsCookie settings