Create React Figma Plugin

CLI

Figma

Rollup

TypeScript

NPM

Every time I started a new Figma plugin, I either started from scratch or copied a previous project and spent ages setting it up. This project provides a simple CLI (command line interface) to create an empty Figma plugin project with the build process already set up.

Check it out on GitHub

Goals

I had a few goals for this project:

  1. Make it easier to spin up a new Figma plugin project

  2. Have a server running to iterate on the front end (rather than re-running the plugin constantly in Figma)

  3. Learn how to configure bundlers (in this case Rollup)

  4. Learn about how to create useful and usable CLI tools

  5. Publish it on NPM

Process

To begin with, I started creating the template project which the CLI tool would use. Before creating the CLI tool itself, I wanted to make sure I had answered the first 3 goals of the project.

Bundlers

I used Figma's own example project as a starting point. With this setup, I quickly ran into issues given that it used a Webpack plugin that hadn't been updated in 3 years. This prevented me from using the most up to date version of Webpack and the HTML Webpack Plugin. Ultimately, I decided to move the bundling duties over to Rollup as I was able to use more up-to-date plugins.

Using Rollup I was able to configure it to bundle everything together ensuring compatibility with Figma while also serving a local server for quicker UI iteration. At this point, I included a number of other Rollup plugins to improve the developer experience including typescript, scss, svgo and terser.

Building the CLI tool

Given that the templates were created, the creation of the CLI tool itself went reasonably smoothly. I initially created it all in one file but eventually broke it out into individual components and converted them to TypeScript.

The flow of the tool is:

  1. Parse any arguments

  2. Recursively copy template files into the desired directory

  3. Edit JSON files with relevant details

  4. Create .gitignore

  5. Install dependencies

Writing the documentation

Documentation was an important aspect of this project as I have used many libraries in the past with confusing or inadequate documentation. Before starting to write it, I looked over a number of similar and popular projects to understand what works well and what doesn't.

When writing the documentation, I made sure to answer any questions I thought I may have if I had come across it. This also gave me an opportunity to spell out the features of the tool in more detail and explain why someone might want to use this project as a starting point.

Conclusion

I published the tool to NPM and have made a number of iterations since. I re-built two of my old Figma plugins using this as a starting point. This gave me good insight into some of the bugs and nuances which informed the updates that I've made since publishing it on NPM.

I plan to continue to update it as I create more Figma plugins. There are also a few improvements I want to add including:

  • Allow more arguments to be passed in

  • Increase test coverage

  • Add a testing library to the templates

  • More starter templates