About

Portfolio

Community

Testimonials

Resume

Contact

About

Portfolio

Community

Testimonials

Resume

Contact

Role:

Period:

Type:

Voluntary

Collaborators:

None

Skills:

ReactJS

Industry:

Introduction

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.

Problem

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.

Business context

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.

Competitor

Demand

research

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

Scoping the project

Scoping the project

Design Concepts

Iterative plugin design alongside coding

Final outcome

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.

Sections

Sections