How We Built the Color Management Plugin for Figma. Chapter 1. Research and Ideation
This year our team worked hard to develop a new Figma plugin called Color Management. This plugin is an excellent tool for quickly and effectively repainting your mockups and creating new color themes in Figma. This series of four articles will take you through the complete journey, from how and why we made it to the problems we faced while building it and the final result.
Who we are and what we do
Hi there! I’m Vitaliy Voronkin, a UX/UI designer at the international fintech company Devexperts.
We create solutions for Web, Android, iOS, wearable devices, and even smart speakers that serve a global audience with trading platforms for brokers and investors, exchange software, money management platforms, and data exchange solutions with financial platforms.
Our main product is the DXtrade trading platform, which we sell on a SaaS basis. For every new client, we create a DXtrade White Label — we develop a new, unique color theme and add a client logo to the trading platform. We base the first release of a custom platform for each customer on the initial product and then slightly evolve it throughout the product life cycle.
Deep customization of our products is one of our strongest advantages — it allows us to customize all UI elements. Our clients have total control over how their platform will look and feel.
Do you want a professional platform that looks like it means business? Sure, here you go: muted colors with a focus on content. Want your users to have fun? Spice up the interface with vibrant colors and gradients.
It sounds cool on the surface, but this level of customization comes with some technical difficulties and peculiarities to make it happen. We’ll get to this a bit later.
How we do the things we do
We — the designers — work in Figma, a popular cloud-based design tool that helps us effectively develop and maintain our user interface designs. We have a design system in which all our layouts are made with components, each with its own Figma style.
A Design System is a collection of reusable components, guided by clear standards, that can connect to build any number of applications. It is the single source of truth that groups all the elements that will allow the teams to design, realize, and develop a product.
Figma styles are basically a set of variables that helps us organize the colors of UI elements. You can attach a color style to as many elements as you want and control the colors of each one with these styles. For example, whenever you change a text style’s color from red to blue, Figma will apply those changes to any objects using that style.
Now you know how we maintain our design mockups in Figma. But how do we guarantee that our final product will always match our designs? We’ve built a special tool for this purpose called Chameleon that consists of two components: the Figma plugin and web storage. The plugin allows us to export color styles to Chameleon web storage, and developers can deliver them to our products.
So, the overall process looks like this:
- We store and maintain our design layouts in Figma.
- We use a self-made Chameleon Figma Plugin to export all the color styles to web storage.
- Developers deliver data on UI elements’ colors to our products in different formats depending on the platform they work on (web or mobile).
You can read how we’ve built the Chameleon tool on Medium.
Where is the problem hiding?
With the approach described above, we can quickly update the color theme in the design and the actual products. But for every new client, we were spending too many resources on the first step — creating a new color theme in Figma for the white-label product.
That’s where our customization ability complicates things.
First things first, we make a duplicate of the master file in Figma with all the designs we need. We have hundreds, if not thousands, of color styles here, which is the exact problem we were trying to solve. The way Figma works, you have to go through four steps (clicks) to change even one style value. You must select an element, click on a color style, click on the “edit style” icon, and choose a new color. And we have hundreds of them.
When you think about how many clicks you have to make to change the value of just one style, you can see our problem. Now imagine a complex layout on several pages with 700+ styles. Do you have a headache yet?
This issue plagued us, slowing the first stage of creating a new platform to a crawl. It inflated our costs and deadlines for delivering a product to the client.
Searching for ready-made solutions 👀
We first tried looking for existing solutions that we could use to rid ourselves of this massive pain. The only tools that could help us fix our clunky change-styles-in-Figma workflow were plugins. So, we searched high and low through the Figma community, hoping to find one that fits just right. Sadly, no dice. There was no shortage of plugins for creating, maintaining, or deleting color styles, but none helped us out of our specific bind.
We also asked designers across different platforms — Reddit, UX stack overflow, Figma forum, and so on — how they are solving this problem and if they knew of any tool that could help us. We got a few responses with some plugin suggestions but nothing really suitable for our case.
At that point, the only path forward was to create the tool we desperately needed ourselves. That way, we could consider only the details relevant to our situation and, as a huge plus, end up with a plugin that fully integrates with our design and development processes.
What exactly are Figma plugins?
Well, plugins are small applications created by the design community that extend the functionality of Figma. Plugins run inside Figma projects and perform one or more user actions. They allow users to customize their experience or create more efficient workflows in Figma, which is exactly what we needed. You can visit the Figma Community and browse through a list of the available plugins to get a better understanding of the functionality they offer.
Conclusion
So, the plan was to make a plugin and integrate it into our processes as the codable paracetamol to rid ourselves of the workflow headache and speed up the development cycle. Once we decided on the development, we started working on the concept for a new tool.
Thanks for staying with us so far! In the next article you’ll see:
- What concept we had in mind when we started development,
- What went wrong during the development,
- What the MVP version was like.
See ya! 👋
