Here’s the scenario:

There are 4 companies under one parent company. These 4 companies have their own website (desktop/mobile) and apps and are not entirely similar but can start out similar and change over time.

Similarities

• Some pages (app/web) are similar in structure but the styling is different


• Companies may start with similar structures but over time may be different.


• Similar enough to use variable modes for theming

Differences:

• Icons


• Text/Colour


• Headers & footers


• App and web don’t always align in terms of features and functionality - for example: Feature A is available on the website but has not reached production on the app yet and may never be (for a variety of reasons)

Note:

• App components and web components have atomic components that are the same, but molecules and organisms can be very different or the same.


• The company is on the organisation Figma plan so we only have 4 variable modes

How do I structure this complicated design system for web and app with 4 companies that eventually become 5 or even 6?

My idea for the Figma file structure:

1. Base:

• All variables


• Buttons, text fields, dividers, etc (these are the same on web/app and similar enough to use variables)

1. Components (this is where things start to fall apart)

• Components with variants for different companies. For example, Search icon > variants for company A, B, C and D.


• Separate components for headers/footers and other ones that are very different

1. Page Designs split into 4 files for the different companies

struggle?

• How do I structure these components - via brand and via channel without over-complicated it.


• How do I future-proof it - so that when things change it isn’t a hassle to update


• How can the design system still work as a “drag and drop” system for other people from the different companies to still use (this is essential as we are a very large company)