What is the "design system" that improves brand image and consistent design? Explanation based on examples!

The design system is a collection of guidelines and components to make the user interface of products and services consistent.
This allows designers and developers to work more quickly and efficiently, and as a result, provide consistent experiences to users.

In this article, we will introduce the concepts and examples of the design system!

The design system is a collection of guidelines and components to ensure the consistency and efficiency of design in product development. This system usually contains the following elements:

1. UI component
   1. Reused user interface elements, buttons, text fields, navigation bars, etc. These are created based on design and coding guidelines to keep them consistent.
2. Design principle
   1. Basic principles and philosophy that guide design decisions. This includes user experience consideration, accessibility standards, and responsive design approaches.
3. Style guide
   1. A guideline that defines visual elements such as colors, fonts, intervals, and icons. This will maintain the consistency of the brand.
4. Pattern library
   1. Collection of design patterns that are often used. This includes a design solution that is ideal for specific user interaction and workflow.
5. Documentation and guidelines
   1. A detailed document that explains how to use the design system, how to use components, how to apply the design principle.
6. Chord reset
   1. A repository for storing reusable code, components, and templates. As a result, developers can easily use existing assets and promptly develop their development while maintaining consistency.
      

The design system aims to enable designers and developers to have a common standard for providing consistent user experiences, and to improve the speed and quality of product development. It also has the role of new team members and external collaborators so that they can easily participate in projects.

Shopify also has a design system.

Polaris is often used for buttons and navigation used on the app management screen.

Developed by our companyGO SUB | Subscription | SubscriptionIt is also implemented using Polaris!

A design system built by the Japanese Digital Agency.
Anyone can view it, and the figma data is also available.

SMBC design system that won the Good Design Award for 2021. This is an unusual case of adopting a design system at a major financial institution.

From the outline of the design system, we introduced it with examples.

A very effective design system for major companies to unify design and consistent user experience.

It can be said to be an important strategy to improve the productivity of the team and ensure output quality, no matter who enters the team at any time.