Image for post
Image for post

Building a Figma plugin: part 6 of 6

** The code for this section is here.**

Okay so we have done a lot of work but our plugin still looks like 🔥 hot trash™ and is missing some reactiveness.

🖼 The Design

Luckily for us we have a design we want to get to:

Image for post
Image for post

Looking at the final design we can see that there are a few things we are going to need to do every time the selection changes:

♻️ Changing Text Values

So we are going to start off by writing some functions in ui.html that will prevent this from becoming very repetitive. …


Image for post
Image for post

Building a Figma plugin: part 5 of 6

** The code for this section is here.**

In this chapter we are going to be manipulating the UI based on the updates we receive from the plugin sandbox. Go ahead and open up ui.html if you don’t have it open already and update it like this:

You might need to click through to see the rest of this gist

We added some html to display some of our results and in <script/> we are using some browser methods to find and alter those html elements when we receive a new message.

If we click around we should see the plugin UI…


Image for post
Image for post

Building a Figma plugin: part 4 of 6

** The code for this section is here.**

Now we have the outline of our plugin we need to fill in the gaps.

🚦Getting an “un-normal” RGB Value

Before we can really get cracking we need to do some house keeping. You have probably noticed that Figma stores colours in objects like so:

{r: 0.8999999761581421, g: 0.1875, b: 0.1875}

The channel values have been normalised to be between 0 and 1. To prevent some headaches we would prefer to work with the channels in the more common 0-255 range. To do this we can write a function that converts them back:

We are destructuring the object into r, g, and b and putting it into an array. We then loop through the array and multiply each value by 255 and round it to the nearest integer. We do this to prevent weird decimal points in our RGB values like: rgb(255, 171.5, 255). …


Image for post
Image for post

Building a Figma plugin: part 3 of 6

** The code for this section is here.**

We can finally write some plugin code 🎉. First off we need to outline what our plugin needs to do.

🎰 Basic Functionality

The basic flow of our plugin looks like follows:

Image for post
Image for post

Let’s block this out in our code.

Go ahead and delete everything in code.js except for the line: figma.showUI(__html__) so we have a clean slate.

👂 Listening for Selection Changes

The first thing we are going to mock up is listening for user selection changes. We can use the built in selection change listener on the figma instance like this:

Notice how we check to see if there is anything in the selection before logging…


Image for post
Image for post

Building a Figma plugin: part 2 of 6.

Before we can really go any further we should understand how Figma plugins actually run. Understanding the basic architecture will make the code we are about to write make more sense.

Much of this is summarised from Figma’s own documentation, which is tremendous, so if you prefer you can read that here.

Also feel free to skip to the next part if you don’t care!

⏳ The Sandbox

A plugin runs in a sandbox inside of Figma, isolated from the rest of the application and this has some interesting consequences:


Image for post
Image for post

Building a Figma plugin: part 1 of 6

“Should designers code?
F*ck yeah!” — socrates

Figma plugins are the new shiny thing in design. From the outside it might seem like they are complicated to build but that’s not true. They are about as complicated as you make them and getting started with plugins is super easy.

If you’ve ever wanted to build your own you’re in the right place.

🏗 What are we building

Image for post
Image for post

We are going to build this 👆, a lightweight and flexible colour contrast checker called zebra 🦓. This will help users easily improve the accessibility of their designs.

There are 6 parts including this one but you can bounce around however you…


Image for post
Image for post

In case you haven’t heard, Figma opened up the app for plugin development. I was lucky enough to get in on the beta a few months back and built a plugin I have been thinking about since they hinted at opening up write access.

The Plugin.

One of the most tedious parts of my job at TIDAL is designing with real data. I know it’s important, I get that. But the amount of hours I have sunk into copying images out of our own app and pasting them into designs is astonishing. Multiply that by every designer, both product and marketing, and you have weeks of wasted time every year.
What makes it particularly painful is that it is data we already have.


Image for post
Image for post

Part 7 of 7 — Finishing up.

You can find the code for this tutorial here:

Jesus, this has been a marathon. If you think reading it was tough… I have no recollection of a time before I started writing this.
But if you are still here — congratulations. You beautiful nerd.

Bringing everything together.

Okay, so brief recap of that state of things since Part 6:


Image for post
Image for post

Part 6 of 7 — Setting up a front-end.

You can find the code for this tutorial here:

In Part 5, we managed to get a bunch of image urls from the Figma endpoint. Before we can display them, we need to set up some sort of front-end.

Step 5: Set up a front-end.

So in this section we are going to step away from our server for a bit, and rig up a front-end in React that’ll display the results we fetch from Figma. You can totally do this part in whatever front-end you want.

What is React?

If you work within 50 metres of a developer, there’s about a 1000% chance you have heard/read about React. Depending on the developer, it’s either the best thing since the internet or the latest in a long list of javascript-bloatware fads. …


Image for post
Image for post

Part 5 of 7 — Processing the response.

You can find the code for this tutorial here:

In Part 4, we managed to get our server to talk to a Figma endpoint and dump the results. Now we need to process the results and make a query to a different Figma endpoint to get the images we need.

Filtering out all the crap

Going back to our Figma file quickly, we just have 4 frames, each of which has a card symbol and a button group:

Image for post
Image for post

All we want to get for the purpose of this tutorial is those 4 frames. So how do we filter out all the other crap?

Before we can do that we need to look a little bit closer at what the JSON structure looks like. If we boil it down it looks something like…

About

Daniel Hollick

Designer at TIDAL, alcohollick.com. Building juggle.properties

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