Over the weekend I helped a buddy migrate his company’s design system (2k+ components) from color styles to variables, and set up dark and light modes in minutes. @Figma variables are still a game-changer for design systems.

Quick rundown of the process:

1. Prep work: Use the DarkMe plugin (https://figma.com/community/plugin/1210863977149285175…) to invert your palette and generate either a dark mode or a light mode alternative palette (depending on which mode your original design is in) Ideally you should analyze and modify these colors given to you for adherence to brand direction and accessibility. Then map out your current colors to the newly decided dark mode equivalents in a note somewhere. Stash this info for later.

2. Use @marcinukleja‘s plugin (https://figma.com/community/plugin/1253585487427690087…) to convert color styles to variables. My favorite feature is It updates your existing styles, linking them to the new variables instead of raw hex codes. This was crucial for avoiding breakage. Next, jump into the variables section and using the note you stashed away in step 1, add your dark mode hex codes for each variable.

3. Now, the magic happens. Grab this plugin by @tokensstudio and @mikekamminga: (https://figma.com/community/plugin/1264259625007726988…) Use this apply variables plugin to swap all styles to their variable equivalents. And just like that. Light/Dark mode system ready to go. Just use that layer button to toggle modes. Tip: The “apply automatically” option is a bit wonky, but the second option works like a charm. Just make sure your styles and variables have identical names and folder structures before making the swap.

That’s the gist of it. If anyone needs a hand pulling this off or has questions, reach out via hello@danielfransix.com. Hope this saves someone a headache or two.

Btw, heads up for those with gradient color styles in their design system – Figma’s native variables solution won’t cut it for you just yet. They haven’t rolled out support for gradient variables. If that’s your situation, you might want to check out the full Tokens Studio Suite (https://tokens.studio). It’s the same crew that made the first plugin I mentioned earlier. They’ve got more support for handling gradient tokens in a more flexible way.