@components

Releasing Design Systems

Delivering Interconnected Outputs to Adopters Over Time

Masthead

#1 of 6 of the series Releasing Design Systems:
Outputs | Cadence | Versions | Breaking | Dependencies | Process

Companies realize a design system’s value when adopting products use a system to make and ship experiences that their customers use. As a part of that value chain, the system releases features over time. This puts the system into the hands of its customer: designers and engineers doing their job.

Strong system teams take releases seriously. They don’t see themselves as releasing just component library code. Instead, they deliver many more outputs: design tokens, documentation, design assets, and other resources.

This series describes many facets of releasing design systems. It begins by defining a system’s many outputs and where they are delivered. Subsequent articles cover topics of cadence, versioning, breaking changes, dependencies, and a step-by-step approach.

These stories reflect what I’ve learned releasing systems working with teams like Discovery Education, Morningstar, Target, and REI. They are elevated by insights from colleagues at Salesforce, Adobe, Atlassian, Shopify and Financial Times. Thanks for graciously sharing your time and practices!


Outputs: What‘s Released?

Design systems programs release many types of outputs, not just code. As a result, a system should differentiate and communicate this range of versioned outputs to developers, designers, and other customers.

Code, the Source of Truth

Most systems offers a single source of truth of presentation layer code as:

Diagram of code tokens, components, and doc site

and/or…

In addition, other prominent outputs may be released separately:


Design Assets

Most teams limit understanding of what they release to simple “we release code.” It’s eye opening for them to realize that they publish so many other tools that change over time. They include:

Diagram of design assets, fonts, icons and other resources

Documentation Site

Design systems need a home, a place everyone knows they can find a path to everything that will have the latest and greatest. Housed at a memorable URL, it’s often built with UI components specific to it’s mission.

Diagram of documentation in code and on site

Destinations: Where Does It Go?

When distributing code and design assets, it’s vital to offer the code in manners most easily consumed by your adopting engineers. This means that some systems must offer choice across a many options, while others can rely upon a single choice as organizational standard.

Diagram of doc site, registry and hosted assets

For Code

Bootstrap and Material Design Lite are examples releasing to 2+ destinations.

For Design Toolkits

Need help with your system?

EightShapes can energize your efforts to coach, workshop, assess or partner with you to design, code, document and manage a system.