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

Did this answer your question?