Use from Figma

Advice: Strongly recommend to run Figma in Chrome (have seen some serious issues when running it in Safari)

1. First must activate dev mode. The small slider at the top right of the screen. This is required to get access to the code and props of your designs.

   

2. Go to Plugins and find the plugin Figma to Code (HTML, Tailwind, Flutter, SwiftUI) . Open this plugin.

3. Click on a component in your Figma file and look at the Plugin page for Figma to Code.

4. Ensure you select Tailwind for the convertor and under the Code section select Round to Tailwind Values** (Check below for some potential caveats of using Round to Tailwind Values)

Your page should look something like below:

1. You will see your code in the box. Copy this code.
2. Paste it in the left hand box of the reverse compiler website (https://flexgen.reflex.run/reverse-compiler/), under the words “Input HTML”.
3. On the right hand side of the reverse compiler website you should see your Reflex code ready to be copied to use in your app.

Additional Notes:

1. ** Round to Tailwind Values is helpful as it allows a lot more of your props to be taken out of the class_name and used as css props.

   I.e. below, more props will appear outside the class_name and will be as css props

   class_name="placeholder-transparent peer",
   placeholder="Email",
   padding_top="0.5rem",
   padding_bottom="0.5rem",
   border_bottom_width="2px",
   

But there is one minor caveat. If there are values such as w-[620px] h-[566px] which are too large for any tailwind conversion, the max is:

w-96: width: 24rem; /* 384px / and h-96: height: 24rem; / 384px */