Edgaras profile
Edgaras Benediktavičius
Product designer and web developer

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

Token Swapper Figma 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:

Token Swapper Plugin

Would love to hear your thoughts! Leave a comment in the Figma Community under the plugin.