https://github.com/calebnance/figma-plugin-react-starter
Figma Plugin Starter: React + Webpack 5 + SCSS
https://github.com/calebnance/figma-plugin-react-starter
Last synced: 4 months ago
JSON representation
Figma Plugin Starter: React + Webpack 5 + SCSS
- Host: GitHub
- URL: https://github.com/calebnance/figma-plugin-react-starter
- Owner: calebnance
- License: mit
- Created: 2021-10-10T01:42:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-02T01:43:06.000Z (almost 4 years ago)
- Last Synced: 2025-07-22T10:51:48.309Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 975 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Figma Plugin: React Starter
## Table of Contents
- [Install & Build](#install--build)
- [Features](#features)
- [Linting](#linting)
- [Release Notes](#release-notes)
- [Helpful Links](#helpful-links)
## Install & Build
First, make sure you have [Node.js](https://nodejs.org) installed on your machine.
_if you use nvm_, `nvm use` to switch to 16.13.1
**Install:**
```bash
npm i
```
**Run Plugin locally with hot-reload:**
```bash
npm start
```
**Run UI in Browser:**
***(only use this for easier UI updates, doesn't interact with Figma layer)***
```bash
npm run serve
```
**Run Production bundle:**
**this bundles your plugin into a `.zip` for easy distribution, created within `/dist_zips/`
```bash
npm run bundle
```
## Features
- Webpack 5 + React (javascript) + SCSS
- Production Bundling + Zipped
- Interact with UI in Browser
## Linting
- `npm run lint` for a list of linting warnings/error in cli
- make sure you have prettier package installed:
- [prettier for atom](https://atom.io/packages/prettier-atom)
- [prettier for vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- then make sure to enable these options (packages → prettier):
- eslint integration
- automatic format on save (toggle format on save)
## Release Notes
**version 1.1.0**
- added [Dark Mode](https://www.figma.com/plugin-docs/css-variables/) support with the announcement of [Dark Mode for Figma](https://help.figma.com/hc/en-us/articles/5576781786647-Change-themes-in-Figma)
- updated React and React DOM to v.18
**version 1.0.0**
- Examples of how to:
- communicate with Figma via postMessage bridge
- traverse a Figma frame for images
- zoom/scroll to a specific node in the Figma Document
- resize the plugin
- close the plugin programmatically
- Started with React and React DOM to v.17
## Helpful Links
**Figma**
- [Post Message to UI Layer](https://www.figma.com/plugin-docs/api/figma-ui/#postmessage)
- [Close Plugin](https://www.figma.com/plugin-docs/api/figma-ui/#close)
**Webpack**
- [Webpack development](https://webpack.js.org/guides/development/)
- [Webpack dev server](https://webpack.js.org/configuration/dev-server/)
- [Webpack devtool](https://webpack.js.org/configuration/devtool/)
- [Webpack + React guide help](https://www.toptal.com/react/webpack-react-tutorial-pt-1)
- Errors
- [Webpack public pathing](https://stackoverflow.com/questions/64294706/webpack5-automatic-publicpath-is-not-supported-in-this-browser)
- [Webpack and transpiling](https://stackoverflow.com/questions/59709252/how-can-i-solve-my-typescript-eslint-webpack-transpiling-problem)
Based off [Figma Webpack React (TypeScript) Example](https://github.com/figma/plugin-samples#webpack--react)