Variables can now be bound to new fields in Figma! 🎉

Variables can now be bound to new fields in Figma

  • Effects:
    • Inner shadow
      • Number variable fields: X, Y, Blur, Spread
      • Color variable fields: Effect color
    • Drop shadow
      • Number variable fields: X, Y, Blur, Spread
      • Color variable fields: Effect color
    • Layer blur
      • Number variable fields: Blur
    • Background blur
      • Number variable fields: Blur
  • Stroke weight
    • Number variable fields: Stroke weight, bottom weight, right weight, left weight, top weight
  • Layout grid
    • Number variable fields: Count, width, margin, offset, gutter
  • Layer opacity
    • Number variable fields: Opacity

Nested Instance Variant Binding: now, string variables can be bound to a nested instance’s variant properties, rather than only parent instances.

Additionally, you can resize the variables authoring window.

Learn more!

4 Likes

Love Figma. Stroke doesn’t work in Europe. Effects should be able to reference to variable colors. Keep it up!

If you have it in a file separate from the design it doesn’t work. Unless you have all the options checked.

Effects can reference colors as well with this update. For stroke, you’ll need to right click on the stroke width field to apply the variable.

4 Likes

Nested Instance Variant Binding : now, string variables can be bound to a nested instance’s variant properties, rather than only parent instances. What is the use case for this? What it looks like in the video is what we’ve been able to do since variables dropped, attach a variable to the property of an instance.

1 Like

Cool - thanks for the hint. I was expecting it to be implemented similar with other fields. About the color: I was also looking for the variable indicator on color input.

@dvaliao Thanks for the update!


I ran into an issue with the Nested Instance Variant Binding
In the Switch component variables & conditionals are NOT assigned on the component’s variants, but on the noodles of the instance variants since instances of this switch comp are to be used to trigger different elements in different contexts.
E.g. a switch in a filter bar above a list shows/hides specific list items. Another switch triggers in a Profile page turns an option on/off.

The Issue

  1. I assign a “Visible” var to the gray bar.
  2. On click on the switch’s “Hover on” state the gray bar should disappear. So, on its MouseUp event I set the “Visible” var to ‘false’.
  3. I click the switch, and lo and behold, the gray bar disappears. Success (for now)
  4. Since the “Hover on” state should NOT be the default, I change the switch’s state back to its “On” state.
  5. When hovering the switch it’ll logically change to its “Hover on” state. Clicking it I’d expect the gray bar to disappear, BUUUT… Nope… It completely ignores the set var command :tired_face:

In summary,
unless I clone the “switch combo” comp for each and every different context this var assigning to variant instances I completly pointless and defeats reusability aspect of comps+vars.

If I’m doing something wrong, please let me know, I’d be eternally grateful :pray::bowing_man:t3:

I am looking forward to the possibility of adding variables to the font size :raised_hand:

1 Like