Figma to React by Figroot

About this plugin

Instantly turn Figma into a pixel-perfect, responsive React and Tailwind CSS website. Saves you 10x time, completely for free. This tool is intended for Design Engineers to speed up their workflow immensely.

Watch the demo video here.

Features

1. Image download button for all images within the selection.
2. Font support that automatically detects and adds the fonts needed.
3. Tailwind custom config support for fonts (variables WIP).
4. We are continuing to improve the experimental Responsive Screen setting.

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
11. Congrats! Your Next.js app is running.