Design System Roadmap

Understand the Basics

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

What is a Design System?

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

Need of Design System

Having a solid design system speeds up your work by making the product team more efficient, and it creates consistency and harmony within the product and brand ecosystem. A strong design system takes the burden off individual designers to think through commonly recurring design problems. With a full library of…

Design System vs Component Library

A component library is just a collection of visuals i.e. colours, button stylings, fonts, etc. A Design System takes it to the next level by including standards and documentation around the look and usage of each component. The Design System acts as the single source of truth.

What is Atomic Design

Atomic design (by Brad Frost) is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together.

Stakeholders Involved in Building

Building an effective design system is not an individual responsibility, you need more than just designers. Here’s a quick list of the disciplines that can be represented in your team to create an effective design system:

Design System Examples

Terminology

Design systems can be tricky if you don’t know what certain words mean. Have a look at the roadmap nodes as well as follow the link below to read the glossary.

Component

Components are the reusable building blocks of a design system. Each component meets a specific interaction or UI needs, and is specifically created to work together to create patterns and intuitive user experiences.

Component Library

A component library is a collection of all the components used in a website, software or app. Some of the common tools to showcase and browse components in a component library include are given below:

Design Language

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

Governance

Governance is a framework for clarifying roles, responsibilities, and authority over decisions. Having that clarity ensures that decisions for the design system funnel smoothly through the governance process

Guidelines

Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.

Pattern

Patterns are best practice design solutions for specific user-focused tasks and page types. Patterns often use one or more components and explain how to adapt them to the context. Some sample patterns could be user signing in to the application or performing the checkout operation.

Pilot

Pilots are one of the best ways to put your design system through its paces, especially before the design system even gets to a v1. Like television pilots help test audience reactions to a series concept without investing significant resources to create the whole thing, application pilots are a good foundation for…

Token

Design system tokens are the style values of UI elements such as color, typography, spacing, shadows, etc., that are used across products and capable of being converted to a format for any platform (web, mobile, desktop). Tokens are building blocks of the design system—think of them as sub atoms, the smallest…

UI Kit

As it relates to a design system, a UI Kit is a representation of coded components created in a way that designers who don’t know code can create interface mockups. Examples of UI kits are Sketch libraries and Figma design systems.

Making a Design System

First step in building a design system is identifying if you even need a design system.

Making it from Scratch

If you are building a Design System from Scratch, you may skip the "Existing Design Analysis" node of the roadmap and start with "Creating Design Language".

Making it from Existing Design

If you are creating a Design System from pre-existing product design, there is an additional step to perform the existing design analysis, understand the existing design process, perform a visual audit, identify design elements and components and so on.

Existing Design Analysis

First step in creating a design system from an existing design is performing a design analysis and understanding what you will be working with to identify the requirements and prepare a plan. Performing the analysis may consist of:

A/B Tests & Experiments

Understand how the team implements A/B tests and experiments on different screens and if the new design system should accommodate any necessary requirements.

Regional Requirements

Understand any regional requirements such as LTR or any other UX variations that your design system should accommodate.

Documentation

Organize and document the results of visual audit, design elements, components with variations, states, patterns found, any existing documentation, current design process, and considerations. This documentation will be shared across the team and act as a guide when building the new design system.

Performing a Visual Audit

Take screenshots of your current product with the help of your team. You can use any presentation software like Google Slides or print and pin them on foam-core boards. Group the screenshots into categories like buttons, navigation, forms, tables, charts, lists etc.

Identify Existing Design Process

To better understand the kind of design system you would like to implement, you need to start by reviewing and analyzing the current approach for design at your company. Find the answers to the following questions:

Creating Design Language

Like any language, a design language is a methodical way of communicating with your audience through your approach to product design. It’s the cornerstone of consistent customer experiences.

Icons

