Creating a Figma Plugin

Recently I attended Figma’s very first conference Config, meeting lots of amazing and inspiring people who are all passionate about design and tech. One of the many talks was about how the community is creating plugins to minimize repetitive work and speed up design processes, which got me inspired to create a small Figma plugin myself and see what it’s all about.

Config 2020

One of my favorite things to do has always been optimizing workflows. While I was working for a company to do data analysis and statistic reports, I joined a team that was doing all the report generation manually, which took them (a team of 4) about a week. Seeing the repetitive work they were doing every day and how prone to error it was, it was very clear that a big part of it can be automated. After creating a little application to automate the report generation, those 4 weeks of work turned into 10 minutes of work with 1 minute just waiting for the application to do its thing and 9 minutes to check if everything ran correctly. Since that day, every time I’m doing some repetitive work, I’ll try to see if any patterns in my workflow can be automated and optimized to save me or others’ time in the long run.
Currently, Figma’s capability of creating components and using instances as building blocks of an efficient and adaptive design system helps a lot in optimizing my workflow. I love the way components in Figma work and how instances can override the attributes of its component. But with plugins, there now are even more possibilities to improve and speed up your design process and workflows!

Star Maker — a first look on what it is like to build a plugin for Figma

Star Maker is a simple plugin I created to generate those star ratings you often see in food apps like Open Table or reviews on Google Maps and after your Uber ride to rate your experience. I got inspired by my wife while she was designing some star ratings and also found myself many times creating such and fiddling around with their shapes and how to design a half star rating the fastest way. Sounds like a plugin could come in handy!

Setting the goal!

Create a small plugin that can generate star ratings by defining the total amount of stars and the rating itself. Further, users should be able to customize a star’s attribute like ratio or fill color and whatever is provided by the Figma API. One important last requirement — make it cute!

Star Rating

Step 1 — Setting up your development environment

First, you’ll need the Figma desktop app since it’s currently the only place that provides the option to build and test your plugin.
You’ll also need a code editor, best is to use Visual Studio Code and you’ll need to install TypeScript.
Install TypeScript by opening your Terminal on Mac and enter
sudo npm install -g typescript
You might be asked to enter your admin password, then hit enter. Once TypeScript is installed, also make sure you have Node.js installed then switch to your Figma desktop app and initiate your first new Figma plugin by going to
Menu > Plugins > Development > New Plugin
or if you are part of the new Community Beta then you’ll find it in
Menu > Your Username > Plugins > Create new plugin
Go for Generate from template and give your plugin a name. Then choose the type of plugin you want to build, we will choose With UI & browser APIs.

You will see your new project in the list of plugins which are In Development. Clicking on it brings you to the code folder. Open this folder in Visual Studio Code.
To set up the TypeScript compilation in Visual Studio Code, hit ⌘⇧B (Ctrl-Shift-B for Windows) then select
tsc: watch - tsconfig.json

This will watch for changes you make in code.ts and generate code.js whenever you save your file.
Now you are ready to test the template plugin. Create a new design file in Figma and right-click > Plugins > Development > YOUR PLUGIN

This template plugin will generate X amount of squares. It was a good place to start for my Star Maker plugin since I needed to generate X amount of stars.
Whenever you want to test new changes on your plugin hit ⌥⌘P for Mac or Ctrl+Alt+P for Windows to rerun the las plugin you used.

Step 2 — Design it

Building a plugin is done in TypeScript (logic) and HTML (UI).
For Star Maker it was quite straight forward in what I needed. I first built a simple version of the UI with what I thought are some basic options.

This UI looked quite dry and since this plugin is very simple, I wanted it to bring some joy whenever you run it. A cute icon was very much needed and some better content layout. Obviously, the icon had to be a star

And a bit of a more structured UI

To add the star icon to the UI I needed to have it as a base64 string, a simple PNG or SVG won’t work. The fastest way was to just convert my star_logo.svg into a base64 and then implement it like a regular image in HTML which looks like this:

<img src=”data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i…”>

I used Base64Guru to do the conversion, I’m sure there are other ways but this did the job.
Your plugin UI in Figma will have an X on the top right and the plugin title at the upper left, everything else is up to you and how you want to design your UI by using CSS and HTML.

