Binding variables to gradient stops

Plugin and Widget API Questions
,
1

Hi :wave:t2:

Is there any way to bind variables to my gradient with Plugin API?
We got gradientStops and boundVariables for them, but I can’t see any way to set bound variables for it.

setBoundVariable() is for bindable fields, setBoundVariableForPaint() is for solid paints.

Is there any methods or plans to make ones for the gradient stops?
Cheers!

Example of gradient layer with bound variables

image
image1444×520 71.2 KB

2

Hey there!

Regarding binding variables to gradients using the Figma Plugin API, currently, there isn’t a direct method similar to setBoundVariableForPaint() for gradient stops. The API supports gradientStops and boundVariables, but as you mentioned, setting bound variables specifically for gradient stops isn’t available yet.

If you’re looking to dynamically control gradient stops via plugins, consider exploring workarounds such as manipulating gradient stop positions programmatically or using preset gradients that your plugin can switch between based on variables.

As for future updates, it’s worth keeping an eye on Figma’s API documentation or developer forums for any announcements or additions to support gradient stop bindings more directly.

Hope this helps clarify things!

1 Like
3

You can bind variables to gradient color stops by setting the fills property on the node, like:

figma.currentPage.selection[0].fills = [
  {
    type: 'GRADIENT_LINEAR',
    gradientTransform: [
      [0, 1, 0],
      [-1, 0, 1]
    ],
    gradientStops: [
      { 
        position: 0, 
        color: { r: 0, g: 0, b: 0, a: 1 }, 
        boundVariables: { color: { type: 'VARIABLE_ALIAS', id: 'VariableID:2:5'} }
      },
      { 
        position: 1, 
        color: { r: 0, g: 0, b: 0, a: 1 }, 
        boundVariables: { color: { type: 'VARIABLE_ALIAS', id: 'VariableID:3:8'} }
      },
    ]
  }
]
1 Like
4

Woah, that’s awesome, thank you :orange_heart:
Seem not obvious, but works like a charm.

Is it expected way to set variables, or some binding function is expected in the future?

5

For setting variables inside complex objects like fills, effects, etc…, you can always create a new object with the bound variables inside and apply it to the node, e.g.

node.fills = // your new object
// or
node.effects = // your new object

To more easily understand the object structure, it helps to create the node you want manually in the UI and then inspecting the desired node properties.

There are a number of helpers (Working with Variables | Plugin API) to help you create variable references inside these complex objects but those are just helpers and not strictly necessary as long as you have an object with the correct structure. For gradient paints, setBoundVariableForPaint() doesn’t work because you can have different variables for each color stop.

1 Like
6

That explains why they are called helpers!

Is it okay to put random colours and values when you set bound variable in this kind of object? Does it work like a fallback?

7

The static color is ignored and is not a fallback.

1 Like