Leveraging multiple themed libraries in Figma

Read time: 5 minutes

Tools:

One of my clients needed help organizing their design system in Figma and came across a huge timesaving strategy when it came to working with themed designs ✨

The client initially came to me with their design system theming issues such as:

• Scaling consistent designs was difficult across branded product offerings
• Memory limits
• DLS maintainability
• Instance component usage breakdown

Digging deeper I noticed the client had dark and light-themed components combined into a single library file which was causing their issues.

A suggestion I’d provided was to have their components file connect to a single external single-themed styles library. (ex light-theme)

This reduced the instances of hitting the dreaded RED or YELLOW memory/stability dialog box in Figma AND provided a way to control different core style themes easily in the future!

The key to getting all of this to work was to have a consistent core style naming structure that would be identical between the themed style libraries. (ex. light-theme and dark-theme)

The actual values can be different but the naming must be the same!

Example:

Dark themed library

background/primary = # 111111

Light themed library

background/primary = # ffffff

Once the naming structure was identical across the themed libraries both were ready to publish and test out.

All I had to do was open a new design file, turn on the applicable component library + themed libraries, and then swap libraries from light to dark themes from the swap libraries feature.

Since I'd kept the naming structure consistent from a core style perspective, I was able to convert the designs into a dark theme easily.

The best part was if I was designing multiple screens I could swap all styles in the file at once or only specific components on a dime 🤗

This is also great if you are thinking about building a design system to account for a multi-brand product strategy with some component modifications!

Example:

New Design file

1. Turn on applicable libraries
2. Drag over a component instance onto the canvas
3. Open the Assets tab in the left layers panel and navigate to your Light-Themed library
4. Once selected a small button will be at the bottom of the modal and will say swap libraries.
5. You can then select the Dark-Themed library hit swap and enjoy themed goodness to your components!