Figma Plugin: React Starter

Table of Contents

• Install & Build
• Features
• Linting
• Release Notes
• Helpful Links

Install & Build

First, make sure you have Node.js installed on your machine.

if you use nvm, nvm use to switch to 16.13.1

Install:

npm i

Run Plugin locally with hot-reload:

npm start

Run UI in Browser:

(only use this for easier UI updates, doesn't interact with Figma layer)

npm run serve

Run Production bundle:

**this bundles your plugin into a .zip for easy distribution, created within /dist_zips/

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
  • prettier for 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 support with the announcement of Dark Mode for 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
• Close Plugin

Webpack

• Webpack development
• Webpack dev server
• Webpack devtool
• Webpack + React guide help
• Errors
  • Webpack public pathing
  • Webpack and transpiling

Based off Figma Webpack React (TypeScript) Example