How We Built the Color Management Plugin for Figma. Chapter 4. Usability Upgrade — Quality of Life Features

Published in

Devexperts

6 min readAug 21, 2023

Hey! 👋 This is the last article in a series of four in which we describe the process of developing our Figma plugin. You can find all links below.

Chapter 1. Research and Ideation.
Chapter 2. Creating an MVP.
Chapter 3. Version 2.0 — Live Preview Mode.

So… where are we now?

After we ensured all the main functions were there and working as intended, it was time to take care of small (but important!) stuff: fix bugs and improve usability. This was our last phase of planned plugin development. We had a design team test the plugin, which yielded a lot of valuable feedback on both bugs and missing features. You’ll learn all about what we implemented in the final phase below.

Sort tokens alphabetically

The first thing we did was add an option to sort alphabetically. Though we already discussed it in the second article of this series, we decided to delay it until all the major features were done, so until that point, the only option we had was sorting by hue.

It worked well enough, allowing us to group and work with a lot of tokens with similar hues, but some designers had a problem with finding specific tokens if there were too many in the list. Yes, they could use search, but based on feedback in certain cases, it was a lot easier for them to just scroll the tokens list until they saw the one they needed. And the sorting alphabetically option makes navigation much easier. Of course, in that case, the designer should know the name of the token to find it. But since we have a unified naming policy for color tokens, and our designers work with them basically every day, it’s not a problem for us.

Reset single token changes

Another request we received was to add an option to reset changes in one particular token. Before implementing this feature, a user could only reset all changes at once by pressing (wait for it) the “Reset” button. In a case where many changes have been made, a user could lose a lot of progress by pressing “Reset”, so the option to reset only specific tokens was absolutely required. We added an icon button that was only visible for tokens that have some unsaved changes to accentuate it a bit and keep the interface clean as possible.

Saved Colors feature

While testing the plugin, I noticed that we use a lot of repeating colors in our designs, and it’s so annoying to just manually enter them over and over again for every token needed. It applies to the black color that we use for the main text, grey for additional text, and green/red for buy/sell, just to name a few examples.

In general, every project has its own limited set of colors. Imagine making a light theme for a product out of the dark one or just making a new color theme for a White Label product. In both cases, we normally already have at least a set of main colors before we start the work.

So, we had an idea to make a separate section in the plugin to store some colors and easily apply them to tokens. These were the requirements for the feature:

It should be quick to access. All saved colors should always be visible and accessible.
It should be simple to use. Ideally, it would take one click to apply a color to the selected token.
It should be easy to manage. Adding or removing colors from these sections should be simple.

After a few design iterations, we ended up with a UI that looks like this:

To add a color to the saved section, you need to enter it into the color picker and press the + icon next to it.

Applying the color to the selected token requires just one left mouse click. You can, of course, select several tokens and apply color to them all in one click.

To remove the color from the section, double-right-click. It’s not a common pattern, but that’s exactly what makes it a great choice — you can’t remove a color by accident. A user can only do it intentionally.

Keyboard shortcuts

We value the speed of our workflow, so keyboard shortcuts were an absolute must-have for our plugin. All important actions should have a shortcut to speed up the process.

First, we needed to indicate to users that there are keyboard shortcuts in our plugin they can use. It was also crucial to visibly specify to the user what keys do what. Adding this information to onboarding felt wrong because most people only see it once. After that, they might skip it or may not even remember that there is info on shortcuts even if they needed it. Our aim was to add it as closely as possible to the token list where all the magic happens.

We added keyboard shortcut info to the footer, preliminarily hiding all the controls if no tokens are selected in a list. That way, users see it directly before starting to work on tokens.

Besides the common CMD+Z/CMD+A combinations, we added Figma-like shortcuts for changing the opacity of a token. Now, instead of typing the right opacity value in the color picker, a user can just select a token and use the numbers on the keyboard. Pressing the 6 key a single time will change the opacity to 60%. Pressing it twice will set it to 66%. Just press the button once for tens or two keys for a specific value. Since it works the same way in Figma, designers will have no problem using it in a plugin once they’ve already gotten used to it.

Another important shortcut we added is resetting a single token by pressing [R]. Yes, we added it before as an icon a user can click on. But in that case, despite it being very convenient for people who don’t use keyboard shortcuts, it worked only for one token per click. With a shortcut, you can select as many tokens as you like and reset them by pressing just one button. It’s also handy when you’re using HSL controls or the Saved Colors section — just hit [R] and start over if you don’t like the result.

Wrapping up

Of course, there was no shortage of bug fixes to make the plugin’s workflow more seamless and convenient. I won’t go deeper into that, as it’s just the standard process of testing and fixing any issues that come up. At this point, we accomplished everything we wanted and have a working tool that speeds up our process of creating new color themes for our products. Personally, I was able to finish the task in one hour using this plugin. Before that, a similar task would take around 4–5 hours for me to complete. Not bad at all!

We’ve come a long way from defining a problem and looking for a ready-made solution to designing and implementing such a complex tool.

And while our team is using the current version of Color Management in their work, we are making plans for the next stage of development: discussing ideas, making concepts, and so on. We see the future of Color Management as a fully automated palette generation tool that makes changing colors in design files a one-minute task. And hopefully, we will have something great to show you in the near future. Thank you for reading our full series of articles! If you missed any, here are the links to previous ones: