Is It Possible to Export SVG file with Saving ''Drop Shadow" Effect?
Solved
Exporting SVG
Best answer by Lea_Delazer1
So, this is definetely a bug but I found a way to work around it for now… There is a new option to show shadows behind transparent areas and if this one is checked, the shadows will export correctly. However, the checkbox only appears if you have transparency in your fill layers.
So here are the steps for you to export your designs:
- select the layer that has drop shadow (rectangle, text, anything)
- change fill to 99% of your color
- edit the drop shadow where you should now see a checkbox “Show behind transparent areas”
- Check the checkbox on
- (optional) Set the fill back to 100%, this will make the box disappear but apparently the now hidden setting still helps
- repeat for all layers that have drop shadow
@Josh This seems like a bug difficult to report. Do you know of an existing issue or can you convert this one to a bug? Without the checkmark set, the drop shadows will export / import as inset shadows.
This topic has been closed for comments
Yes, you can export svgs. If the element with a shadow is inside a frame, the final SVG might clip the shadow depending on your frame settings.
On thing to be aware of: if you use shadows with multiple settings layers, the resulting SVG will look different from your initial design because Figma does not manage to add those stacked shadows to the groups of the svg. You might have to play around with stacking multiple layers. But simple shadows should work fine.
Thank you for your reply! I have a problem that ‘‘Drop Shadow’’ effect is just dissapear when i try to copy or convert my work into svg. All components is in frame.
It’s really difficult to identify the problem without any detailed information 😅
- Did you try to export as svg or did you just copy the frame?
- Did you apply any blend modes (like “Multiply”) to the shadows?
- Is it a very complex design with many groups and layers or someting simple like an icon?
• I tryed to export and to copy the frame. The results are simillar
• No, i don’t use any blend modes to shadows
• I can’t say it is a very complex design, but yes, i have about 7-8 groups in it 🫠
Like here, first is my figma work, second is in svg
Ok great, that should be doable. Looks as if Figma did not convert the shadow settings correctly and created an inset shadow. Could you also share a screenshot of the shadow settings? I assume you stacked multiple shadows, but I might be wrong 😅
Final Summer Layer.
Sale Layer.
And Square Layer, yes there are 2 shadows 😅
So for the rectangle you could try to use just one drop shadow or try to create tow layers, each with one of the different shadows.
For the text I’m also a bit baffled now, tried around with it and Figma seems to always convert the drop shadow into an inset shadow. This might be a bug… I’ll maybe try some more and let you know if I come across a solution for exporting the drop shadow on text…
1 person likes this
Nah, nothing changes by creating two layers of square or using just one shadow.
I was pretty surprised that i could’t find any information in a web about this problem :р
Thank you again for trying to help me with this situation 🙂
So, this is definetely a bug but I found a way to work around it for now… There is a new option to show shadows behind transparent areas and if this one is checked, the shadows will export correctly. However, the checkbox only appears if you have transparency in your fill layers.
So here are the steps for you to export your designs:
- select the layer that has drop shadow (rectangle, text, anything)
- change fill to 99% of your color
- edit the drop shadow where you should now see a checkbox “Show behind transparent areas”
- Check the checkbox on
- (optional) Set the fill back to 100%, this will make the box disappear but apparently the now hidden setting still helps
- repeat for all layers that have drop shadow
@Josh This seems like a bug difficult to report. Do you know of an existing issue or can you convert this one to a bug? Without the checkmark set, the drop shadows will export / import as inset shadows.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.