Skip to main content
Solved

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

  • February 20, 2025
  • 2 replies
  • 39 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

Franco Tirabasso wrote:

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;

 

Franco Tirabasso wrote:

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.

View original

2 replies

tank666
  • tank666
  • 4858 replies
  • Answer
  • February 21, 2025
Franco Tirabasso wrote:

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;

 

Franco Tirabasso wrote:

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/@tank666
Franco Tirabasso

That worked perfectly! Thanks

Reply


Terms & ConditionsCookie settings

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