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.