Skip to main content
djv
Figmate
djv
Community Support
December 6, 2023

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

  • December 6, 2023
  • 7 replies
  • 2284 views

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

      7 replies

      Nicolas_Python
      Nicolas_Python
      New Member
      December 6, 2023

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

      Jose19
      Jose19
      December 6, 2023

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

      jjcm
      Figmate
      jjcm
      Figmate
      December 6, 2023

      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.

        ErikJonathan_Nava
        December 6, 2023

        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.

          Nicolas_Python
          Nicolas_Python
          New Member
          December 6, 2023

          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.

          Peco-chan
          Peco-chan
          December 19, 2023

          @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:

          TAKI1
          TAKI1
          New Participant
          January 21, 2024

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

            Terms & ConditionsAccessibility statement