Skip to main content
Solved

How to get the applied color variable in a Figma plugin?

  • February 20, 2025
  • 5 replies
  • 236 views

Franco Tirabasso

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.

Best answer by tank666

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.

This topic has been closed for replies.

5 replies

tank666
  • 4873 replies
  • Answer
  • February 21, 2025

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.


Franco Tirabasso
  • Author
  • New Member
  • 3 replies
  • February 24, 2025

That worked perfectly! Thanks


Heath_Flohre
  • New Participant
  • 4 replies
  • April 5, 2025

I was also successful pulling the fill variable id and name using node.fills[i].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?


tank666
  • 4873 replies
  • April 6, 2025

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.fontFamily[i].id

The same applies to the fontStyle property.


Heath_Flohre
  • New Participant
  • 4 replies
  • April 7, 2025

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.fontFamily[i].id

The same applies to the fontStyle property.

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