Skip to main content
Solved

Shadows variable between two different buttons

  • March 9, 2026
  • 1 reply
  • 51 views
Manuel Nuñez Lisboa

Hi everyone, I need help with the following: I'm creating a library with variables. Within it, I have two button design styles (skins). One skin is more classic, and the other is more modern. The idea is that when using a button from the library, I can choose the design skin. Changing the font, background, and corner settings between them works fine. However, the problem is that I need the shadow to only be present in one style, and if I change the skin, it shouldn't have a shadow. I'm creating the shadow values ​​using variables, but I don't know how to configure this.
I would greatly appreciate any help.

 

Best answer by AnatolyAnatoly

The reason you can't configure this the way you're trying: there is no shadow variable. Figma variables resolve to BOOLEAN, COLOR, FLOAT or STRING only, and a drop shadow is an effect, not one of those types. So there is nothing you can bind the whole shadow to.

Two approaches that do work for your two skins. First: boolean plus layer visibility. Put the shadow on a dedicated child layer inside the button, then bind that layer's visibility to a boolean variable. The modern mode sets it true, the classic one false. That is the closest thing to a real shadow toggle.

Second: make the skin a variant property instead, and apply the effect style only on the variant that needs it. Choosing the skin then swaps the whole appearance, shadow included, with no variable involved at all.

One trap worth avoiding: binding the shadow's colour to a COLOR variable and using a transparent value to switch it off. The variable's own alpha multiplies into the effect's opacity, so as soon as you have more than one elevation level the opacity ramp flattens and the levels stop reading apart. Toggle the layer or the variant, not the colour.

1 reply

AnatolyAnatoly

The reason you can't configure this the way you're trying: there is no shadow variable. Figma variables resolve to BOOLEAN, COLOR, FLOAT or STRING only, and a drop shadow is an effect, not one of those types. So there is nothing you can bind the whole shadow to.

Two approaches that do work for your two skins. First: boolean plus layer visibility. Put the shadow on a dedicated child layer inside the button, then bind that layer's visibility to a boolean variable. The modern mode sets it true, the classic one false. That is the closest thing to a real shadow toggle.

Second: make the skin a variant property instead, and apply the effect style only on the variant that needs it. Choosing the skin then swaps the whole appearance, shadow included, with no variable involved at all.

One trap worth avoiding: binding the shadow's colour to a COLOR variable and using a transparent value to switch it off. The variable's own alpha multiplies into the effect's opacity, so as soon as you have more than one elevation level the opacity ramp flattens and the levels stop reading apart. Toggle the layer or the variant, not the colour.

    Terms & ConditionsAccessibility statement