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.
Goals
I had a few goals for this project:
Make it easier to spin up a new Figma plugin project
Have a server running to iterate on the front end (rather than re-running the plugin constantly in Figma)
Learn how to configure bundlers (in this case Rollup)
Learn about how to create useful and usable CLI tools
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:
Parse any arguments
Recursively copy template files into the desired directory
Edit
JSON
files with relevant detailsCreate
.gitignore
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