Buildit@WiproDigital: Design System Architecture

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).

Driven by his passion for design and technology, James aims to help colleagues and clients combine those disciplines effectively and produce great customer experiences. His work has led him into the world of design systems, which he firmly believes are a key enabler for such collaborations and, ultimately, digital transformations.