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

A react-based template for figma plugin development
https://github.com/adamj/figma-plugin-react-template

Last synced: 3 months ago
JSON representation

A react-based template for figma plugin development

• Host: GitHub
• URL: https://github.com/adamj/figma-plugin-react-template
• Owner: AdamJ
• License: mit
• Created: 2023-08-30T16:57:30.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-30T16:57:33.000Z (almost 3 years ago)
• Last Synced: 2025-06-15T10:06:13.855Z (about 1 year ago)
• Language: TypeScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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