Icons are visual symbols that communicate meaning quickly. They should maintain consistent style, use a grid system, provide multiple sizes, organize into semantic categories, ensure accessibility, consider cultural neutrality, be available in multiple formats, include interactive states, and follow systematic…

Sizing

Sizing tokens establish consistent dimensions across components and layouts. An effective system should establish a foundational unit, create predefined size variations, ensure minimum accessibility requirements, define standard icon sizes, establish container dimensions, implement fluid sizing, and account for…

Visual Forms

Visual forms focus on aesthetic and interactive design aspects of form components. Effective design should establish clear information architecture, create consistent field styling, develop harmonious label positioning, design clear error communication, implement progressive enhancement, prioritize mobile-first…

Color

Color establishes brand identity and visual hierarchy in design systems. A comprehensive color system should organize colors logically, meet WCAG accessibility standards, support light/dark themes, create semantic categories, establish systematic naming, balance brand expression with function, and provide multiple…

Spaces

Spacing tokens define white space between elements, creating visual rhythm and clear relationships. An effective system should establish a foundational unit, create systematic scales, define consistent internal spacing, establish layout guidelines, implement fluid spacing, create meaningful categories, and ensure…

Typography

Typography establishes hierarchy, readability, and brand personality. An effective system should develop harmonious scales using mathematical ratios, choose appropriate typefaces, implement fluid typography, establish consistent line-heights, define font weight hierarchy, ensure accessibility compliance, and…

Avatar

Avatars represent users or entities in interfaces. They should support multiple shapes (circular, square), various sizes, handle missing images with initials or default icons, include status indicators, maintain image quality standards, ensure accessibility, provide loading states, and support group arrangements…

Banners

Banners communicate important information at the top of pages. They should support different message types with distinct visuals, various positioning options, clear dismissal mechanisms, relevant actions, consistent iconography, mobile adaptations, subtle animations, content guidelines, proper accessibility, and…

Badges

Badges are small status indicators that communicate information about objects or actions. Effective design should include numeric indicators for notifications, status badges with distinct colors, category labels, interactive states, multiple sizes, semantic color integration, consistent positioning, content…

Cards

Cards are flexible content containers that group related information and actions. They require clear content hierarchy, consistent elevation systems, responsive behavior, distinct interactive states, media support, defined action areas, content variants, loading states, proper accessibility, and consistent spacing…

Forms

Forms collect user input and require standardized input components, comprehensive validation systems, effective labeling strategies, consistent layouts, clear error handling, progressive disclosure, required field indicators, auto-complete integration, proper accessibility, and mobile optimization.

Buttons

Buttons enable user actions and require clear visual hierarchy (primary, secondary, tertiary), comprehensive interactive states, multiple sizes, icon support, content guidelines, minimum 44px touch targets, loading indicators, responsive behavior, proper accessibility with ARIA labels, and subtle animations.

Dropdowns

Dropdowns reveal option lists when activated to save space. They need clear triggers with visual indicators, organized options with grouping, search/filtering for long lists, multi-select support, smart positioning, full keyboard navigation, loading states, mobile adaptations, proper accessibility, and performance…

...other

Specialized elements beyond core components include badges for notifications, breadcrumbs for navigation, progress indicators, tooltips for help, pagination for browsing, tab systems, accordions for collapsible content, modals for focused interactions, notification systems, and basic data visualization elements.

Defining Design Tokens

Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.

Writing Guidelines

Every consistent experience needs watertight writing. Laying down the foundations for your house style early keeps everything in line with consistent grammar, style choices and action-oriented language to help your design.

Tone of Voice

A clear tone of voice defines how you speak to your audience at every moment in their journey, helping them get wherever they want to go.

Terminology

Create the standard terms and phrases that need to be kept the same throughout the user experience, speeding up the design process and unifying your voice.

Design Principles

The considerations that guide the basis of your practice. They outline how you approach design from a philosophical perspective and help with everyday decisions.

Vision

