Fauxtended collections

After a couple more months figuring out how we might use variables, despite the workflow problems I describe in A Mode Too Far, we figured we’d try a slightly different approach.

Recap

We’ve got about 9 separate library sets (one per brand) that each contain 5 libraries (variables, styles, assets, components, patterns).

Moving to one library for all brands isn’t going to work for us at the moment for the multiple reasons described in the above article.

New approach to test

The variables libraries we do have are only for things like space, size, type etc. We keep colour variables in styles library and continue to bind them to the same styles we’ve had for a few years.

When we look at the detail of the variables libraries, 90% of the values are the same.

Really, I’m not sure we’d actually want to create 9 modes that all have the same values or have 9 duplicate libraries with a few minor differences.

Fauxstended collections

Named after the Figma feature that doesn’t exist yet, we decided to try out a slightly different architecture.

We moved the “System variables” file out of the primary brand project to become a global variables file to potentially be used by every component library.

For each brand, we would then add a brand specific variables file that only contained the things that were different from the global one as a modifier layer.

This is actually how we build our tokens in style-dictionary too, a global set that gets mushed together with a set of overrides when compiling. Part of me wonders if we could make an external facing variables library that does the same thing, so users of the system don’t need to see the internal architecture but that’s for another day.

Now we have a component library that is 90% fed by a single-mode global system variables library and when needed manually swapped for the brand specific one – getting around the (lack of) swap variables issue too.

This approach turned 3 or 4 days work on a new library set into a couple of minutes.

Tipping point

We think this is going to work because the system overrides contain only a small number of things. If we had colours in this file it’d be a very different story.

If you use modes or separate libraries where each brand theme actually has more differences than things in common this approach is probably not for you!

Well let you know how it goes!