Color Compass // a color navigator for Figma, explained, sort of

I started using Figma earlier this year for digital design, and honestly it completely changed and improved my process and capabilities.

Figma is one of the best design tools to come out in recent times and has empowered me as a creative coder and designer in so many ways.

However, coming from an array of advanced design tools I immediately noticed the simple colour picker in Figma could be vastly improved on, especially as I was working on projects and designing as I was coding, as I often do.

Colour management and palette building is usually a big weakness of mine. I don’t like playing guessing games with colours and have wasted so much time in the past trying to correct slightly off colours by colour picking on the fly. If there is a way to do it programatically, I’ll trust it way more than my poor colour instinct, so when I heard you could make plugins for Figma I was all aboard trying to improve my workflow and creative process (online colour tools are useful but often hinder my flow when I’m designing).

With credit to Figma’s amazingly clean and developer-friendly API, I made this plugin over the course of a week using TypeScript for the very first time in a project. Oh and NO BUILD PROCESS (except for the TypeScript build which is built-in with VS Code anyway). 

There was an option to include Webpack or other bundlers in the build but I intentionally skipped all of that, dumped all my code into two main files, and it was gloriously refreshing. So much so, I am half tempted to skip the build process in future side projects altogether. I’ve had so many nightmares with backwards compatibility and asset convolution in the past, so this was a very welcome change.


My main aims of this plugin was to:

  • Make colour picking shades/tints mathematically accurate
  • Update elements from the plugin UI quickly
  • Generate complementary colours
  • Generate random palette schemes
  • Make each swatch interactive

I feel like I fulfilled all of these goals because I am extremely satisfied with how the plugin turned out.

I learnt a lot about building functions for an app-like project, which is not normally something I work on.

I also learnt more about the construction of functions and data, object traversal and destructuring, and the best methods to use for conditionals and promises. It was completely eye-opening to me as I was coding just how simple and abstract code can be at any one time. I think the thing I am most satisfied with in this plugin is the error checking and edge cases, because I spent a great deal of time testing the plugin and thinking of the different ways people may use it.

Overall I am really proud of how it turned out- I love the UI and its functionality, I learnt a lot, and I hopefully made a tool that helps other people as well.

 

(I sped up the video a bit because I’m impatient and want to save you some bandwidth)

If you use Figma I hope you check it out and I hope it helps you in your work!

Click here to view and install the plugin. And if you want to view the full code, click here.