Brand vision serves as the foundation for design system decisions, providing purpose and direction. An effective vision should articulate organizational purpose, identify core values, visualize future success, prioritize user needs, clarify brand uniqueness, account for cultural considerations, and connect to…

Accessibility

Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them.

Functional Colors

Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text.

Dark Mode

Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see.

Guidelines

Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them.

Creating Core Components

Components are the main building blocks for user interfaces. Building a reusable component library enhances your product development workflow by reducing design and tech debt and speeding up the process. Core components can’t be broken down into granular pieces without losing their meaning.

Units

Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values.

Grid

Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily.

Breakpoints

Predefine the screen sizes and orientations your grid will adapt to.

Spacking

Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid.

Monochrome Version

A monochrome version of your logo that looks good on top of photography or when it’s printed with a poor quality printer.

Small Use Guidance

Your logo must perform well and be recognisable at all sizes. Tips for using your logo in these cases will minimise the risk of it being misused.

Placement Guidance

Logo placement guidance ensures consistent brand representation through clear positioning, sizing, and clearance rules. Effective guidelines should define minimum clearance areas, establish preferred positions for different contexts, provide size specifications, define background treatments, and account for…

Usage Guidance

Logo usage guidance provides rules for proper implementation to maintain brand consistency. Effective guidance should establish clear examples of proper usage and mistakes to avoid, define logo variations, specify color requirements, prohibit unauthorized alterations, and include approval processes for new contexts.

File Formats

Providing a variety of formats for the vector version of your logo will make it easier for others to work and prevent anyone from redrawing it.

Responsiveness

Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout.

Grid Relation

Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes.

Readability

Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text.

Performance

Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem.

Guidelines

Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them.

Accessibility

Guidelines for how you approach accessibility and how you leverage colour, hierarchy and assistive technologies to help your users.

User Onboarding

How you onboard your users to your product or a new feature and give them a great experience from the start.

Microcopy Guidelines

The standard way to write for the components in your design system. These take platform conventions and best practices for writing all into consideration.

Accessibility

For icons that convey a meaning or serve a function, add the necessary support for screen readers. You can skip this for decorative icons.

Style

Make sure that your icon family makes visual sense as a whole. Picking an outlined or filled style and sticking with it will lead to better visual consistency and predictability.

Naming

Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability.

Grid Relation

Draw your icons in a bounding box that plays well with your grid. This makes for a better pairing with other UI elements. A good example of this would be icons with bounding boxes paired with text.

Sizes

Provide different sizes for icons that correlate to your grid. Provide a minimum size and remove unnecessary detail for your icons for smaller sizes.

Keywords

Adding keywords will improve the discoverability of each icon and provide a better user experience for anyone using your system.

Reserved Icons

Reserving icons that represent common actions will prevent their use in any other context. System icons for navigation or adding and deleting are a good example. This leads to a more intuitive user experience.

Guidelines

Provide guidelines on how and when to use icons, what to keep in mind when working with them and how not to use them.

Tooling

Design system tooling encompasses technical infrastructure and workflows. Effective tooling should integrate with design tools, provide component libraries for frameworks, implement token management, utilize documentation platforms, establish automated versioning, create testing infrastructure, and enable…

Design Editor

There are many design editors available in the market today with the most popular names being Sketch, Figma and Adobe XD. If you're unsure which route to go down it's often best to speak with your team.

Plugins

Most popular Design Editors (Sketch and Figma, especially) come with third-party plugin support. Whilst it's best to use the editors in-built tools for laying out your components, plugins can bring in a range of useful data to populate them.

Version Control

Having your design versioned with semantic versioning will allow you to easily align design with development, roll back faulty changes and release changes in code and design at the same time.

Contribution Guidelines

Define the process of contributing to the UI and UX of the design system and document it in a discoverable place to make it easier for everyone to contribute.

Project Management

Design systems are no different than any other project your team might take on. In order to successfully build and maintain one, you need a clear strategy that’s well executed daily, and you‘ll need to create opportunities for your colleagues to give feedback to help share your design system together.

