Managing Design System with complex Master Components

Ask the community
1

Hello! So, I was wondering how people are managing a Design System with many complex master components. Let me list my current Design System at work

*Saber Masterfile - Main Figma file that contains small master components (Buttons, cards, etc…), UX screens master, and UX Styles (greyscale mainly, default font) We use these components to construct flows and in future UI screens for **X Brand Files
**X Brand file (17 Brands in total) - They list instances of UX Screens components with special styles from brands applied to them. These files also have unique brand styles (Colours, Fonts, Logos, etc…) We use here UI screens which are mainly for developers

So right now, the issue is that if we make changes to UX Screens Master components, we should go brand by brand and change the relevant screens (Believe that is painful when there are 17 brands) Any ideas on how can that be improved? Any thoughts about the current structure?

I have permission to share anything related to that topic from my company, so if you are interested further I can provide more details. Here are a few screens that may help you to visualize my wall of text. Also, it is the first time that I post here, pardon me if I am a newbie here

Saber Masterfile UX Screen Master Components
Saber Masterfile UX Screen Master Components668×761 37.6 KB

2

**X Brand UI Adaptation of UX screens as instances 2
**X Brand UI Adaptation of UX screens as instances 2791×550 23.9 KB

3

**X Brand UI Adaptation of UX screens as instances
**X Brand UI Adaptation of UX screens as instances978×633 28.8 KB

4

Saber Masterfile UX Brand Guidelines
Saber Masterfile UX Brand Guidelines1218×913 63.9 KB

5

**X Brand adaptation of UX Brand Guidelines
**X Brand adaptation of UX Brand Guidelines1224×914 65.7 KB

6

Sounds like you could use Swap Library. If you isolate the styles (Colours, Fonts, Logos, etc…) in Saber Masterfile UX Brand Guidelines into a new library, you can then swap that library with an X Brand file, and the components colors, fonts, logos, etc should all update.

In your style libraries, just need to keep the styles named the same for mapping, which looks like you have part way with Font Colors Scheme > Brand, Dark, Light, Supportive.

But you need your primary accents to also be named the same, so sintead of Primary Accents > Charcoal, and Primary Accents > Dark Green, both need to be named something like ‘Primary Accent 03 - Dark’.