Color Compass // a color navigator for Figma

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

I noticed the simple colour picker in Figma could be vastly improved on though, especially as I was working on projects and designing as I was coding as I often do. When Figma’s plugin API came out I knew I had to create the colour navigator I’d always envisioned in a design tool.

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, whether I was designing, coding, or illustrating. Getting warm and cool colours right is always a journey in and of itself, especially if you have bad eyesight like me. .__.

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 get why developers like modularising javascript and importing everything. But as a personal preference, it is just so nice to have everything in one file which you can easily reference.


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 and I still find it one of the most useful plugins to this day.

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. As I was coding this plugin I discovered a newfound respect for code and how simple and abstract it 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 helps you in your work!

Click here to view and install the plugin. And if you want to view the full source code, click here. If you have any feature requsts or bugs please submit an issue on GitHub or just email me.