Avatar

Avatars are used to show a thumbnail of a user photo or a visual representation of any other type of content.

Input Text

Input text lets users enter and edit text.

Banner

Banners display an actionable message used as a prominent way of communicating with your users.

Input Checkbox

An input checkbox is a form element used for selecting one or multiple options.

Badge

Badges are elements that represent the status of an object or user input value.

Input Radio

An input radio is a form element used for selecting one option from a list.

Button

Buttons are interactive elements used for single-step actions.

Input Switch

Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.

Card

Cards are used to group information about subjects and their related actions.

List

Lists define the layout of the page content or groups of elements stacking them vertically or horizontally.

Carousel

Carousels stack the same type of items and allows scrolling through them horizontally.

Loading Indicator

The loading indicator shows that an operation’s being performed and how long the process will take.

Dropdown

Dropdowns are used to display a contextual subview with a list of actions or content related to the area where the dropdown is.

Modal

Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.

Icon

The icon component is a way to align the way iconography static assets are displayed in the product.

Tabs

Tabs organise navigation between multiple pages or content sections.

Select

Select lets user select a value from a list of values in a form context:

Toast

Toasts provide short meaningful feedback messages about the action results.

Textarea

Text area lets users enter and edit text.

Tooltip

Tooltips are desktop-only components that display additional information when hovering over or focusing on an element.

Component Catalog

Isolate your UI components’ environment outside of your product codebase to make sure they’re not dependent on any global dependencies and can be easily reused.

Documentation

Having your code documented is key to driving adoption and reducing the load on the contributors.

Code Style

Having a defined code style helps align the way code’s written in the system and increases development velocity. It should be automated with the tools provided for each platform.

Unit Testing

Every part of the design system should be covered with unit tests. Once your system’s adopted, any change in the isolated environment may affect how the product works.

Accessibility Testing

Design systems should cover accessibility as much as possible. Making this automatic reduces the risk of inaccessible components or user flows in the product.

Semantic Versioning

Version your code with semantic versioning that dictates how version numbers are assigned and incremented.

Release Strategy

Design system releases should be automated and ideally use scripts ran locally or in remote CI pipelines to prevent broken releases.

Commit Guidelines

Automate the generation of your changelog by adopting a commit message guidelines that categorise and define the changes being made.

PR Templates

Create pull request templates that outline the change being proposed to facilitate productive discussions.

Contribution Guidelines

Define the process of contributing to the code of the design system. Document everything in a discoverable place to make it easier for everyone to contribute.

Roadmap

Setting your short and long term vision and mapping things out helps you decide the steps to take, understand your place in the bigger picture and prioritise day-to-day tasks.

Milestones

Define milestones that act as bigger epics in your project management with the help of your roadmap. These will help you understand your progress.

Ticketing

Make it easier to track your day-to-day progress by using ticketing software like Jira, Trello or GitHub. This’ll make it easier for others to submit feature proposals or bug reports.

Component Analytics

Track the usage of your components. For development you can use built-in tools like Figma’s Design System Analytics. For the end product you can have a separate way of tracking per platform depending on the technology.

Logging

Implement a way to track and pinpoint component-related outages in your product.

Tooling Analytics

Track what tools are being used for your design system. Find out which ones are used the most and which features are the most popular.

Service and Health Metrics

Define service and health metrics for your design system to set a benchmark on how well you’re doing. Common examples can be the number of tickets closed, improvements made or bugs fixed.

Community Meetings

Arrange community meetings with everyone who uses the design system. Share your knowledge and make proposals to improve the sense of community.

Communication Channel

Most product development work happens digitally, so create a digital channel where people can reach out and ask questions.

Open Hours

Create open hours in which you can engage your audience in a more private setting where you can discuss things in more detail. You can also use these as peer coding or peer design opportunities.

FAQs

To save everyone time, define which questions are asked frequently by your audience and document them in a discoverable place.