Creating a design system

Getting Started

A design system is a library of design standards, guidelines, principles, and reusable design components. It helps to create a consistent, visually appealing, usable, and scalable user experience. Basically, it provides uniform styling and interaction guidelines for a design team.

A well-designed design system:

• Saves time and effort in designing new interfaces, features, and functionality.

• Allows teams to work in sync.

• Ensures consistent designs.

Designers don’t need to design from scratch, so they can focus on improving the quality of design solutions.

 

Elements of a Design System

1. Purpose and values: It’s important to align a design system with a clear purpose and values. Team should understand what they are working towards. 

2. Design Principles: Design principles are visual representation of your product’s purpose and values. They are the reason why the product is being built. They include brand symbols, color schemes, content, etc. Team should understand what they’re creating.

3. Brand Identity: It's the combination of words, symbols, and design elements that helps identify a product or service. The brand is the personality of a business and helps differentiate itself from the competitors. It's how the customers relate with the brand. 

4. Components: Component is an individual UI element that is meant to do a specific task, e.g. button, list, header, input field, etc. Sometimes, a components library is packaged into a UI kit. The components reduce the design and development efforts.

   • A component does only a specific action. E.g. Button is meant to navigate to next screen

   • A component is defined as the visual representation, different states, and supported interactions.

   • A component can have variations based on what it does. E.g. Primary and Secondary buttons 

   • Components bring visual consistency in the product. 

   • Designers can start with using existing components from a library whenever a feature is to be defined.

5. Patterns: A UI pattern is a common solution to a recurring design problem. E.g. Search, share, etc.

   • Patterns could be a layout pattern, navigation pattern, or interaction patterns.

   • Patterns make a product familiar to a user.

   • It improves the learnability of the product as well.

   • The patterns should be designed keeping target users in mind.

6. Guidelines

   • Styleguide: It defines the grid, colors, typography, and graphics to be used in the product. This should align with or compliment the brand identity. 

   • UX Writing Guidelines: These guidelines define tone, conventions, terminology, content patterns, and more specifications regarding product copy.

   • Usage: These guidelines explain how to use the design system. 

 

Design Tokens

Operationally, a design token is a basic unit on which a design system is built. It can represent all values that you need in order to construct and maintain your design, such as colours, spacing, typography, object styles, animation, etc. as data. 

Design tokens make it a lot easier to maintain design consistency because you have all important values stored in one place. This is where design and development converge to actualize the design system. 

For a deep dive, here is good read on Design Tokens from Adobe

 

Do’s & Don'ts

Do’s	Don’ts
Have a big picture in mind while creating a design system. Consider elements of a design system with respect to each other and not in isolation. Have a clear definition for each component and pattern. Minimize the number of variations.	Don’t start building a design system without defining principles. Don’t design components from scratch when it could be inspired from any standard framework. Don’t create design patterns when there are familiar standard patterns available, e.g. login, attach file, share, etc.

 

References 

• The Main Pillars of Effective Design Systems from Adobe. 

• What's a Design System & What Components Is it Made Up of? from Hubspot. 

• Understanding the Parts of a Design System from Workday Design.

• Design Systems 101 from NN Group. 

• Top 8 Design System Examples from UXPin.

• Design Systems Guide: Types, Benefits, Elements and Examples from AufaitUX. 

 

Other Related Best Practices

• Prototyping Basics

• Getting started with design concepts. Do’s and don’ts

• Visual Design Basics

• Guideline for UX Writing

 

Suggested Tools

For Brand Identity	For Components & Patterns	For Guidelines & Documentation
Figma Photoshop Illustrator Canva	Figma	Google Docs Figma