How did creating a Figma plugin shape our white-label design system?
We recently had to rethink our widgets’ white-label design system. It was not a small feat by any means. Our secret sauce? Our very own custom-built Figma plugin. With it, we overcame these challenges and developed a design system that meets and sometimes exceeds our users’ expectations.
At Loox, we work at scale, serving over 100,000 brands with millions of views and interacting with our widgets daily. Our commitment revolves around empowering businesses through trust and using visual social proof to drive conversions. Working on this scale meant we had to be aware not to break what had already worked, but still improve and work towards being backward compatible and future-proof.
We had some opinions on being unopinionated
The first thing we discussed when we went to develop a white-label widget system is that we want it to be unopinionated. But as soon as we went on this journey, we discovered two things:
- Unopinionated is an opinion of its own — Things can look bland or aggressive in different shops. Trying to stay neutral can look like a statement sometimes.
- Our users sure have opinions — This is their business. They have a brand identity and personality. They don’t want widgets to disappear; they want them to stick out! And at Loox, we want social proof to be the driving force of a store.
So, with this, we started to explore the essential things the merchant intends to customize and how much friction they can handle along the way.
Finding the right system for all widgets can be really slow.
All of our widgets have different customizations. So, I started collecting all the widgets and unifying them on variables such as radii, fonts, and color schemes.
Soon enough, I realized that playing with different looks and themes was slow — Every time I decided on new rules, I had to change each value manually. Color algorithms were the slowest thing to test. I had to find a way to test them without manually calculating the algorithms and changing colors one by one in Figma. So, I started looking for more efficient ways to test color schemes.
Figma plugins to the rescue!
I started looking into solutions and found that Figma’s plugin API is very straightforward. So, I went straight to coding. The first plugin could have been prettier, but it worked. I could quickly look at color algorithms and started to test them on the fly.
We quickly decided to base our color system on Google’s Material You and Material Design color system principles to ensure it was flexible and consistent. It allowed us to build a full-color palette from a single color, and their open-source library made it easy for us to modify their logic according to our specific needs.
Our Figma plugin made a kind of hybrid code and codeless flow. We could see how color themes and other decisions can affect widgets without creating a full implementation of it in production. We could experiment and test future widget customizations to see if they work in every border radius and color scheme. Also, relying on something other than third-party plugins enabled us to examine everything and decide on what actually worked for us.
Modifying, testing, and figuring out edge cases
Google designed its color system to be vibrant and follow a strict tonal palette out of the box. That’s great for their use case. However, I modified their logic to meet our merchants’ needs, especially low saturation and pure black themes. After some adjustments, It was nice to have a convenient Figma plugin to test it in different flows and use cases. I showed it to the design, product, and development teams, making adjustments on the fly until we arrived at the right balance.
We are just a few steps away from making our working code into production code. To bridge the gap between development and design, I created a single library on which the development team and our plugin rely. Since Figma plugins are in JavaScript, we could use the same library in Figma and production. This made it easy to test widgets in Figma without a single line of code and be sure that what we see in Figma will look the same in production.
What’s next?
The first step was to make it as simple as possible. Now, we can make our merchants customize it. Dark and light mode capabilities already exist. It’s just a matter of implementing them.
We also got feedback about customizing some colors in the theme. We’ll have to figure out how to let users change them without making it complicated and without breaking accessibility for their users. And make a global theme color that will affect all widgets without manual configuration.
All new features will also be implemented in the plugin, making it easy to test more and more functionalities as they come. With the plugin, we can quickly iterate on new features and gather feedback from our team and users to ensure we deliver the right product.
