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