How to use variables for shadows?

Following, I was wondering the same thing

I also want to see this. Following, in case someone can come up with a workaround in the short term.

I just saw in the Config video Deep Dive Training [41:08] that this is coming in version 2. Hopefully before the end of the year.

However, “let’s do it in the next version” is usual product delivery talk for killing great initiatives. Fortunately for us, Figma seem to be operating slightly better than most other SaaS companies 😃

I’ll continue to follow this in case someone comes up with a workaround until v2 👀

Wondering the same over here! The only workaround I could imagine is to use an absolute positioned rectangle with the shadow color you want as a fill and blurring it out 🫠
Yet this makes absolutely no sense in the long run and it would just be quicker to just let us use variables (and color styles too!) in shadows as Hampus said (coming soon)

This workaround totally makes sense! I gave it a shot, and this “fake shadow” looks just like the real shadow and it works when I apply themes. 😀 I’m gonna use this workaround as a temporary solution until they begin supporting shadows in variables. Thank you for that!

Following! I would love to see this functionality added to Figma. My team needs to change the opacity of drop shadows between color modes and it would be great to use variables to retain consistency.

Sorry if someone has already asked but I just couldn’t find any info on this. My question is, is it possible to add a color token to dropshadow somehow? In the local variables in Figma.
Thanks

Not yet @Attila3

Please please, I would like to support different theme variables also for box-shadow

For a long run it makes sense to have these as components instead

same here! following

We need this 🙂

It looks like it’s been added to Figma.

To test it, I made my variables and created two modes: dark-mode and light-mode.

I set my desired shadows for light and dark under the ‘drop-shadow-opacity’ variable. Because I can’t give the drop shadow effect a boolean variable, I gave the light-mode a 0% colour opacity.

Then, once you’ve added your drop shadow to the frame, open the details and click the colour box.

From there, you can select the colour variable from your library. You can see it applied in the photo. I’d upload more photos, but new users can only upload one image.

Hopefully, that works for all of your needs, it’s been working for me!

That is great Ryan! 🎉

For context, the existing method works if you don’t have a multi-layer token system. Such as one layer for your primary color Palette and one layer for your Semantic colors. When you use multiple layers, you never want to ‘hard code’ values like this on a semantic or theme token, but instead reference another more primitive token. Multi-layer systems are very popular, and (more or less) crucial if you have design systems with multiple themes, modes or brands.

But you are right that this ticket is pretty much done. What we are waiting for is variables with alpha included 🙂 Go and vote on it if you haven’t already:

Great point! Voted.

A year and a half later and we’re all still waiting for more functionality with variables like drop shadows and typography. But thank goodness we have Figma Slides (which no one asked for). Figma keeping Tokens Studio in business.