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 |