Figma Make → React/Next Fix

Automatically fix imports, JSX, and boilerplate in Figma Make → React & Next.js projects.

Overview

Figma Make → React/Next Fix is a VSCode extension designed to streamline the workflow for developers converting Figma designs into React or Next.js applications.

With this extension, you can automatically:

• Remove unnecessary "use client" statements.
• Fix versioned or incorrect imports.
• Ensure JSX type imports are correctly added.
• Clean up boilerplate code generated by Figma Make.

Simply run the command “Fix Imports in Workspace” from the Command Palette, and all .ts and .tsx files in your project will be updated automatically.

Save time, reduce errors, and make your Figma Make → React/Next.js projects production-ready faster.

Features

• ✅ Fix versioned imports (e.g., embla-carousel-react@8.6.0 → embla-carousel-react)
• ✅ Correct common import mistakes (like "motion/react" → "framer-motion")
• ✅ Automatically add import type { JSX } from "react"; where needed
• ✅ Remove unnecessary "use client" directives
• ✅ Logs detailed operations in a dedicated Output Channel
• ✅ Popup notifications for start, completion, and major errors only

Installation

1. Open VS Code
2. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac)
3. Run:

ext install yourPublisherName.figma-make-react-next-fix

4. Or download the .vsix file and install locally

Usage

1. Open your React or Next.js workspace generated by Figma Make.
2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
3. Search for Fix Imports in Workspace and run the command.
4. Check the Output Channel Figma Make → React/Next Fix for detailed logs.

Credits

• Sanni Abiodun (Abreel) – GitHub
• Design Synchrony – Website

Contribution

Contributions, suggestions, and improvements are welcome! Visit the GitHub repository: https://github.com/Designsynchronyorg/pivoral

Marketplace Keywords

Figma, React, Next.js, Figma Make, JSX, import fixer, boilerplate, TypeScript, TSX, frontend, UI, design to code

License

MIT