Writing my first Figma plugin as a designer

Designers often run into manual tasks when using design tools. For example, renaming or resizing a dozen frames in a hurry, creating the same set of elements at the start of any projects, show or hide certain elements on the page, and many more. I often think about ways to improve or automate our design process, similar to how developers like to automate theirs. Instead of tweaking things manually, why not building tools ourselves.

After all, we know clearly what our pain points are and even better, what the solution might look like.

Last month, I joined Xero as a designer on the XUI Design System team. Soon, I learned that at the end of each two-week sprint, we have a jog day. On a jog day, we get to run wild and do something we are interested in as designers. Of course, the topics are design system related.

As you have guessed, I went down the Figma plugin rabbit hole and created two simple ones: Spaxer and Ixon.

The experience of creating Figma plugins was quite intuitive and joyful. I would like to share how I went about creating the plugins, and in hope it might help you decide if you would like to give it go.

Before we get started, here’s what you need to know about me:

• I have some experience with HTML and CSS (SASS if you will)
• I have some basic programming knowledge (i.e. if else statement and array)
• I can go as far as writing a couple of functions in vanilla JavaScript and get them running
• I have never written a line of code in a TypeScript file
• I have used terminal and git before

An easy setup

To start writing a plugin, go follow Figma’s setup guide. It took me around 10 minutes getting everything ready on my new work laptop.

In a nutshell, what you need are:

• Figma’s desktop app
• Visual Studio Code Editor
• Node.js and npm
• TypeScript