How Dualite translates Figma design settings into Code

Dualite converts all your designs into code, but in some cases, fallback mechanisms are applied because not all design effects from Figma are compatible with CSS.

Here’s a breakdown of what Figma supports and what you can expect from Dualite’s exported code when it comes to Fills, Effects, and Image Fallback.

At times, your designs may not look exactly the same in CSS as they do in Figma. If this happens, you can export that group/frame into an image, export that as an image and replace the group with the exported image, ensuring they maintain their original appearance from Figma.

Fills

Node Type	Fill Type	Supported?	Result in code
Frame, Component or Instance	Linear Gradient	Yes	CSS/Tailwind
Frame, Component or Instance	Radial Gradient	Yes	CSS/Tailwind
Frame, Component or Instance	Image	Yes	Img tag or nested div with img as background
Text	Linear Gradient	Yes	CSS/Tailwind
Text	Radial Gradient	Yes	CSS/Tailwind
Text	Image	-	Img tag

Effects

Node Type	Effect Type	Supported	Result in Code
Frame, Component or Instance	Inner Shadow	Yes	CSS/Tailwind
Frame, Component or Instance	Drop Shadow	Yes	CSS/Tailwind
Frame, Component or Instance	Layer Blur	Yes	CSS/Tailwind
Text	Inner Shadow	-
Text	Drop Shadow	Yes	CSS/Tailwind
Text	Layer Blue	Yes	CSS/Tailwind

Misc

Node Type	Scenario	Supported	Result in Code
Rectangle	Mixed corner radius	Yes	CSS/Tailwind
Text	Font is missing	-	Step is given in README of zip. Read more.