What is a design system?
Simply put, a digital design system is a collection of artifacts that enable products to consistently innovate and evolve while allowing designers to design and iterate faster.
Below is a common list of artifacts and a structure one might find in a mature and comprehensive design system:
Design Language
- Brand Guidelines: Logo usage, colors, fonts, etc.
- Style Guide: Color usage, font usage, shapes, materials, textures, layouts, patterns, etc.
- Content Guide: Tone of voice, illustration, animation, photography, video, etc.
Technical Library
- Variables (Atoms): Colors, typography, icons, spacing, elevation, motion, etc.
- Simple Components (Molecules): Buttons, cards, carousels, form inputs, checkboxes, radios, etc.
- Complex Components (Organisms): Navigation, modals, search, filters, date pickers, etc.
- Layouts (Templates): Home, feed, article, profile, etc.
- Pattern Library (Views / Pages): Account creation, sign-in, checkout, verification, etc.
Governance
- Design Principles
- Ways of Working: Process, compliance, documentation, roles and responsibilities, progression framework, etc.
Why a design system?
Innovative digital products demand that teams work in, and have a high tolerance for, ambiguity. While data should inform a team’s decisions, design must move quickly to provide accurate specifications to ship impactful experiments, features, and solutions to customers (see Design — A Process).
Design systems should always reflect the existing codebase, enabling designers to move to high fidelity quickly and accurately. They should be unrestrictive, allowing teams to create new components at any time to suit their needs.
A design system should enable the design team to distinguish between new and existing components clearly. There should be a clear process for adding, improving, or removing patterns and components in the technical library, especially when new experiments are promoted or when new features become widely adopted.
The role of Figma
Figma is a market leader in design system distribution and maintenance among modern product teams. It supports real-time collaboration, documentation, asynchronous library updates, bespoke variables, real-time mock-up and prototype inheritance, and offers a vast library of community plugins. Most recently, it has introduced fully interactive component variants.
Summary
To remain competitive, products that operate globally should ensure every innovation, whether regional or service-related, has the potential to benefit the broader product.
In short, modern design systems enable digital products to distribute, internationalize, and align their features across multiple markets and platforms. They allow larger design functions to operate and innovate consistently at scale