Getting started with Figma plugins.

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

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 want:

• (1/6) —Getting Started.
• (2/6) — How Figma Plugins Work.
• (3/6) — Wiring Things Up
• (4/6) —Working with Colours
• (5/6) —Working with the UI.
• (6/6) — Polishing Things Up.

The repo for the plugin is here. It’s split up into steps to make it easier to follow.

👨‍👩‍👧 Who is this Tutorial for?

I guess the sweet-spot is a designer-who-codes-a-little or a developer-who-designs-a-little.

If you spend all day writing JavaScript you might find it a little slow.
If you have never written JavaScript you might feel a little lost.

If you have ever partially understood a Mark Dalgleish tweet, you should do just fine.

🚀 Getting Started.

Luckily for us Figma has done some amazing work on the plugin creation process.