Skip to main content

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!


twitter.com

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.


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.


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 😫


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 🙏🙇‍♂️t3:


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


Reply