How We Built the Color Management Plugin for Figma. Chapter 2. Creating an MVP.

Hi again! 👋 This is the second article in a series of four in which we describe the process of developing our Figma plugin. Check out the previous article if you haven’t seen it yet:

Part 1. Research and Ideation.

The idea 💡

The initial idea was very simple and went a little something like this:

Let’s make a Figma plugin that allows us to quickly change the colors of complex design layouts. It should be easy to work with multiple styles at once. Also, when using the plugin, we should always stay in context and be able to instantly see all the changes.

The first thing we did was break this idea down into separate features. This information helped us understand how the UI of our plugin should look before making any drafts. In short, we needed two workspaces in our plugin: one for displaying the color styles we’re working on, and another with a set of controls to change these styles.

You may encounter the word “token” at some points in our articles. A token is pretty much the same as the color style we were talking about earlier, except they don’t always define a color — it may be the size of an element, rounded corners of elements, font size, etc. For our purposes, we will use “token” as an alternative name for color styles.

The list of features we needed looked something like this:

• Since color styles are the main objects we’re working with, we needed a token list area in the plugin to manipulate them.
• We needed the plugin to work with a huge amount of Figma styles, so the UI should allow us to work with single and multiple styles at once.
• We should be able to sort tokens alphabetically to find specific tokens among the others.
• We should be able to group tokens by hue to make it easier to select similar colors and change them to whatever we need.
• We also should be able to filter tokens to work only with the necessary tokens in the list.
• To work with color styles, we needed some controls. We decided to add Hue, Saturation, and Brightness sliders. They will allow us to change the color by moving these separate parameters. It makes it easy for us to find the color that fits in every particular case or, for example, when we simply need to adjust the brightness a bit.
• But what if we already have a specific color in mind that we want to use? Trying to pick the right color via sliders is not exactly intuitive. So why not add a default Color Picker component as well? We would just need to enter (or copy and paste) the HEX value of a specific color from elsewhere into the plugin. It also has a color pipette tool to pick any color present in your layouts in Figma. By adding both sets of controls, we covered all the bases for entering/changing color values in the plugin.

We had our dream UI concept based on the features we defined above:

Now it was time to knuckle down and actually make a design for it.

UI Kit

Since plugins run in the Figma environment as modal windows, it’s a good idea to use components of the Figma interface itself. That way, the plugins don’t feel out of place when you use them. It also significantly speeds up development and helps you create a UI that users are already familiar with.

Figma itself doesn’t provide a UI library, but there are community-made resources you can use. For example, the most popular one endorsed by Figma is a Figma UI library built by Tom Lowry. It contains open-source plugins, resources, and tools used for Figma plugin development. There are also several Figma-like UI Kits available in Figma Community.

Once we had rough drafts of the interface and a UI Kit from Figma Community with all the elements we needed, we were able to build a design specification for the plugin. And since our developers also used existing Figma components, the UI part of the plugin was implemented in a matter of a few days. I will unveil it in just a second.

Bugs, bugs, and more bugs…

It was time to test our little 0.01 version of the plugin. Obviously, we had some bugs we needed to take care of. But frankly, the only issues worth mentioning are the ones we didn’t think through during the design specification phase.

We had the wrong color format

The sliders for editing the color weren’t working as expected due to the incorrectly selected HSB (Hue, Saturation, and Brightness) color model. The way Brightness works in HSB did not allow us to accurately change the lightness of the color.

Same values, different colors

We switched to the HSL model where we have the Lightness parameter instead of Brightness. As we wanted, the values from 0 to 100 move the color from black to white, respectively.

If you want a better understanding of the difference between color models, check out this article.

There was no sync between controls

We didn’t consider the interaction between the sliders and the color picker. At this point in our story, we couldn’t use them together. For instance, we set a specific value in the color picker for some tokens and wanted to make it a little brighter with the HSL controls. The problem was that when we used the HSL controls, the color reset to default, and only then were the changes made by the sliders applied.

Luckily, both problems were solved with a new system that was kind of similar to “masks” in design tools. For every token, we have a default “before any changes” color, and there are layers with changes on top of it. For a better understanding, look at this scheme:

Final result

Behold! We finally had the first working version of the plugin! We implemented everything we planned for an MVP and got rid of all bugs. The interface of the plugin looks pretty much like the sketches I showed you before. Let’s go through all the features we have in detail.

Launch

On launch the plugin scans the Figma file and displays a list of tokens that are present in that file. Users can edit one or multiple tokens at the same time. All the changes are shown in the list, and you can also see a preview of the color both in the Default and Changed columns.

Filter Search

Since the plugin shows all of the existing tokens in the Figma file, and we usually have a lot of them, we needed a way to narrow down the list to show only the tokens we currently need. A filter search with basic input that shows all tokens that match the defined query did the trick. In the current version, searching by name and color is supported.

Sorting

For the MVP, we haven’t implemented any sorting options other than the default one — by hue — which felt the most convenient in our case. That way, for example, all the blue colors will be grouped, allowing you to easily select them and change them to a different color.

Sync Changes

Figma is a collaborative tool, so we needed to consider the case where several people are working on the same file at the same time. It’s possible someone else could change the styles while the plugin is active. So, we added a Sync Changes Button that the user can click on the plugin and refresh the token list.

Luminosity Lock

With the Luminosity Lock feature, you can easily recolor a big set of tokens and preserve the original color contrast of the mockup for accessibility reasons. It’s no secret that different hues with the same saturation and lightness (we consider all colors in the HSL model) can look different when it comes to brightness. This feature automatically adjusts lightness to keep the perceived brightness of the changed color the same.

There are several color style types present in Figma that we needed to support. On top of basic solid colors, our plugin supports gradients (it breaks them down into separate colors) and effects styles such as shadows (although the plugin only supports colors stated in effects, not the other parameters).

Thank you for reading this one to the end! In the next article you’ll see:

• Adding onboarding,
• Implementing a real-time preview,
• Tuning plugin performance.