In the past, when you created Colour Styles and Text Styles, you could (along with identically named components) swap them out for each other by using the “Swap library” functionality in the Libraries panel. That functionality still works, and is great.
However, Variables don’t seem to swap over in the same manner, which makes some sense as they’re not detected by the “Swap library” panel currently. Is there any way you can switch out Variables in batch when swapping libraries so they update everything eg colour, padding margin, booleans etc, or am I unable to use Variables for anything outside of local styling for now?
For context, I’m creating a design system for a white-label product that can swap the associated branding on the fly depending on the target client. Naturally, colours, fonts, logos etc need to be switched out, and they work fine with the older method of library definition, but Id like to be able to specify padding, margins and other similar properties as part of the branding libraries so that they update the associated components correctly.
I’m also in the same boat, and I am hoping that Figma releases this in their next update.
For the meantime, I’m having to only assign colour styles and not variables which means when I only need to update the styles it works perfectly but ideally I would like to set colour variables.
E.g. if I had a border colour variable set and I wanted to update this one colour element I wouldn’t have to individually select each border to update it (which you currently have to do with styles) if I didn’t want it to be the same as the original set colour style.
The answer I got from Figma is that variable modes to the rescue. You can define multiple spacing scales as modes and then switch them in your design. The same with branding. You can have global accents palette and then define branding modes, link them with corresponding accents.
There is certain limit of number of modes you can have depending on your substitution type. I choose to build a plug-in to overcome that limitation. Not ideal but works fine
It seems like you can wire variables in a way to give you this truly white label experience. The only caveat is typography, it is still on styles and no support for variables to set font size and line height and font face.
Modes are useful but they’re also not actually the suitable solution for this kind of project. The reasoning is that I would want an individual library that holds the entirety of a client’s branding - colour, typography, spacing units, logotypes etc - which can then be swapped out when required, and have all of the linked components automatically update themselves to the new branding. Having an individual library for one set of branding also means you can port that branding to a new project if required with little to no issues.
Think of it as having a single stylesheet that holds all of your branding variables for a website - you can just as easily switch out that stylesheet for another brand stylesheet, and have all of your components update automatically when your build system executes. In fact, that’s exactly how I used to develop code-based component systems for website builds, using Sass/LESS and a build manager like Gulp.
You can approximate this behaviour by linking colour variables to colour styles, and by naming key components eg “logo-header”, “logo-footer” etc the same in each library so they are identified by Figma on switch-out, but in reality you’re still using Colour/Type Styles to do this. In an ideal world, if you choose to use a colour/spacing/boolean/type variable of a particular name in your design system, and then switch the brand library to a different one, it should identify the variables used and update them to the matching ones in the new library in the same manner.
Hopefully this is a feature that has been identified and is being worked on, as Variables are a little underbaked currently for them to be actually usable, and I’d prefer not to rely on a third-party plugin to create this expected behaviour.
According to their roadmap Figma is going to solve this by giving us ability to extend base set of variables with brand specific tokens.
Extended collections
We’re designing a way to handle theming for sub-brands, which are often managed by different teams at large companies. With extended collections, you’ll be able to add brand-specific overrides to an existing variable collection and publish those overrides as additional modes.Extended variable collections will be an Enterprise-only feature.
But it’s not perfect as we’re having issues when we have instances from other files that have hidden layers. Variables with transparencies are also giving us issues when swapping with this plugin.
So when we swap variables with this plugin, sometimes we won’t be allowed to select a mode we want. We then have to begin a manual hunt to find the element that has a variable that didn’t get swapped properly.
I’m sure if Figma included this in it’s native library swapping function, these issues wouldn’t exist.
Please include variables in the “Swap Library” function!!
I run into the same issue pretty regularly, and have to rely on using a plugin as well to manage variable swaps. It scares me a bit that Figma hasn’t even mentioned to be working on this feature, I think it’s critical and lots of designers are expecting to have it soon.
The plugin is not perfect, and managing variables with it is not sustainable. Please, consider adding this feature so that we can keep more advanced theming in separate files instead of modes, since these won’t solve more branding-specific scenarios.
I structure my projects the following way:
1 tokens file for the colour styles, the typography and the variable primitives
1 design system file with semantic variables and components
several design files depending on the needs.
When creating a new project I used to duplicate my latest DS and tokens file and relinking them using the library swap property.
I’ve recently started to go in depth with variables which are a game changer in my opinion.
Unfortunately, I realised today that when swapping a library, although the styles are swapped, the variables are not.
Is this a bug? a feature? or am I doing something wrong?
I moved a file and a library to a client’s Figma account. (uploaded the .fig to their account)
Then I used the “swap library” to change re-link the file to the local library.
But all regular non-component elements are still stuck using the variables from the original library (eg: Fill color). Which means I have duplicated colors all over.
If you add an abstract layer that will fetch values in discrete files for colors, you can actually use Figma modes while having separate files for Brand styleguides (here my brand examples are fruit).
You can even add a cross-mode at the styleguide level, like dark mode or density if you’re working with space variables. The issue is then that Figma doesn’t match variable mode names across files or collections.
This is exactly how we work too! The variable sets should swap along with the library.
An enterprise feature with extra brand tokens might be interesting for some cases, but it wouldn’t be necessary to keep the master connected in most cases (as I imagine the planned enterprise feature).
For many clients the master library suits as a base to copy and style, but then the files move in different directions to suit individual needs.
The enterprise subscription is also pretty expensive for little companies and even major ones seem to be hesitant to pay so much, from what I hear from fellow designers.
