Click the Figma screen

Select the Figma frame or component you want to convert to React code. The plugin will analyze your design and generate the corresponding code.

Copy the generated code

Once the plugin generates the code, click the copy button to copy the React component code. The code includes all necessary Tailwind CSS classes and semantic HTML structure.

Paste the code into your component

Paste the generated code into page.tsx or any component file in your Next.js app.

Paste the generated fonts and Tailwind code

Copy the font imports and Tailwind configuration code provided by the plugin. Paste the fonts into your layout.tsx or font configuration file, and update your tailwind.config.tswith the provided configuration.

Voilà! Pixel-perfect code!

Your Figma design is now a fully functional React component with pixel-perfect styling. The generated code is production-ready and follows best practices.