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)
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!