Token Swapper - made my first Figma plugin
Multi-brand theming is a tough nut to crack in Figma. The new variable Modes feature helps, but it's pretty limited - you only get 4 modes in the Pro version and 40 in Enterprise. For our project (designing a multi-brand mobile app for football clubs), that just wasn't cutting it.
My journey to a solution
I went through a bunch of different setups before I landed on a plugin:
- Multiple files and a shared library: Tried separate files for different brand apps, but it got messy real quick and was a time-suck for our small team.
- Single file with themed component variants: Threw everything into one file, making multiple variants for each component to cover all the club styles. It was still difficult to manage.
- General components with a "TEST" theme: Switched to more simple, generic components without theme variants, just styled with a basic TEST theme. Used Figma variables and styles to theme component instances for different brands. It worked, but was it slow and tedious.
In the end, I've tried looking for a plugin to solve some of the issues and speed us up, but I couldn't find one.
The Solution: Token Swapper Plugin
So, I got to work myself and made the Token Swapper plugin. It's pretty straightforward - it swaps variables and styles based on their top-level folder names. For example, if you swap "Theme A" and "Theme B," tokens like:
THEME-A/background/primary/soft
become:
THEME-B/background/primary/soft
Simple, but it gets the job done!
Try it out (it's free)
If you're wrestling with multi-brand UI design and hitting similar roadblocks, try out the plugin. It's free and up for grabs in the Figma Community:
Would love to hear your thoughts! Leave a comment in the Figma Community under the plugin.