Breaking down the foundations of a design system

Design systems are an organization’s collection of tools, processes, guidelines, and design philosophies.

Combined, they pave the way for a product team to execute and deliver its design experiences. The purpose of a design system is to systematically streamline product development and to establish repeatable, replicable, and scalable processes through which a product team can design, develop, and test new design experiences at high-velocity. As a product tool, an organization’s design system enables all products and design experiences to: establish a consistent look and feel for all users; increase efficiency, quality, and velocity for product teams; and to express a brand’s values across all touchpoints.

Design systems are also used as a framework to streamline collaboration between all members of the product development organization. Although aptly named, design systems don’t exist for the sole benefit of the design organization. From Product Management to Marketing, Quality Assurance to Engineering/Development, and everyone in between, design systems promote high-value collaboration across the entire product development organization.

Typically, a standard design system comprises six core elements: Design Language, Component Library, Documentation, Design Kits, Development Sandbox, and Governance Model.

Let’s take a look at a brief breakdown of each core element:

Design language

Design language is the fundamental, foundational back-bone of a design system. The design language’s core purpose is to create visual consistency throughout all of an organization’s design experiences. This includes, but is not limited-to, the organization’s website, internal applications, and external products. The design language is composed of elements like typography, color system, shapes, motion, and iconography. The design language is commonly expressed through a schema of design tokens, which distill and codify all of the organization’s design decisions into a centralized, single source of truth. This enables the organization to quickly design new products and experiences while delivering a consistent, familiar, and intuitive experience to their users.

Component library

The center of a design system is always the component library. The component library is a set of building blocks for products and design experiences. It includes items such as buttons, text inputs, dropdown menus, and navigation, and more. These components are pre-built and ready-to-use when creating new design experiences. Because of their replicable and highly-scalable nature, these pre-built components save Designers, Developers/Engineers, and Quality Assurance professionals significant amounts of time.

This enables them to shift their focus from the tedium of replicating small details to the more important goals of a product. In a standard design system, the component library is ever-evolving. It’s consistently updated to reflect how the product teams are working in addition to showing the requirements of new products and experiences.

Documentation

Design system documentation is the overall written framework and how-to guide for using the design system to efficiently and effectively create scalable design experiences. Documentation is updated regularly, to capture the changes that arise from designing new experiences. Documentation is the first step toward creating a shared understanding of how an organization builds design experiences, and also acts as a shared agreement on the design system’s purpose and functionality.

The documentation typically includes a page for each component, describing its function, versions, proper and improper use-cases, accessibility information, and links to view its related components, in the component library. It also covers macro topics, such as: the design systems mission statement, its purpose, how it’s implemented, and how to understand the code framework, from which the design system is built. Finally, design system documentation includes release notes for new version updates to the design system, and a framework for how to effectively communicate the updates, to all teams using the design system.

Design kits

Design kits are a way to put the design language into operational action, through product-specific or experience-specific collections, called UI libraries. These UI libraries are maintained in an organization’s chosen design tool, like Figma, Sketch, or InVision.  The design kit and UI libraries are composed of all the styles, symbols, visual components, and UX design patterns for a product or design experience, and are mapped to the code repository of the component library. Design kits help ensure consistency between the design documentation, the component library, and the code in the developer sandbox and code repository.

Developer sandbox

As part of the design system’s standard tooling, the sandbox provides a place for experimenting, and developing new ideas in isolation; including, but not limited to: writing and executing structural, visual, and accessibility tests. The developer sandbox also enables Developers/Engineers to document intended use-cases for components, patterns, and larger page structures, while sharing notes on implementation details, to ensure a smooth process with less re-work. The code for the component library is maintained in the developer sandbox.

Governance model

The governance model is the centralized control framework for a design system. Many organizations think of their governance model as the instruction manual for how to execute the design system. Much like the formal design system documentation, the governance model is consistently evolving, adapting to how the organization changes its processes surrounding the design system itself. The governance model defines the rules for things like: user access and administration, versioning policies, update processes and procedures, how new employees are onboarded, and the overall design system workflow.

Ready to build a better design culture at your company?

Andela’s Design Practice has the talent and experience to build your next design system. Whether you’re starting a new design system from zero, re-architecting your existing design system for scalability, or simply augmenting your current design operations team, we’ve got the world’s best Design System Talent ready to hit the ground running on your projects.

Find expert designers to spearhead your next project

Discover talent today