Building a plugin that converts HEX to RGBA for greyscale colours
Building a plugin that converts HEX to RGBA for greyscale colours
Role:
Period:
Type:
Voluntary
Collaborators:
None
Skills:
ReactJS
Industry:
Introduction
Streamlining Color Systems to bridge Design and Engineering
Streamlining Color Systems to bridge Design and Engineering
From my experience with early stage startups, such as abillion, the language and systems for colours used by designers and engineers could be vastly different. Often, the fast paced sprints to iterate and deploy, together with the lack of time to maintain systems across departments lead to inefficiencies.
From my experience with early stage startups, such as abillion, the language and systems for colours used by designers and engineers could be vastly different. Often, the fast paced sprints to iterate and deploy, together with the lack of time to maintain systems across departments lead to inefficiencies.
Problem
Different colour language and systems used in abillion
Different colour language and systems used in abillion
When I joined as a designer in abillion, I was handed over a Figma file that had its own language and system from the engineering team. As a result, Design team was using HEX codes while Engineering team was using CSS codes.
When I joined as a designer in abillion, I was handed over a Figma file that had its own language and system from the engineering team. As a result, Design team was using HEX codes while Engineering team was using CSS codes.
Business context
Untapped opportunity for Figma's ecosystem
Untapped opportunity for Figma's ecosystem
Figma has a community of 4 million paid and free users in 2023 as the leading tool. With competitor tools not within Figma's ecosystem and evidence of demand from online forums, building this plugin as a solution would benefit many designers, and in turn enhance Figma's capacity as the leading tool.
Competitor
Demand
I found a reddit thread from 5 years ago discussing the same problem I was trying to solve that was viewed 2,000 times, implying the need by users for this tool which is enough to go ahead with building the first version of this tool.
Figma has a community of 4 million paid and free users in 2023 as the leading tool. With competitor tools not within Figma's ecosystem and evidence of demand from online forums, building this plugin as a solution would benefit many designers, and in turn enhance Figma's capacity as the leading tool.
Competitor
Demand
I found a reddit thread from 5 years ago discussing the same problem I was trying to solve that was viewed 2,000 times, implying the need by users for this tool which is enough to go ahead with building the first version of this tool.
research
Studying colour conversion formula and plugin development documentation
Studying colour conversion formula and plugin development documentation
Understanding RGBA
Understanding Plugin Development
Understanding RGBA
Understanding Plugin Development
Framing the opportunity
Plugin MVP: Ability to take in HEX greys and output equivalent RGB opacity of black
Plugin MVP: Ability to take in HEX greys and output equivalent RGB opacity of black
Scoping the project
Scoping the project
Design Concepts
Iterative plugin design alongside coding
Iterative plugin design alongside coding
Final outcome
47 users tried the plugin within the 1st week of deploying
47 users tried the plugin within the 1st week of deploying
I deployed the plugin publicly on 1st May and within a week, it had been used by 47 different users. I also followed up with a demo video to market the plugin on Tiktok.
Learnings
In total, I spent less than a week taking this from concept to a working prototype.
Here are my keytakeaways:
Coding and designing simultneously to iterate helps with :
Improving my understanding of code and implementation cost/difficulty with different UIs.
Putting myself within a sprint workflow helped me to truly stay focused and maintain discipline on what is important during designing and building, helping to eliminate inefficiencies.
More from portfolio
More from portfolio
Building a plugin that converts HEX to RGBA for greyscale colours
Building a plugin that converts HEX to RGBA for greyscale colours
Boosting marketplace engagement with seller storytelling
Boosting marketplace engagement with seller storytelling
Turning wait into delight: Behind abillion's loading animation
Turning wait into delight: Behind abillion's loading animation
Improving web usability for addiction and mental health services
Improving web usability for addiction and mental health services
How abillion can drive user growth through quick web reviews
How abillion can drive user growth through quick web reviews
How can we ease loneliness among low-income elderly through libraries?
How can we ease loneliness among low-income elderly through libraries?
Improving awareness of climate impact on river Thames along riverside walk
Improving awareness of climate impact on river Thames along riverside walk
Enterprise Digital Transformation for Automotive and Industrial Company
Enterprise Digital Transformation for Automotive and Industrial Company
Simplified Interface: An interface for blind evaluators of ViScene
Simplified Interface: An interface for blind evaluators of ViScene
Copyright © 2024 Huei Suen
Copyright © 2024 Huei Suen