Swapping brands in Figma with Themer
A deep dive into the Themer plug-in.
![](https://miro.medium.com/v2/resize:fit:700/1*XtOb1iN7ceq2Kc_fdZFQIQ.png)
One of the first plug-ins I got excited about when Figma released their plug-ins was Themer. Especially since it promised to be the solution to the problem I was having at that time. For those who don’t know, Themer enables you to create and swap themes from your published styles in your Figma team library. You can use the plug-in for color, text, and effect styles.
After trying out the plug-in when it was released, it wasn’t perfect. In the first release, it was a bit buggy, and not all the styles were applied correctly, ending up with a mix of multiple styles.
But after the release of version 2.0, I was excited to give it another try.
Heads up
This article won’t explain how to set up the plug-in with your Figma libraries because there is already quite a clear explanation on the Themer page. This article will focus mainly on problems I’ve encountered during my previous project, the journey towards using Themer, and its current implementation. If you have any specific questions about the setup, feel free to leave a comment, and I’ll be happy to answer them.
The problem and why we needed this
In my previous project at GrandVision, I was part of a team that designed for a global e-commerce platform used by multiple optical retail brands. We started designing in one brand, and over time, we had to switch to one single white- label library.
Having one white label library and maintaining multiple brand design files is tiring and prone to inconsistencies. We wanted to be able to directly test and mock designs in various brand styles without the hassle of doing all the extra and unnecessary work.
Our first attempt
Before the release of Figma plug-ins, we tried to solve this problem inside Figma by nesting libraries. The idea of that workflow was:
- Create a new file in Figma for brand X and pull the already existing white-label components from its library
- Replace the white label styling with brand X styles
- Create new components from the instances
- Duplicate and re-use this file for other brands
![](https://miro.medium.com/v2/resize:fit:556/1*4meoJSB5KMWuWg1ebVRFzQ.png)
This workflow would result in having multiple libraries with instances from the existing white-label library. If there would be changes to components of the main library, the instances would automatically update in the brand libraries. Lay-out changes would stay in sync, and the styles would stay in place since Figma remembers overrides.
This whole setup took quite some time to set up, and we realized that it was not fixing the problem that we were trying to solve.
In the proof of concept, we used Unicode characters to distinguish components from each other to avoid confusion — 🅱 for brands and Ⓜ the master file — . This whole workflow took quite some time to set up, and we realized that it was not fixing the problem that we were trying to solve. Maintenance was going to be very difficult and prone to errors in the long run.
Then there was Themer
Themer sounded like the solution to the problem described above. Before installing, we had to make some small changes to the existing white-label library. To simplify the theming process, we tried to reduce the number of variables per brand. Feedback colors (validation, error, warning) and text colors are, for example, coming from the white label library and stay as is per brand.
![](https://miro.medium.com/v2/resize:fit:1000/1*x0L-JtwqrLhklFIq-pheLw.png)
For typography, we have a similar approach where the body font is consistent throughout the brands, and only headings have different fonts. Each brand also has two separate image styles for the brand logo.
![](https://miro.medium.com/v2/resize:fit:1000/1*o2vkRPbtXBe_z3s-iXHYbA.png)
Inside Figma, we created a separate project folder with one file per brand. To summarize, every file contains the following styles:
- — color — primary
- — color — secondary
- headings
- default + alternative logo
The files mentioned above are used to manage the brand styles and are published inside Figma as a shared library with the same naming as the white-label library. Using the same names is necessary for Themer to recognize the styles. After installing Themer, the only thing we had to do was create a new preset from all the brand libraries inside the plug-in itself.
![](https://miro.medium.com/v2/resize:fit:1000/1*2a710OzBWLf7Qw8wIm--cQ.gif)
As a result, the plug-in is now used inside the white label files in Figma to switch between all the created brand presets. We tested different scenario’s on changing styles within the libraries, and everything stays in sync. Adding a new brand in the system is now a matter of minutes, and it allows us to rapidly test new brands for future additions to the system.
What we are missing right now inside the current system
- Themer does not support multiple text styles inside a text area, but looking at the plug-in description, this is on the roadmap for a future release!
- Another thing I stumbled upon is mainly an issue from Figma, and that’s the ability to have rounded corners as shared styles. In our case, brands on the platform have rounded or pill-shaped buttons. So when we switch between libraries, the buttons will change to their brand color, but the shape will stay as-is
- Shared installation. The user who has installed the plug-in needs to share the API key and BIN URL from Json.bin to be able to get access to the presets.
- The ability to nest color styles. It’s a common practice in front-end development but currently not supported in Figma. Something I’ve been missing for a while now. Nesting color variables would allow designers to create more flexible color systems similar to code.
Next steps
To enrich the libraries, here are some other ideas :
- Banners and product-related images as image styles for brand-specific content for more realistic content representation
- Adding on top, Google Sheets Sync with textual product data and text labels to test different kinds of data per brand/language
So you are currently in a design project dealing with multiple themes or you want to explore dark/light theming alternatives? Themer can help you quickly validate, maintain, and explore these options without having to deal with multiple design files.
Thank you for reading, and if you have any suggestions or ideas, feel free to share them in the comments below.
This article was originally published here.