https://github.com/nirsky/figma-plugin-react-template

Quickstart your Figma Plugin with this template and tooling.
https://github.com/nirsky/figma-plugin-react-template

boilerplate figma-plugin react template

Last synced: 16 days ago
JSON representation

Quickstart your Figma Plugin with this template and tooling.

• Host: GitHub
• URL: https://github.com/nirsky/figma-plugin-react-template
• Owner: nirsky
• License: mit
• Created: 2019-08-03T14:00:58.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-01T21:01:57.000Z (8 months ago)
• Last Synced: 2025-03-28T11:08:26.497Z (23 days ago)
• Topics: boilerplate, figma-plugin, react, template
• Language: TypeScript
• Size: 410 KB
• Stars: 467
• Watchers: 1
• Forks: 95
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-figma - figma-plugin-react-template
• awesome-figma - figma-plugin-react-template - 快速启动Figma插件，提供模板和工具。 (插件开发)
• awesome-figma - figma-plugin-react-template - 快速启动Figma插件，提供模板和工具。 (插件开发)

README

        
# Figma Plugin React Template

![62862431-71537f00-bd0e-11e9-85db-d97c0fb729a4](https://user-images.githubusercontent.com/16322616/62862692-46b5f600-bd0f-11e9-93b0-75955d1de8f3.png)

This template contains the react example as shown on [Figma Docs](https://www.figma.com/plugin-docs/intro/), with some structural changes and extra tooling.

## Quickstart

- Run `yarn` to install dependencies.

- Run `yarn build:watch` to start webpack in watch mode.

- Open `Figma` -> `Plugins` -> `Development` -> `Import plugin from manifest...` and choose `manifest.json` file from this repo.

⭐ To change the UI of your plugin (the react code), start editing [App.tsx](./src/app/components/App.tsx).  

⭐ To interact with the Figma API edit [controller.ts](./src/plugin/controller.ts).  

⭐ Read more on the [Figma API Overview](https://www.figma.com/plugin-docs/api/api-overview/).

## Toolings

This repo is using:

- React + Webpack

- TypeScript

- Prettier precommit hook