ColorLabels - A Figma Plugin to label color styles efficiently
ColorLabels - A Figma Plugin to label color styles efficiently
Overview
Overview
Overview
ColorLabels is a Figma plugin that helps designers label the color styles in their style guide efficiently.
ColorLabels is a Figma plugin that helps designers label the color styles in their style guide efficiently.
My Role
My Role
My Role
Research, Design, Development.
Research, Design, Development.
Project Type
Project Type
Project Type
Personal Project.
Personal Project.
View Plugin in Figma
View Plugin in Figma
The Problem being solved
The Problem being solved
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.
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.
Initial Approach
Initial Approach
As each style guide follows its own unique naming convention for colors, my initial plan was to create a simple version that labels each color with its corresponding HEX and RGB color codes as this labelling approach is common to almost every style guide.
As each style guide follows its own unique naming convention for colors, my initial plan was to create a simple version that labels each color with its corresponding HEX and RGB color codes as this labelling approach is common to almost every style guide.
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.
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 reached out to a few fellow designers to learn how they label color styles in their projects, and also shared my idea of creating a plugin to automate the task. They were excited about the idea of such a plugin and encouraged me to try creating it.
I reached out to a few fellow designers to learn how they label color styles in their projects, and also shared my idea of creating a plugin to automate the task. They were excited about the idea of such a plugin and encouraged me to try creating it.
User Flow
User Flow
First, I created a flow for the plugin. As I wanted to include multiple types of labels, I decided to use check boxes for each type. Users can select the appropriate label type based on their requirements.
First, I created a flow for the plugin. As I wanted to include multiple types of labels, I decided to use check boxes for each type. Users can select the appropriate label type based on their requirements.
Version 1 - MVP
Version 1 - MVP
Although I am quite comfortable with HTML and CSS, I am still an amateur when it comes to JavaScript. That's why I turned to ChatGPT for help in writing the JS code.
After 4 hours and over 30 prompts, I finally created the minimum viable product, which includes two labeling options: HEX and RGB color values.
Although I am quite comfortable with HTML and CSS, I am still an amateur when it comes to JavaScript. That's why I turned to ChatGPT for help in writing the JS code.
After 4 hours and over 30 prompts, I finally created the minimum viable product, which includes two labeling options: HEX and RGB color values.
Feedback on the MVP
Feedback on the MVP
I published this version to the Figma Community and posted it on LinkedIn. I was surprised to see the positive response from many designers.
I published this version to the Figma Community and posted it on LinkedIn. I was surprised to see the positive response from many designers.
Version 2
Version 2
I took a week to gather necessary feedback on the MVP and observed multiple style guides from various design systems.
Based on the suggestions and feedback I received as well as observing some common patterns in multiple style guides, I decided to include 3 key types of labelling options.
I took a week to gather necessary feedback on the MVP and observed multiple style guides from various design systems.
Based on the suggestions and feedback I received as well as observing some common patterns in multiple style guides, I decided to include 3 key types of labelling options.
I took a week to gather necessary feedback on the MVP and observed multiple style guides from various design systems.
Based on the suggestions and feedback I received as well as observing some common patterns in multiple style guides, I decided to include 3 key types of labelling options.
1) Color values - HEX, RGB, HSL and HSB.
2) Custom Color name.
3) Color/Tone format for multiple shades.
1) Color values - HEX, RGB, HSL and HSB.
2) Custom Color name.
3) Color/Tone format for multiple shades.
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.
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.
Feature 1 - Color Values - HEX, RGB, HSL and HSB
Feature 1 - Color Values - HEX, RGB, HSL and HSB
Since I had already designed and implemented HEX and RGB color values in the MVP, adding HSL and HSB to the plugin was relatively easy.
Since I had already designed and implemented HEX and RGB color values in the first version, adding HSL and HSB to the plugin was relatively easy.
Feature 2 - Custom Color Name
Feature 2 - Custom Color Name
Designing and implementing this feature was challenging because there is no repository of standard color names. I searched for APIs that could provide custom color names, but none met my expectations. Some APIs had too few custom colors, while others had too many.
I have always loved Coolors.co for their collection of color palettes and gradients. Coolors also has a collection of more than 500 unique custom color names. Since Coolors is also quite popular in the design community, I chose to go with it.
Designing and implementing this feature was challenging because there is no repository of standard color names. I searched for APIs that could provide custom color names, but none met my expectations. Some APIs had too few custom colors, while others had too many.
I have always loved Coolors.co for their collection of color palettes and gradients. Coolors also has a collection of more than 500 unique custom color names. Since Coolors is also quite popular in the design community, I chose to go with it.
I extracted all the color names from their website using a Python script and mapped them in a "Hex Code" : "Color Name" format in the JavaScript code.
I extracted all the color names from their website using a Python script and mapped them in a "Hex Code" : "Color Name" format in the JavaScript code.
Challenge faced with Coolors approach
Challenge faced with Coolors approach
Challenge faced with Coolors approach
The list only contains 540 colors, while there are millions of HEX values. Therefore, the plugin might result in an error or fail to display a color name if the user selects a color value outside of this list. This results in a poor user experience.
The list only contains 540 colors, while there are millions of HEX values. Therefore, the plugin might result in an error or fail to display a color name if the user selects a color value outside of this list. This results in a poor user experience.
Solution
Solution
Solution
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.
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.
Feature 3 - Color Name/Tone Format
Feature 3 - Color Name/Tone Format
The next challenge was to design and implement the ideal user flow for Color Name/Tone format.
The next challenge was to design and implement the ideal user flow for Color Name/Tone format.
In this format, color names do not have a standard pattern as they vary depending on the type of color, such as Primary, Secondary, Neutral, Blue, Green, etc.
However, the tone does have a standard format: higher numbers represent darker shades and lower numbers represent lighter shades.
In this format, color names do not have a standard pattern as they vary depending on the type of color, such as Primary, Secondary, Neutral, Blue, Green, etc.
However, the tone does have a standard format: higher numbers represent darker shades and lower numbers represent lighter shades.
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.
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.
Error Scenarios
Error Scenarios
If user clicks on “Display Label” button without selecting anything, the below warning appears.
If user clicks in “Display Label” button without selecting anything, the below warning appears.
If user clicks on “Display Label” button without selecting any check box, the below warning appears.
If user clicks in “Display Label” button without selecting any check box, the below warning appears.
Final UI
Final UI
Results and Impact
Results and Impact
“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!”
Prince Mukherjee, UI/UX Designer
Prince Mukherjee,
UI/UX Designer
Prince Mukherjee, UI/UX Designer
“Really practical for color theme prospection on a small-scale project! Thank you 😍”
Myriam O. , UI/UX Designer
Myriam O. ,
UI/UX Designer
Myriam O. , UI/UX Designer
“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.”
Seng Hout, Lead UI/UX Designer
Seng Hout,
Lead UI/UX Designer
Seng Hout, Lead UI/UX Designer
Key Learnings and Challenges faced
Key Learnings and Challenges faced
In certain cases, creating an MVP and taking suggestions and feedback from target users, rather than working on too many features at once, can save a significant amount of time and energy.
Considering error scenarios or edge cases is crucial for any product. Providing clear guidance helps in reducing user dropout rate.
The results you obtain from AI tools are only as good as the prompts you provide.
When asking an AI tool to perform a task, it is important to provide detailed instructions progressively through separate prompts. Requesting it to do multiple tasks at once will result in failure. (Total prompts for this plugin - 70+🥲)
In the era of AI tools, having basic knowledge in different domains like coding will create new avenues of exploration for designers.
In certain cases, creating an MVP and taking suggestions and feedback from target users, rather than working on too many features at once, can save a significant amount of time and energy.
Considering error scenarios or edge cases is crucial for any product. Providing clear guidance helps in reducing user dropout rate.
The results you obtain from AI tools are only as good as the prompts you provide.
When asking an AI tool to perform a task, it is important to provide detailed instructions progressively through separate prompts. Requesting it to do multiple tasks at once will result in failure. (Total prompts for this plugin - 70+🥲)
In the era of AI tools, having basic knowledge in different domains like coding will create new avenues of exploration for designers.
In certain cases, creating an MVP and taking suggestions and feedback from target users, rather than working on too many features at once, can save a significant amount of time and energy.
Considering error scenarios or edge cases is crucial for any product. Providing clear guidance helps in reducing user dropout rate.
The results you obtain from AI tools are only as good as the prompts you provide.
When asking an AI tool to perform a task, it is important to provide detailed instructions progressively through separate prompts. Requesting it to do multiple tasks at once will result in failure. (Total prompts for this plugin - 70+🥲)
In the era of AI tools, having basic knowledge in different domains like coding will create new avenues of exploration for designers.
Next Steps in My Journey
Next Steps in My Journey
I am constantly learning more about Design Systems and am fascinated by how much there is still to learn.
At each step, I question myself if the process can be automated in any way.
I am eager to explore how OpenAI's API's can be integrated into Figma plugins to make designers' workflows easier.
I am constantly learning more about Design Systems and am fascinated by how much there is still to learn.
At each step, I question myself if the process can be automated in any way.
I am eager to explore how OpenAI's API's can be integrated into Figma plugins to make designers' workflows easier.
I am constantly learning more about Design Systems and am fascinated by how much there is still to learn.
At each step, I question myself if the process can be automated in any way.
I am eager to explore how OpenAI's API's can be integrated into Figma plugins to make designers' workflows easier.
Check out my plugins in the Figma Profile: figma.com/@naren_abbaraju
Check out my plugins in the Figma Profile: figma.com/@naren_abbaraju
Get in Touch
For opportunities or just to have a conversation!
Crafted by Naren Abbaraju, 2025.
531 others are watching this portfolio. Hurry up!
#darkpatterns
Get in Touch
For opportunities or just to have a conversation!
Crafted by Naren Abbaraju, 2025.
531 others are watching this portfolio. Hurry up!
#darkpatterns
Get in Touch
For opportunities or just to have a conversation!
Crafted by Naren Abbaraju, 2025.
531 others are watching this portfolio. Hurry up!
#darkpatterns
Get in Touch
For opportunities or just to have a conversation!
Crafted by Naren Abbaraju, 2025.
531 others are watching this portfolio. Hurry up!
#darkpatterns