Figma to React Tailwind Code Generator Free by Figroot

About this plugin

The best Figma to React plugin for free. Instantly turn Figma into a pixel-perfect, responsive React and Tailwind CSS website free. Saves you 10x time, in just one click. The only free Figma to React Tailwind CSS plugin with semantic HTML and best quality code.

Watch the demo video here.

How to use

1. Click the Figma screen
2. Copy the generated code
3. Paste the code into page.tsx or any component your app.
4. Paste the generated fonts and tailwind code into the corresponding files.
5. Viola! Pixel-perfect code!

How to set up the React website

Below are the instructions to run your own React website, using Next.js and Tailwind CSS.

1. Download Node.js (LTS) from the official website here.
2. Next, install TypeScript using the command in your terminal: npm install -g typescript
3. Create a Next.js app using the command in your terminal: npx create-next-app@latest
4. Name your project your-project-name.
5. On installation, spam enter to use the default settings for the prompts.
6. Download Visual Studio Code here.
7. Open Visual Studio Code, click File > Open Folder > your-project-name
8. In the upper left, click Terminal (it could be hidden in the 3 dots), then New Terminal.
9. In the Terminal, type npm i, then npm run dev.
10. Hold ctrl and click the link next to Local:, should look something like: http://localhost:3000

Congrats! Your Next.js app is running.

Features

- Image download button for all images within the selection.

- Font support that automatically detects and adds the fonts needed.

- Tailwind custom config support for fonts (variables WIP).

- Responsive Screen mode.

We are continuing to improve the experimental Responsive Screen setting.