Multi-Brand Design System Workflow

Suggest an idea
1

I previously shared this idea with @SketchHelp on Twitter, but I thought I’d share it here to see if other users would like it.

It would be great to have a better workflow for those of us who use one base design system for multiple brands (in my company, it is 40+).

I wish there were an option to allow the base DS to be used/linked for all branded projects while changing the based design tokens to brand design tokens without duplicating the base DS at the start of each project (as this means the brand design system is only as old as when it was first duplicated). Duplicating the base DS means that future iterations to the original base DS won’t be implemented on the duplicated DS file.

If I revisit a website project a year later, the design system will miss a year of improvements/edits/additions etc. (from a Sketch POV, not development-wise).

This image might illustrate a possible solution better:

multi-brand example
multi-brand example1190×1174 79.5 KB

Happy to discuss more!

3

Amazing! So true.
I have a similar structure here, in my case I have multiple brand libraries (brand tokens) all linked to a unique design system library sourcing components to multiple different products.

The Camilo plugin was amazing to switch between my brand libraries. Unfortunately, since Sketch 95 Camilo isn’t working anymore.

I would love a native way to switch libraries from an entire document or selected elements.

4 Likes
4

Hmm, it’s a thorny problem. One way to think about this by using our new document-local libraries feature, where you’d enable the brand agnostic library only for the branding library. You could then import every (I know :see_no_evil:) symbol from the base library and apply all your custom styling on top. Wrap each of those in a symbol and then that library in turn is the one you can use.

Of course the problem with this approach is the duplicate symbols and the manual labour to keep that in sync, but given today’s feature set that’s how I would approach it.

You can also think abut it the other way round; the brand library sits at the bottom, and defines simple tokens. Then your agnostic library sits on top and uses those tokens. Then there would have to be a way to swap out the brand library library for another and things would just work™. Of course we don’t have that feature today, but I can see the need yes. Thanks for opening the discussion :+1:

1 Like
5

Hey.

Thanks for the suggestions.

As you suggested, I was told via @SketchHelp to place the base components into the brand working file and then replace each base token (style, text) with the brand tokens via the overrides. This is a painstakingly slow process, though.

The other option was to place all the components from the base DS into the brand working file and build each page until you were ready to swap the tokens. I used the Automate plugin to replace libraries (base tokens to brand tokens - both linked libraries to the working file), but it presented bugs. I posted a video about it here. The issue with this is that you don’t get to design the page with branded components so the crafting aspect is lost.

If there was a “Replace Tokens” option under Sketch > File, and it presented the options (like Automates):

Replace Library: Base Design Tokens
→
Replace With: X Brand Tokens

I think it would be a game changer for design software that is used for design systems.

If the base design system remained centralised and each project was a branch off from it, it would be time-saving and absolutely genius.

Thanks!

3 Likes
6

Hey @KarlCanBeCool all good?
Just wondering if you came up with another workaround…

I’m once again investigating this problem and trying to find a solution to it.
Already contacted the owner of Camilo but he’s not interested in fixing it :confused: (He’s not using Sketch anymore)

I’ll try a combination of other plugins to see if works.
I keep you posted. :crossed_fingers:

7

Unfortunately not but I am keeping my fingers crossed for it. I think it could be a game changer for those with multi-brand design systems.

Let me know if you find a solution!

8

Hey @KarlCanBeCool

Have you ever tried Library Replacer?
It worked here for me. It’s not as good as Camilo used to be, but it does the job.

Please note, it only replaces the entire document, so be careful.
Let me know if works for you :facepunch:

Screenshot 2023-04-07 at 15.42.25

9

I have, but Automates Replace Library works well for me.

@pieteromvlee are multi-brand design system users something you might look at in the future? :crossed_fingers:

10

I’m unsure why there isn’t a built-in library swapping option rather than relying on plugins. :saluting_face:

11

So, the problem with all of these library-replacing tools is that all libraries MUST be the same. AFAIK, they replace styles and symbols 1 to 1, meaning that if you need the whatever-text-style and it’s missing from your library, it will just ignore it.

We fixed that.

I know I’ve not added too much documentation, but we’ve built a series of tools that basically work pretty much like CSS does, replacing styles and symbols based on their names, according to context.

We also have a multi brand projects (some 75+) and this has been working like a treat. We have a base layout file that uses our common component library. On top of that, every brand can have it’s styling, completely unique…

@pieteromvlee has seen this in action many years ago (Edinburgh, remember?), but since then it has evolved into something of an ecosystem.

It’s called the Natural Design System, or NDS for short, and it’s not a Design System in itself, just a bunch of tools that allows you to create your own bespoke system. I could get into details, but I’d need so time to organise it. Till then you can always take a look at our repository on Github.

BTW, the tools we’ve built include a Sketch Plugin, Sketch Assistants, Sketch to iOS convertors and iOS Stylists (think CSS for iOS), which allows us to restyle any brand app and publish those styles, in the app, in just a few minutes.

Here’s the plug-in to begin with: GitHub - design-ops/nds-sketch-plugin: Sketch Plugin theme swapper for the NDS. Quickly and intelligently swap out one NDS theme with another.

1 Like
12

Seems interesting. Do you have a video of it working?

13

Sure, here’s something I just recorded: Natural Design System Demonstration - aka NDS - YouTube

I’ve added some context in the description.