If my full-post about Design System Architecture is too long for your taste, then you might prefer this summarised version.
At Buildit we’ve done a fair amount of work on design systems. We’ve noticed certain types of tools and integrations between them recur and figured it would be useful to call them out.
This post covers the overall architecture for a design system’s infrastructure that we’ve observed and used. Not every design system will contain all of these parts. However, the ones they do have are likely connected in the same way.
Generic architecture of a design system’s infrastructure
UI Library
The UI library should be the “single source of truth” since it contains the actual implementations of the UI components. Note that in complex design systems you may have several of these (e.g. one for native iOS, one for native Android and one for Web). Likewise, you may (also) have hierarchies of them (e.g. a common CSS library for all web things, and then more specialised ones that extend it with components for a particular framework or CMS).
Style Guide Generator
Tools like Pattern Lab, Fractal and StoryBook that generate a living style guide from the code in your UI library.
Package Managers & Repos
Tools like npm, yarn and Nexus that take care of packaging and distributing your UI library.
Design Token Repository
Tools to store, manage and export design tokens. One example would be token data in JSON files exported via SalesForce Theo. Some larger tools like Brand.ai and Frontify incorporate design token repositories within them.
Visual Design Repository
Tools like Craft, Folio, ZeroHeight etc., through which designers can sync and share their assets (e.g. Sketch symbols).
Visual Design Generator
Tools like React Sketch.app that generate visual design files (e.g. Sketch UI kits) from the code in your UI library.
Visual Design Tools
Tools like Sketch or PhotoShop that are used to produce visual designs of UI components.
Conclusion
When it comes to discussing or comparing these categories of tools and the connections between them, we’ve found it especially useful to identify them. Hopefully, you will too.
We’d love to hear your thoughts!
If this summary has whet your appetite, please check out the full-fat version of this post when you’ve got some more time. It contains a lot more detail.