Configuration

Let's create a new figma plugin and Install dependencies before you starting configure project. It is recommended to use the following structure of project:

├── src
│ ├── components
│ ├── App.tsx
│ ├── code.tsx
│ ├── ui.html
│ └── ui.tsx
├── manifest.json
├── package.json
├── tsconfig.json
└── webpack.config.js

React Figma uses both main and ui threads. So, they need to be configured and manifest.json should contains main and ui threads:

{
"name": <Plugin Name>,
"id": <Generated ID>,
"api": "1.0.0",
"main": "dist/code.js",
"ui": "dist/ui.html"
}

Configure Webpack

Install

Install Webpack: yarn add webpack webpack-cli -D or npm i webpack webpack-cli -D

It's recommended to use react-figma-webpack-config. Install it: yarn add react-figma-webpack-config -D or npm i react-figma-webpack-config -D, and use inside webpack.config.js:

var configure = require('react-figma-webpack-config');
module.exports = configure();

Configuration also can be extended:

var configure = require('react-figma-webpack-config');
module.exports = configure({
entry: {
ui: './src/ui.js', // The entry point for your UI code
code: './src/code.js' // The entry point for your plugin code
},
...
});

Add to npm scripts

Command yarn webpack:watch will be used for the launching plugin build:

{
"name": "<project-name>",
"scripts": {
"webpack:watch": "webpack --watch"
},
"dependencies": {
"react": "^16.9.0",
"react-figma": "latest"
},
"devDependencies": {
"react-figma-webpack-config": "0.0.2",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
}
}

Universal rendering

Webpack aliasing can be used for the universal rendering:

var configure = require('react-figma-webpack-config');
module.exports = configure({
resolve: {
alias: {
'react-native$': 'react-figma'
}
}
});

Configure main thread

At the code.tsx:

import { setupMainThread } from 'react-figma/rpc';
figma.showUI(__html__, { visible: false });
setupMainThread();

Configure ui thread

At the ui.tsx:

import * as React from 'react';
import { App } from './App';
import 'react-figma/rpc';
import { render } from 'react-figma';
render(<App />);