Skip to main content

Conversion Settings

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

✅ Auto Detect Components​

Checking this allows our algorithm to detect similar designs in your selection and merge them into components that are reused in the generated output. Uncheck this if you want all the code in one file.

✅ LLM Enhancer​

Passes the code into GPT with prompts to improve the code in general. Internally, the given prompts include:

  1. Renames components, their prop names, and media files based on what GPT thinks its supposed to be
  2. Detecting and extracting more resuable components
  3. Detecting, buttons form inputs, labels, and renaming the element tag as <button>, <input> and <label> respectively
  4. Detecting dropdowns for and replacing the element tag with a dropdown element.
  5. Detecting possible semantic tags and renaming their element tags for better SEO (e.g. <header>, <footer>, <section>, <a>)
  6. Detecting possible linked pages and applying the functionality

info

GPT, like all LLM's may not work 100% of the time. Note tht not all the prompts will follow through.

✅ Import Tailwind Styles​

Import your Tailwind theme configuration from your exisiting tailwind.config.js file as styles in Figma. Doing this will also upload your tailwind design system into your Figma project as Figma styles. For example, the tailwind class bg-red-500 could be exported to a corresponding tailwind theme color bg-alert

The styles from your tailwind config can also be used in Figma as Design system tokens, for example your new bg-alert color defined in the tailwind config will be available in the UI.

For a full guide and step by step process on how to import your tailwind styles, click here

Learn about Figma Styles

✅ Approximate Tailwind Colors​

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)

tip

It is recommended to uncheck this if your goal is to achieve the exact color in the generated output

🎚️ Tailwind Rounding​

Adjusting the value of the bar tells us how much we should round values like w-[16px] to w-4. It uses the closest tailwind style if it is within x% of the original. The higher the value, the more it's rounded off.

tip

It is recommended to set this to zero if your goal is pixel perfection, as rounded values, may cause misalignment.