The next step was to get the info from the input fields and use those data to create the stars. At this point, I realized that we need more attributes especially the color for the strokes and fills of the stars.
After showing the UI to other people, Ratio didn’t seem clear, so I added some fun pictograms to visualize what effects all the attributes had on a star, which eventually looked like this:

This iteration looks more fun and also offered the option to choose between empty stars with a background or with strokes only when empty.

Empty style with strokes only
Empty style with fill

To make this empty style option more clear, I separated this option in a “Choose Empty Style” section and visualized it with some pictograms of our little friend.

Step 3 — Plugin Logic

Create star shapes
The Figma API offers a method to create star shapes
figma.createStar();
To create the stars I simply needed to loop through the number of stars requested and push them onto the layer and move them by 50 pixels every time they are drawn:

const nodes: SceneNode[] = [];
for (let i = 0; i < msg.count; i++)
{
const star = figma.createStar();
star.x = i * 150;
}
nodes.push(star);

Coloring
A bit of a more tricky part was coloring the stars. A user should be able to input a Hex value to color the stars. Figma though uses the following color space based on values are from 0 to 1.

For example black is {r: 0, g: 0, b: 0, a: 1} and white is {r: 1, g: 1, b: 1, a: 1}.

This means I needed to map the hex values accordingly:
var redValue = Number(hexToRgb(starhex).r)/255;
var greenValue = Number(hexToRgb(starhex).g)/255;
var blueValue = Number(hexToRgb(starhex).b)/255;

Then fill the stars with the correct color variables
star.fills = [{type: ‘SOLID’, color: {r: redValue , g: greenValue, b: blueValue}}];

Finally we have this 0.5 star rating.

Designing such a half star rating can be a bit finicky and at first, I was wondering how I would code such a star. Would I draw the outline of the star with vectors which also must consider the requested attribute parameters (radius, ratio…) and then calculate that 0.5 fill and draw those vectors and fill it? This seemed a bit complicated. There must be another way. And there was ;)
After playing around in Figma with gradients, I figured that by using a gradient fill of 100% opacity to 0% opacity over the entire star and two more gradients, one 100% and the other on 0%, with both starting and ending on 50% of the entire linear spectrum, the result is a clean color cut going from 100% to 0% within 50% of the width of the star. A neat trick to remember!

Have two additional gradients at 50% of your linear spectrum, one 100% solid and the other 0%.
Clean 50% filled star

To draw gradients in Figma we need to use a transformation matrix that represents translation and rotation. The identity transform is [[1, 0, 0], [0, 1, 0]]you can find more about transformation matrix here in the Figma API documentation.
The Figma API offers a fill method to fill shapes and a type GRADIENT_LINAR to fill the shape with a linear gradient. To make a half star I’m using the mapped colors and an array of gradient positions (4 as mentioned above) with the correct opacity.

star.fills = [{type: ‘GRADIENT_LINEAR’, gradientTransform: [[1, 0, 0], [0, 1, 0]],
gradientStops: [{position: 0 , color: {r: redValue, g: greenValue, b: blueValue, a: 1}},
{position: halfStarPercentage , color: {r: redValue, g: greenValue, b: blueValue, a: 1}},
{position: halfStarPercentage , color: {r: redValue, g: greenValue, b: blueValue, a: 0}},
{position: 1 , color: {r: redValue, g: greenValue, b: blueValue, a: 0}} ] }];

I’m using a variable “halfStarPercentage” this sets the position of the two overlaying gradients, meaning a user can not only draw x.5 star ratings but any x.x ratings! Trying to do this with just the pen tool in Figma would give you a hard time ;) If you’ll ever need this accuracy — you’re welcome!

0.30% Rating

Step 4 — Publishing your Plugin

The last thing to do is to publish the plugin. Figma made this pretty simple and easy. You’ll find the publish option in:
Menu > Plugins > Development > YOUR PLUGIN and click on the three dots > Publish New Release…
or if you are part of the new Community Beta then you’ll find it in
Menu > Your Username > Plugins > YOUR PLUGIN and click on the three dots > Publish New Release…

You’ll need

  • Icon (128x128)
  • Cover Art (1920x960) with a safe area of 1600x960
  • Name for your Plugin
  • Tags so that people can find your plugin (up to 12 tags)
  • Support contact

Press publish and done!
You can find my Figma plugin here https://www.figma.com/c/plugin/807668032497690174

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store