Color Path

CONTRIBUTIONS

Single-handedly built the plugin in a short timeframe

I designed and implemented a custom Figma plugin using HTML/CSS/TypeScript and React to significantly improve the color selection and application process. The plugin significantly enhances the color selection and application workflow within Figma, reducing manual steps and improving efficiency.

Moreover, I applied advanced Figma Plugin API knowledge to implement functionalities such as the dynamic color path bar, integrated color picker and real-time updates to selected nodes. With this project, I demonstrated expertise in leveraging the API for seamless communication between the plugin and the Figma environment.

PROBLEM

Designers sometimes struggle to locate a specific ideal color they saw before.

This feature was inspired by a common situation where the designer has tried all these colors, and then recalls an ideal color that they saw but is unable to locate it again. In other words, Color Path is designed for all the perfectionist visual designers who are particular about getting the color exactly right!

DEMO

Color Path lets you see the past of your colors.

PROTOTYPE

p5.js (JS library for creative coding) was used for rapid concept testing

p5.js Workspace

Explore colors freely

Revisit the colors that you've selected

p5 was the perfect tool for rapid prototyping because it has built-in functions for creating interactive visuals, and real-time rendering. I was excited to find out that the concept was received highly by potential users!

DESIGN

A plugin with a user interface that contains a color picker which allows users to explore color. All the colors will be saved on a bar and let users to revisit the visited colors.

Anatomy of the UI

Interact with colors

Edit the colors

Generate rectangles with colors in the path bar

Clear the history of visited colors in the bar

With Color Path, designers now can easily revisit and explore the colors they've encountered, alleviating the pressure to pinpoint the perfect color in real-time.

REFLECTION

A technically challenging but creatively stimulating project

Iteration Process

In all honesty, building this wasn’t easy, and I was genuinely surprised by how much logic has to go into constructing a simple UI. Nevertheless, it was a truly empowering experience for me, knowing that I could actually build what I had designed.

While I did spend hours scratching my head and staring blankly at the bugs (ahhh), there were moments when I truly felt creatively stimulated. This project also got me excited about the notion of designing tools to design better. Hope I get to make more tools like this in the future!