Skip to main content
Franco Tirabasso
Franco Tirabasso
New Member
Feb 20, 2025 8:01 PM UTC
Solved

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

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.

This topic has been closed for replies.
tank666
tank666Solution
Feb 21, 2025 1:32 PM UTC

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
View in thread

5 replies

tank666
tank666Solution
Feb 21, 2025 1:32 PM UTC

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Franco Tirabasso
Franco TirabassoAuthor
New Member
Feb 24, 2025 1:38 PM UTC

That worked perfectly! Thanks

Heath_Flohre
Heath_Flohre
New Participant
Apr 5, 2025 10:03 PM UTC

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
tank666
Apr 6, 2025 7:01 AM UTC

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Heath_Flohre
Heath_Flohre
New Participant
Apr 7, 2025 12:34 AM UTC

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.

Terms & ConditionsAccessibility statement