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.
I am hoping for some solution from Figma soon. I am having the exact same issue we have a main design system with all components and screens this is linked to a separate file that we have our foundations so all colours set to semantic variables + global styles, typography, spacing etc.
As a company that works B2C we need to apply partner colours to our designs and with 100+ partners the modes just won’t work. Also I want to keep modes specifically to light, dark, high contrast etc.
Issue is when duplicating the main files to apply partner branding we need to swap the libraries, before that was easily done with the swap panel but now requires a lot of manual work.
Does anyone uses any plugins that can connect them as a library and not locally?
Hole Figma is gamechanger, working like coding… Why you cant use Variables the same way like CSS. I am waiting for Figma will makes it work, but after a Year, still plugins, pulgins, plugins… Are plugin makers more smart, than hole Figma team? I only need to have library of component, shared through many projects and use its only library with spacing, colors, fonts in Variables. Only change the variables library and thats it! To keep the components in actual version, changing only the Variables library. Please… Do it simple!
Still can’t believe this isn’t a standard feature set, our team really need better support for swapping variables. We have a master customisable white label product, that clients can update and change to meet their needs.
The problem is, there is limited ways to create a ‘project template’ with multiple libraries. So not only do I have to duplicate each file individually when we start a new project, I also then have to go through and library swap, and then use a plugin to haphazardly swap all of the variables.
While I am extremely grateful for the plugins, I have 0 visibility if something hasn’t been swapped out correctly. It is also painstakingly slow to go through all the files I need to, I just wish this was something that was baked into Figma.
Would this all be solved if we could simply duplicate a project, or set it up as a template that severs any connection to the original and is remapped automatically? To me this would be perfect, and resolve many of the issues my team and I face on a daily basis.
Swapping variables is essential. I’ve noticed some comments suggesting a rumor that this feature might be supported in a beta version, but I haven’t seen any official information. Is there a plan to support this functionality?
My understanding has always been that Figma Variables/Tokens will replace Styles. Currently when I sway library ONLY the styles are swapped. I need to manually reapply the variables from the swapped library.
Screenshot shows what actually gets remapped when swapping one library to another. The 200+ system variable names are not applied to the design. Original design uses the same names.
I expect the variables/tokesn to also be remapped in this list
