Design System Architecture (TL;DR version)
If my full-fat post about Design System Architecture is too long for your taste (Medium estimates it’s a 12 minute read), 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 is 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 will likely be connected in the same way.
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. Token data in JSON files being exported via SalesForce Theo is an example. 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
We’ve found identifying these categories of tools and the connections between them useful when discussing or comparing them. Hopefully you will too.
We’d love to hear your thoughts!
If this 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.
