Additional tips

Here are some additional things to keep in mind while designing for generating a higher quality code

1. Use fonts that are available on Google Fonts

Dualite is adapted to Google Fonts for the generated code. If you use a font in the Figma design that is not available on Google Fonts, it’ll be replaced by the default font, i.e Times New Roman. You can check the list of fonts available on Google Fonts here.

If you still wants to use custom fonts, then follow this guide here.

2. Font size mismatches

The font size displayed in Figma can at times be larger than the actual code output. This is an inherent Figma issue and not a Dualite issue.

https://forum.figma.com/t/font-size-displaying-larger-in-browser-than-in-figma/3766

3. Avoid masking, especially complex masking like Boolean

If there’s any group or frame in the design which is made through a series of masking/clips, we’ll recommend you to first export that whole group as a separate image and replace that Figma group with that image for optimal conversion to code