Figma Plugin React (Starter)

Figma plugin starter with React, Vite, and SCSS.

Install

Using degit:

npx degit planetabhi/figma-plugin-react your-plugin-name
cd your-plugin-name
bun i

Or using git clone:

git clone https://github.com/planetabhi/figma-plugin-react.git your-plugin-name
cd your-plugin-name
bun i

Build Your Plugin

Update 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

bun run build

Import Plugin Manifest

Import into Figma from dist/manifest.json

---

Plugin Structure

.
├── 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

Examples

Plugins built using this starter

• Type Scale — Quickly generate a modular typography scale.
• Typeset — Fix cases, quotes, dashes, spaces, and punctuation.
• Get Color Name — GET the color name instantly.
• Cover Maker — A cover generator with status, Jira, and YYQQ details.
• Layout Calculator — Simplify layout calculations, generate layouts.
• Percentage Calculator — Compute percentages, rates, and base values.
• Piano — Play piano right in Figma ♪♪♪ ヽ(ˇ∀ˇ )ゞ
• Tree Generator — Generate a tree structure from the selection.
• Console — Control Figma using commands.
• Notes — A simple note-taking app for Figma.
• GET raw data for AI models — Get detailed JSON about your selected Figma elements.