https://github.com/gracefullight/figma-plugin-starter
React Typescript Figma plugin starter kit.
https://github.com/gracefullight/figma-plugin-starter
figma figma-plugin figma-plugin-example
Last synced: 8 months ago
JSON representation
React Typescript Figma plugin starter kit.
- Host: GitHub
- URL: https://github.com/gracefullight/figma-plugin-starter
- Owner: gracefullight
- License: mit
- Created: 2023-04-10T13:14:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-16T14:45:21.000Z (about 2 years ago)
- Last Synced: 2025-03-04T12:32:43.657Z (about 1 year ago)
- Topics: figma, figma-plugin, figma-plugin-example
- Language: TypeScript
- Homepage:
- Size: 56.6 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @gracefullight/figma-plugin-starter
This is a preset for creating Figma plugins using React and esbuild. The starter kit is based on the [esbuild-react](https://github.com/figma/plugin-samples/tree/master/esbuild-react) sample provided by Figma.
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) (v20 or higher)
- [Pnpm](https://pnpm.io/) (v8.15 or higher)
### Installation
1. Clone this repository: `git clone https://github.com/gracefullight/figma-plugin-starter.git`
2. Navigate into the project directory: `cd figma-plugin-starter`
3. Install dependencies: `pnpm install`
### Usage
#### Development
To start the development server, run:
```bash
pnpm dev
```
This command will start the following processes concurrently:
- `tsc` - TypeScript compiler in watch mode for both the main code and UI code
- `build` - esbuild bundler for the main code in watch mode
- `vite` - development server for the UI code with HMR (hot module replacement)
Once the server is up and running, open Figma and navigate to Plugins > Development > Create new plugin. Choose "Link existing plugin" and select the `manifest.json` file in the project directory.
#### Building
To build the plugin, run:
```bash
pnpm build
```
This command will create a production-ready version of the plugin in the `dist` directory.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more details.