One "mother" Design System file to rule them all?

Ask the community
1

Hi all,

So I am in the midst of creating an UX design system consisting of of elements and components without branding so far. Is it possible in Figma to create one “mother” design system file changes/addition in which will update the subsequent “child”(branded differently per client) design system files?

Cheers!

2

It is, if the components structures are the same but once you have different requirements depending your project/client and need to add additional features, elements or reorder them it could get problematic. You could also “fork” a component by detachning it if you want to do such changes on the client level.

Personally I never went that approach as I wanted to have the flexibility to change component A for client A, without affacting component A for client B.

However your idea is feasable if you work highly modular and apply your styling on the second level (branded libraries) via overwrites. Just be aware of the pros and cons.

3

Thank you for the reply Dennis, cheers!

4

Other way around is to have master design system file, this is where all the components and tokens live and evolve. After you have new client and their requirements are clear, you copy the master design file and customize it to fit client needs. This way you will create a safe place for your experiments and progress without having a risk to mess up with your master file. Ready designs will be somewhat reusable because all the components to have exactly the same structure which will enable seamless (almost) library swap opportunities.

There few caveats though that require advanced tooling around the flow.

  1. You need to have a flexible colour system and some tools to rapidly change colour values to fit into a brand’s requirements. You may want to take a look at this plugin - https://www.figma.com/community/plugin/1297031341980383999/source-foundation. This tool creates a foundation for any design system that includes colours (both light and dark modes), spacing, radii and typography
  2. There is a need to be able to swap variables. When you copy design elements created for another client you will need to swap styles, components and variables. The latter requires a plugin to do the job. You can make it manually indeed, but it’s a tedious and error-prone process, plug-in would be much better choice
  3. Another key element to have is an ability to quickly change core visual styles. Like having gradient fills on interactive elements instead of flat surfaces, ability to add or remove effects etc. This will enable extra flexibility to customize your master design copy for specific client needs. To enable that your master design file has to be engineered in a certain way

So yeah, it’s possible but demanding :wink:

1 Like