How to develop your first Figma plugin for designers

6 min readApr 10, 2024

I recently developed my first Figma plugin.

It wasn’t hard, and my whole team joined in, exposing us to what is possible with the Figma API.

Here’s a quick tutorial…

Background

First off, at OneSignal the design team do occasional weekly “themed” weeks, where we set an objective outside the typical weekly workload.

Learn something new, code something, read a book etc.

This week the goal was to create a Figma plugin.

This was a great way to get non-coders involved in development.

Most of the team don’t code. None of us, including myself, had tried to created a Figma plugin before.

Everyone was starting from scratch & learned something new.

Kudos Brian Gaus for his really simple tutorial which we followed to help get us started.

This plugin simply sets the colors of different shapes based on how they are named.

Once we had a simple plugin that turned shapes different colors, we moved on to more adventurous things.

Step 1: Create a new plugin

Create a new Figma Design file

Right click > Plugins > Development > New plugin…

Name your plugin and select Figma design

Select Custom UI

Select a location on your computer to save it

Plugin created — open the folder to see what files exist

We’re not going to use Typescript for this so delete those 2 files

code.js — this is where your plugin code lives

manifest.json — describes your plugin, Figma uses this to get the name of your plugin etc.

package.json — where your dependencies live, not required for this tutorial

README.md — describes your project for other developers, not required for this tutorial

ui.html — the UI for your plugin that can interact with code.js

Step 2: Code your plugin UI

Now to get your hands dirty with code. You’ll want to use a code editor for this (I use Visual Studio Code).

Open code.js and replace it with this:

//Tells Figma to display your custom UI
figma.showUI(__html__);

//Resizes your plugin UI in pixels
figma.ui.resize(400, 400)

/*
This is our custom function
When a user submits an input from our plugin UI,
this will take care of it
*/
function activateWhenUserClicksSubmit(msg){

    //extracts the message's vairables
    const {keyword, hex} = msg;

    //tests for keyword
    function testForKeyWord(node){
        //a regular expression that tests if the keyword is in the title
        const isKeyword = new RegExp(keyword, 'gi');
        if(node.name){
            return isKeyword.test(node.name);
        }
        return false;
    }
  
    //Gets the node for the current Figma Page
    const currentPage = figma.currentPage;
    const nodes = currentPage.findAll(testForKeyWord)

    //fills all our code with the selected color
    for(const node of nodes){
        node.fills = [{type:"SOLID", color: colorConverter(hex)}]
    }
}

/*
This is an event listener
Whenever the UI makes a call
to our main code
*/
figma.ui.onmessage = activateWhenUserClicksSubmit;


function colorConverter(hexColor){

    //a regular expression. It will test if the hex is proper
    const isHex = /[0-9abcdef]/i;

    //Throws an error if the hex is improper
    if(hexColor.length !== 6 && isHex.test(hexColor)){
        throw Error('hex colors must have 6 characters');
    }

    //converts hex code into RGB coloring
    const r = parseInt(hexColor.slice(0,2), 16)/255;
    const g = parseInt(hexColor.slice(2,4), 16)/255;
    const b = parseInt(hexColor.slice(4,6), 16)/255;

    return {r,g,b};
}

Open ui.html and replace it with this:

<!--Header-->
<h1> Change Widgets Color </h1>

<!-- Short app explanation -->
<p>
  Will change the color of all objects with the key word in their title
</p>

<!--Asks user for a hex color value-->
<label for = 'hex-input'>
  New Hex Color
  <input
    required
    id = "hex-input"
    type = "text"
    max = "6"
    min = "6"
    placeholder = "fafa1d"
  />
</label>

<!--Asks user for a key word-->
<label for = 'keyword-input'>
  Key Word
  <input
    required
    id = "keyword-input"
    type = "text"
    placeholder = "title"
  />
</label>

<!--Submit button-->
<button id = "button">
  Change Color
</button>

<style>
  body{
    font-family: sans-serif;
  }
  p{
    color: #777777;
  }
  label{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom:10px;
    width: 75%;
    font-weight: 600;
  }

  input{
    font-size: 14px;
    margin-top: 3px;
    border-style: none;
    border-bottom-style: solid;
    outline: none;
    font-weight: 600;
  }
  button{
    margin-top: 20px;
    padding: 10px;
    font-weight: 700;
  }
</style>

<script>
  //Creates variables that allow us to access the HTML components
  const hexInput = document.getElementById('hex-input');
  const keywordInput = document.getElementById('keyword-input');
  const button = document.getElementById('button');

  //Takes input values and shares them with your Figma code
  function whenButtonIsClicked(){
    const hex = hexInput.value;
    const keyword = keywordInput.value;
    //Sends your values to your Figma code. * is the code's worker address
    parent.postMessage({ pluginMessage: { hex, keyword } }, '*')
  }

  //creates a listener that will activate whenever the button is clicked
  button.addEventListener('click', whenButtonIsClicked)
</script>