Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/planetabhi/figma-plugin-react
Figma plugin starter with React, Vite, and SCSS.
https://github.com/planetabhi/figma-plugin-react
figma plugin react scss starter vite
Last synced: 2 days ago
JSON representation
Figma plugin starter with React, Vite, and SCSS.
- Host: GitHub
- URL: https://github.com/planetabhi/figma-plugin-react
- Owner: planetabhi
- Created: 2024-12-20T07:16:46.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-02-06T17:26:35.000Z (9 days ago)
- Last Synced: 2025-02-06T18:34:22.098Z (8 days ago)
- Topics: figma, plugin, react, scss, starter, vite
- Language: TypeScript
- Homepage:
- Size: 393 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Figma Plugin React (Starter)
Figma plugin starter with React, Vite, and SCSS.
### Install
Using `degit`:
```bash
npx degit planetabhi/figma-plugin-react your-plugin-name
cd your-plugin-name
pnpm i
```
Or using `git clone`:
```bash
git clone https://github.com/planetabhi/figma-plugin-react.git your-plugin-name
cd your-plugin-name
pnpm i
```
### Build Your Plugin
Update the `manifest.ts` file
```js
export default {
name: "Figma Plugin React", // Replace with your plugin name
id: "0000000000000000000", // Replace with your plugin ID
};
```
Run the build
```bash
pnpm build
```
### Import Plugin Manifest
Import into Figma from `dist/manifest.json`
---
### Plugin Structure
```bash
.
├── 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
- [Cover Maker](https://github.com/planetabhi/figma-cover-maker) — A simple cover generator for Figma.