Product Design Case Study- ColorLabels -A Figma Plugin built using ChatGPT
ColorLabels is a Figma plugin that helps designers label the color styles in their style guide efficiently.
How the Plugin Works
Link to Plugin:
https://www.figma.com/community/plugin/1260187811086634757
Why did I create it?
While creating a style guide for one of my projects, I found manually labeling each color with a name and color code 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
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 labeling approach is common to almost every style guide.
I felt that getting validation and feedback from users on the MVP would be a better approach in this case than spending time on research and designing multiple features at once.
First, I came up with the flow of the plugin.
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.
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.
Version 2
I took a week’s time to review all the feedback and suggestions I received and also studied multiple style guides from various design systems. I observed a common pattern recurring in most of the style guides.
Color styles are commonly labelled with the following:
- Color values like HEX, RGB, HSL and HSB.
- Custom Color name.
- 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.
Feature 1 — Color Values — HEX, RGB, HSL and HSB
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
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. Fortunately, they recently launched a “List of Colors” feature which includes custom names for more than 500 colors. This number of colors felt just right, and 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.
The list contains only 540 colors, whereas there are millions of HEX values. Therefore, the plugin is designed to check the nearest color value and label it with its name when a user selects a color value that is not present in the list.
Feature 3 — 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, System, Blue, Green, etc.
However, the tone does have a standard format, in which higher numbers represent darker shades and lower numbers represent lighter shades. Based on existing design systems, tones are mostly in multiples of 10 or 100.
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.
Alerts
If user clicks on “Display Label” button without selecting any shape or frame, the below warning appears.
If user clicks on “Display Label” button without selecting any check box, the below warning appears.
Visual Design
Figma’s official website has a Neo-Brutalist style, yet I have never come across a plugin that had this style. This felt like the perfect opportunity to change that.
I found the components(Checkbox, Input field, Button) I needed for the plugin in uiverse.io — An open source library of UI elements.
I made slight adjustments to the code of these components to meet the requirements and organized them in a layout.
Additionally, I incorporated a background image that displays the plugin’s title and a few results, so users know what to expect.
Final UI
Results and Impact
Key Learnings and Challenged 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.
- 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.
What Next?
- 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 and list down potential ideas for new tools.
- I am eager to explore how OpenAI’s API’s can be integrated into Figma plugins to make designers’ workflows easier.
Try the plugin using the below link:
Thank you staying till the end!🙂
Feel free to reach out to me in case of any queries/suggestions/feedback. I am happy to connect on LinkedIn.
