Optimizing Code Quality
Figma is a designer tool built without code generation in mind. We try our best to detect and deliver close to 100% code perfection but that may not always be the case.
The following settings are for optimizing your code quality to suit your Figma design and code requirements. They are available in the Settings dialog in the plugin. It can be opened by clicking on the Settings icon in the toolbar at the bottom of the plugin interface.
Typescript
Typescript is king, but if you are looking to integrate the output into js files, ticking this generates code without types, making it easier to integrate into your js project
Code will still be generated in .ts files, just without the types
Approximate Tailwind Colors
Tailwind CSS has a default color palette. Tick this if you want to change your colors to match the closest color in the Tailwind's default color palette during code generation.
For example, bg-[#EA6001] will be automatically changed to bg-orange-500
Tailwind Rounding
Tailwind has a bunch of default values for distance related properties such as width, height, gap, etc. Tick this if you want to round your these values to the nearest tailwind default.
For example, w-[17px] will be automatically changed to w-4 (16px)
Not supported on Engine 1.
Conversion Engine
We have 2 engines that you can choose from. Engine 2 is the latest algorithm we developed aimed at delivering even better code quality. However, if you are not statisfied with the code quality, you can try switching to our legacy Engine 1, which has been around longer and tested more extensively.
Engine 1 does not support Tailwind Rounding. Try Engine 2 if Tailwind rounding is important to you.
Engine 2 only supports single file output (for now). We are working to fix it as soon as possible. Try Engine 1 if code componentization is important to you.
Engine 1 will no longer be maintained after November 2023, after which we will run Engine 2 by default.
Additional tips and caveats
Breakpoint Behaviour
Figma designs are static and don't account for mobile and desktop breakpoint behaviour. As such, the plugin has no way of knowing how you wan't your elements to behave at different breakpoints.
Convert your designs by chunks at the component level. (i.e. convert one component at a time) This will make it easier for you to add in your own custom breakpoint behaviour in production
If you are confident that there isn't much breakpoint behaviour to program, or if your final design is pretty much static, feel free to convert at page level
Custom AI Enhancements
The features within custom AI enhancements are only available for enterprise customers or now. If you would like access, simply book a meeting with us here: