My Role
Research, Design, Development.
Project Type
Personal Project.
While creating a style guide for one of my projects, I found manually labeling each color style with a name and Hex value to be tedious. I searched for plugins that could automate this task but couldn’t find any. This felt like an opportunity to put my coding skills to use and solve a problem.
Getting validation and feedback from users on the MVP seemed like a better approach in this case, rather than spending time on research and designing multiple features at once.
I published this version to the Figma Community and posted it on LinkedIn. I was surprised to see the positive response from many designers.
Implementing these features in code seemed like a complex and challenging task. However, considering the positive response I received for the initial version, I decided to push myself to improve the plugin.
If User selects a Hex value that is not present in the list, the Plugin checks for the nearest color value present in the list and automatically maps the Color name.
In this way the plugin will be able to provide a custom name for any Hex code that a user selects.
The next challenge was to design and implement the ideal user flow for Color Name/Tone format.
Since the color names are not standard, adding an input field where use can enter the required Color name felt like an ideal choice. The plugin will then check each color and applies the appropriate tone automatically.
“Wow, this plugin sounds like an absolute game-changer! 🚀 Can't wait to give it a whirl and bring some colorful magic to my designs!”
“Really practical for color theme prospection on a small-scale project! Thank you 😍”
“I have tested the plugin with my design systems and it works well. This plugin is great and very helpful. Thank you Naren for sharing it and taking my feedback into account.”