Figma Plugin API

How I built a Figma Plugin template and then built a project on it.
Figma Plugin API

This whole journey started when, at Square, I was asked to help out on a hackweek project where the team wanted to create a Figma plugin to help with localization. The idea was to tie Figma directly to both Chat-GPT and Square's internal translation service through a Figma UI. As the engineer of the group, I went ahead and looked into the dev tooling for building Figma plugins. I was not super pleased with it. The templates were all React-based or, as with the one we chose, React derivatives like Preact.

Ultimately, everything was fine. React works great and I can build with it even if it isn't really my favorite. We got a prototype of our plugin up and running to present at the end of hackweek.

Template creation

With hackweek over, my "at work" time was redirected to my normally scheduled project work. I no longer had reason to be working on Figma plugins. The hackweek did open my eyes to how easy it was to build plugins however and I never forgot that. I explored building my own plugins in my personal time. I never got over the less-than-ideal support for Svelte - my preferred javascript framework - however.

Figma + Svelte + Vite

I finally set out to build a template for Figma Plugins built with Svelte. This is how I ended up with this template . Figma had this nice library for creating Widgets in FigJam that I was able to repurpose over to Svelte. I later added some extra functions to help with communications between the Figma section of the code and the Svelte UI section.

In production

Figam Plugin at Square

I was actually later able to use this template for a project at Square. A production designer on my team at the time came to me to help him build a productivity tool that would make it easier for production designers to localize images. They were constantly asked to reference an internal Square page for approved translations for the fake businesses Square uses in its marketing imagery. Switching back and forth between screens to copy and paste text and images was/is unnecessarily time-consuming. Our plugin brought the text and images from the interal page directly into Figma. Thus, it allowed production designers to keep everything directly where it was useful.

note: I also later sent this template to another developer at Square for use in one of their hackweek projects so its been used a couple times!


Back to my portfolio