How Dualite translates Figma design settings into Code
Last updated
Last updated
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.
Node Type | Fill Type | Supported? | Result in code |
---|---|---|---|
Node Type | Effect Type | Supported | Result in Code |
---|---|---|---|
Node Type | Scenario | 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
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
Rectangle
Mixed corner radius
Yes
CSS/Tailwind
Text
Font is missing
-
Step is given in README of zip. Read more.