Skip to main content
Hampus_Svallfors
Jun 23, 2023 3:49 AM UTC
Question

How to use variables for shadows?

Hi, I would like to set the color of my shadows with a color variable. I know this isn’t possible with color styles, but does anyone know if it’s now possible now somehow? Hack is ok 😅

Otherwise, I feel having the same component between different variable modes would look strange because the shadow color would have to be the same for all modes, right?

Thanks

This topic has been closed for replies.

17 replies

rugarcia
Jun 23, 2023 1:48 PM UTC

Following, I was wondering the same thing

Dylan_Dickey
New Member
Jun 23, 2023 7:41 PM UTC

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

Hampus_Svallfors
Jun 23, 2023 7:57 PM UTC

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 👀

Facundo_Cabanne
Jun 23, 2023 7:57 PM UTC

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)

image
image

Dina_Sabat-Sporysz
Jun 27, 2023 10:42 AM UTC

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!

Sep 27, 2023 2:19 PM UTC

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.

Nov 3, 2023 6:47 PM UTC

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

Hampus_Svallfors
Nov 29, 2023 5:12 PM UTC

Not yet @Attila3

Alessandro_Viatore
Nov 29, 2023 5:35 PM UTC

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

Pavel_Kiselev
Power Member
Nov 29, 2023 9:28 PM UTC

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