Anima will export all of your designs into code, but sometimes we implement fallback behaviors, as not all of Figma's design effects are currently supported in CSS.

Read below what the Figma behavior is, and what you can subsequently expect of Anima's exported code for Fills, Effects and Image Fallback.

❗️Please note:

Sometimes your designs don’t translate exactly the same in CSS as they appear in Figma. In this case, you can always mark a specific element for export, and it will export as an image, in order to keep the appearance exactly as you see it in Figma.

Fills:

Node Type	Fill Type	Supported?	Result in code	Reason
Frame, Component or Instance	Linear Gradient (*without adjusting the angle)	✅	CSS
Frame, Component or Instance	Radial Gradient	✅	CSS
Frame, Component or Instance	Angular Gradient	✅	CSS
Frame, Component or Instance	Diamond Gradient	➖	Fallback to Radial gradient	Diamond Gradient is not supported in CSS
Frame, Component or Instance	Image	✅	Will be added as a child img
Text	Linear Gradient	✅	CSS
Text	Radial Gradient	✅	CSS
Text	Angular Gradient	✅	CSS
Text	Diamond Gradient	➖	Fallback to Radial Gradient	Diamond Gradient is not supported in CSS
Text	Image	❎	Fallback to img
Stroke	Linear Gradient	✅	CSS
Stroke	Radial Gradient	✅	CSS
Stroke	Angular Gradient	✅	CSS
Stroke	Diamond Gradient	➖	Fallback to solid fill of 1st gradient color	Diamond Gradient is not supported in CSS
Stroke	Image	➖	Fallback to solid fill: black	Image strokes are not supported in CSS

Effects:

Node Type	Effect Type	Supported?	Result in code	Reason
Frame, Component or Instance	Inner Shadow	✅	CSS
Frame, Component or Instance	Drop Shadow	✅	CSS
Frame, Component or Instance	Layer Blur	✅	CSS
Frame, Component or Instance	Background Blur	✅	CSS
Text	Inner Shadow	➖	Fallback to drop shadow	Inner shadow is not supported for text in CSS
Text	Drop Shadow	✅	CSS
Text	Layer Blur	✅	CSS
Text	Background Blur	➖	No effect	CSS doesn’t support for letters, so we ignore

Image Fallback:

Node type	Scenario	Supported?	Result in code
Any	Marked to be 'exported as an image'	✅	Will sync/export as an image
Any	Export settings is set on the node	✅	Will sync/export as an image
Rectangle	Mixed corner radius	✅
Group or Frame	Has as a lot of small vectors/ shapes close together	➖	Will sync/export as an svg instead of png
Text	Font is missing	➖	Will sync/export as an image instead of text
Ellipsis	When using ellipsis with arc	❎	Will sync/export as an image
Group or Frame	There's a mask	❎	Will sync/export as an image