Figma plugin starter with React, Vite, and SCSS.
Using degit:
npx degit planetabhi/figma-plugin-react your-plugin-name
cd your-plugin-name
pnpm iOr using git clone:
git clone https://github.com/planetabhi/figma-plugin-react.git your-plugin-name
cd your-plugin-name
pnpm iUpdate the manifest.ts file
export default {
name: "Figma Plugin React", // Replace with your plugin name
id: "0000000000000000000", // Replace with your plugin ID
};Run the build
pnpm buildImport into Figma from dist/manifest.json
.
├── src
│ ├── assets/
│ ├── components/ # Reusable React components
│ ├── constants/ # Global config and values
│ ├── hooks/ # Shared React logic
│ ├── styles/ # SCSS/CSS styles
│ ├── types/ # TypeScript definitions
│ ├── utils/ # Helper functions and utilities
│ ├── canvas.ts # Figma canvas logic
│ ├── plugin.html # Entry HTML template
│ └── plugin.tsx # Plugin entry point
├── .eslintrc.json
├── .gitignore
├── eslint.config.js
├── manifest.ts
├── package.json
├── README.md
├── tsconfig.json
├── vite.config.canvas.ts
└── vite.config.plugin.ts- Cover Maker — A simple cover generator for Figma.