Figma Developers

Figma Developers

  • Introduction
  • API Reference
  • Updates

›Using External Resources

Getting Started

  • Introduction
  • Prerequisites
  • Setup Guide
  • What's Supported

Basics of Plugins

  • How Plugins Run
  • Accessing the Document
  • Editing Properties
  • TypeScript
  • Plugin Manifest
  • Creating a User Interface

Development Guides

  • Making Network Requests
  • Working with Images
  • Debugging
  • Frozen Plugins

Properties

  • ~

Using External Resources

  • Libraries and bundling
  • Bundling with Webpack
  • Bundling React
  • Build Scripts
  • Resource Links
  • Figma Components

Other

  • Publishing
  • Stability and Updates
  • Proposed API
  • Samples
  • Get Help
  • Known Issues

Bundling React

Like most libraries, it suffices to just install the React libraries with NPM and import them into your TypeScript code. Webpack will take care of bundling the library code. The only slightly trickier thing with React is that you need to configure your plugin to support JSX syntax.

Here's how to enable JSX syntax in the sample Webpack project above (assuming you've already followed the steps in the Bundling with Webpack section.

Full sample code for this tutorial is available in the Figma Plugin Samples repository.

1. Install the relevant React packages

npm install react react-dom
npm install --save-dev @types/react @types/react-dom

2. Modify tsconfig.json to support parsing JSX syntax:

JSX is an extension of the JavaScript syntax that allows you to write HTML-like tags inside the JavaScript.

{
  "compilerOptions": {
    ...
    "jsx": "react"
  }
}

3. Update src/ui.html

This just creates an empty <div>. On startup, React will take this <div> and replace it with what it renders.

<div id="react-page"></div>

4. Update src/ui.ts to src/ui.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import './ui.css'

declare function require(path: string): any

class App extends React.Component {
  textbox: HTMLInputElement

  countRef = (element: HTMLInputElement) => {
    if (element) element.value = '5'
    this.textbox = element
  }

  onCreate = () => {
    const count = parseInt(this.textbox.value, 10)
    parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')
  }

  onCancel = () => {
    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
  }

  render() {
    return <div>
      <img src={require('./logo.svg')} />
      <h2>Rectangle Creator</h2>
      <p>Count: <input ref={this.countRef} /></p>
      <button id="create" onClick={this.onCreate}>Create</button>
      <button onClick={this.onCancel}>Cancel</button>
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('react-page'))

Note how, on the last line, we refer to the <div id="react-page"> that we created previously.

5. Refer to the new ui.tsx entry point in webpack.config.js:

{
  ...
  "ui": "./src/ui.tsx", // The entry point for your UI code
  ...
}

6. Re-run the Webpack bundler on the command line

npx webpack --mode=production

That's it!

← Bundling with WebpackBuild Scripts →
Learn more about Figma