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:
- Base:
- All variables
- Buttons, text fields, dividers, etc (these are the same on web/app and similar enough to use variables)
- 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
- 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)