Design system là gì? 8 bước tạo design system

1. Design system là gì?

Design System là một bộ quy tắc, nguyên tắc, tài liệu và công cụ được sử dụng để hướng dẫn thiết kế Ui design nhằm phát triển sản phẩm (website, ứng dụng, phần mềm) một cách nhất quán. Nó giúp đảm bảo sự đồng bộ trong thiết kế, và giúp các nhóm phát triển sản phẩm khác (code, tester) hiểu và làm việc hiệu quả hơn.

Design system hiểu đơn giản là hệ thống các quy tắc, quy định thiết kế cơ bản trong UI Design bao gồm quy tắc cột (column), quy định dàn trang (layout grid), button, font chữ, bảng màu chính/phụ/trạng thái màu, margin, padding, icon… 

2. Design system gồm những gì?

1. Nguyên tắc thiết kế (Design Principles): Các quy tắc cốt lõi về thương hiệu, giao diện, trải nghiệm người dùng.

Ví dụ: Google Material Design có nguyên tắc về ánh sáng, chiều sâu và chuyển động.

2. Hệ thống UI Components (UI Component Library): Gồm các thành phần giao diện có thể tái sử dụng như button, form, navbar, card, modal, v.v.

3. Hệ thống màu sắc & Typography

• Bảng màu chính, màu phụ, trạng thái màu (hover, active, disable).
• Font chữ, kích thước, khoảng cách giữa các chữ và dòng.

4. Hệ thống lưới & Khoảng cách (Spacing & Layout System)

• Quy chuẩn về margin, padding, grid system để đảm bảo giao diện thống nhất.

5. Hệ thống text box

• Gồm các quy tắc về textbox như title, description, body text
• Các quy tắc khi xếp các textbox trong cùng 1 layout được thiết kế sẵn

6. Một số thành phần khác trong design system

• Quy tắc sử dụng icon, định dạng ảnh, kích thước, style ảnh.

• Code (React, Vue, HTML/CSS) của các component giúp developers dễ dàng triển khai.

3. Lợi ích của design system?

1. Design system giúp tăng hiệu quả và năng suất 

- Design system giúp UI designer thiết kế các layout nhanh chóng bằng việc giảm thiểu việc phải thiết kế lại các thành phần giống nhau (button, textbox, layout…). Ngoài ra, các quy tắc về dàn trang cũng đã được quy định rõ từ ban đầu nên UI designer cũng không cần tốn thời gian cho chúng.

- Ngoài ra, design system còn giúp việc sửa chữ trở nên nhanh chóng và đồng bộ. Ví dụ để thay đổi màu sắc, font chữ, button … thì người thiết kế UX/UI chỉ cần chỉnh sửa trực tiếp trong design system, sau đó apply chúng cho toàn bộ thiết kế.

- Đối với các team khác như Dev, Tester thì khi có design system sẽ giúp họ hiểu được mình cần làm gì, giảm thiểu thời gian làm việc cũng như hiệu quả công việc sẽ cao hơn đáng kể. 

2. Design system giúp thúc đẩy tính nhất quán và đồng bộ

- Gần như tất cả các thành phần trong sản phẩm sẽ phải tuân theo các thiết kế, quy tắc, quy định trong design system nên khi nhìn vào giao diện người dùng tổng thể sẽ có cho ta cảm giác hài hòa, đồng bộ, tinh tế và chuyên nghiệp.

- Ngoài ra, chính từ điều kể trên sẽ giúp tính nhận nhiện thương hiệu được tốt hơn bởi vì design system sẽ sử dụng các quy tắc trong bộ nhận diện thương hiệu.

3. Design system giúp tăng tốc quá trình thiết kế

Hệ thống được thiết kế tốt sẽ mang lại cho bạn sự tiết kiệm thời gian khi tạo và cập nhật giao diện người dùng. Vì do bạn có thể dựa vào một tập hợp các quy ước đã thiết lập giúp mọi việc trở nên dễ dàng hơn đối với bạn. Ngoài ra, việc sử dụng các mẫu thiết kế có sẵn trong design system có thể giúp tăng tốc quá trình tạo ra các layout mới..

4. Design system giúp dễ dàng mở rộng quy mô sản phẩm UI Design

- Nếu cần mở rộng sản phẩm trong dài hạn thì design system sẽ giúp đội ngũ hoặc đối tác đi sau dễ hiểu và dễ dàng thiết kế mới các layout UI design.

- Đơn giản đó chỉ là thiết kế thêm vào (add new) các layout dựa trên những quy tắc, quy định trước đó. Ngoài ra, nếu sau này cần chỉnh sửa thì cũng dễ dàng hơn đáng kể vì chỉ cần chỉnh lại các quy định/thiết kế mẫu và apply chúng cho toàn bộ các layout UI Design

5. Design system giúp tăng khả năng truy cập và sử dụng

- Ở một khía cạnh nào đó, việc design system logic sẽ giúp người dùng dễ dàng hiểu được đâu là việc mình cần để hoàn thành tác vụ khi sử dụng sản phẩm.

Ví dụ: đối với việc mua hàng sẽ luôn được hoàn tất bằng button “mua hàng”, “mua ngay” màu xanh dương. Điều đó sẽ giúp người dùng dễ dàng hoàn tất giao dịch mua hàng mà không cần tốn nhiều thời gian tìm kiếm bởi vì design system đã ngầm quy định bằng màu sắc một cách trực quan.

6. Hướng dẫn rõ ràng và chi tiết về sản phẩm

Tài liệu rõ ràng và chi tiết giải thích cách sử dụng các thành phần và hướng dẫn của hệ thống thiết kế. Cái này rất quan trọng để đảm bảo rằng người thiết kế và nhà phát triển có thể dễ dàng triển khai hệ, xây dựng hệ thống.

4. Cách xây dựng design system 

Bước 1: Nghiên cứu và Xác định Mục tiêu

Trước khi xây dựng Design System, cần xác định rõ lý do và mục tiêu của hệ thống. Một số mục tiêu phổ biến bao gồm đồng bộ hóa giao diện, tối ưu quy trình làm việc giữa các team, cải thiện trải nghiệm người dùng và giúp sản phẩm dễ dàng mở rộng.

Việc nghiên cứu các hệ thống thiết kế hiện có như Material Design, Carbon Design System hoặc Atlassian Design System sẽ giúp rút ra những bài học quan trọng. Ngoài ra, cũng cần xác định rõ đối tượng sử dụng hệ thống, bao gồm designer, developer, product manager và marketer.

Bước 2: Phối hợp với Các Team liên quan

Design System không chỉ phục vụ đội ngũ thiết kế mà còn ảnh hưởng đến các nhóm khác như phát triển, kiểm thử, nội dung và thương hiệu. Việc phối hợp chặt chẽ giúp hệ thống hoạt động trơn tru và hiệu quả.

• Dev Team: Làm việc với developer để đảm bảo UI Components có thể triển khai dễ dàng. Cung cấp thư viện code sẵn có, hướng dẫn sử dụng và thống nhất về công nghệ phát triển.

• Tester Team: Định nghĩa các tiêu chí kiểm thử giao diện, đảm bảo UI hoạt động đúng như thiết kế trên mọi nền tảng. Xác định rõ các trạng thái component và quy tắc kiểm tra responsive, cross-browser, accessibility.

• Graphic Design Team: Đồng bộ hình ảnh, icon, animation để giữ sự nhất quán giữa thiết kế UI và hình ảnh thương hiệu.

• Content Team: Hướng dẫn cách viết nội dung phù hợp với tone & voice của thương hiệu, đồng thời đảm bảo tính nhất quán trong typography và cấu trúc nội dung.

Bước 3: Xây dựng Nguyên tắc Thiết kế

Nguyên tắc thiết kế là nền tảng giúp giữ sự nhất quán trong toàn bộ hệ thống. Các nguyên tắc này bao gồm:

• Định nghĩa phong cách thiết kế (hiện đại, tối giản, năng động, truyền thống, v.v.).

• Quy tắc về UX/UI để đảm bảo tính dễ sử dụng, khả năng mở rộng và tối ưu hiệu suất.

• Hướng dẫn thương hiệu bao gồm tone & voice, phong cách hình ảnh và quy chuẩn thiết kế chung.

Bước 4: Thiết lập Nền tảng Cốt lõi

Hệ thống thiết kế cần có các yếu tố cơ bản để đảm bảo tính nhất quán trong sản phẩm.

• Hệ thống màu sắc: Bao gồm màu chính, màu phụ, màu trạng thái (success, error, warning) và bảng màu cho light/dark mode.

• Typography: Xác định font chữ chính và phụ, kích thước chữ, khoảng cách dòng, độ dày chữ.

• Grid & Spacing: Xây dựng hệ thống lưới và khoảng cách để đảm bảo bố cục nhất quán.

• Hình ảnh và biểu tượng: Quy định về kích thước, định dạng, khoảng cách và cách sử dụng icon, illustration.

Bước 5: Xây dựng Thư viện UI Components

Thư viện UI Components giúp tạo ra các thành phần giao diện có thể tái sử dụng, giúp tiết kiệm thời gian và giảm sai sót trong quá trình thiết kế và phát triển.

• Xây dựng các thành phần UI cơ bản như button, input, card, modal, table, navigation.

• Định nghĩa rõ cách sử dụng, kích thước, trạng thái (hover, active, disable) và cách kết hợp các thành phần.

• Tổ chức thư viện UI theo phương pháp Atomic Design, bao gồm:

  • Atoms: Thành phần nhỏ như button, input, icon.

  • Molecules: Nhóm atoms tạo thành thành phần lớn hơn như form field, search bar.

  • Organisms: Thành phần phức tạp như navbar, card với hình ảnh và văn bản.

• Kết nối với codebase bằng cách sử dụng Storybook hoặc hệ thống Design Token để đồng bộ giữa thiết kế và phát triển.

Bước 6: Xây dựng Documentation và Guidelines

Một hệ thống thiết kế tốt cần có tài liệu hướng dẫn chi tiết để đảm bảo tính nhất quán khi sử dụng.

• Tài liệu bao gồm hướng dẫn sử dụng UI Components, nguyên tắc thiết kế, hệ thống màu sắc, typography, layout, content guidelines.

• Hướng dẫn cần dễ hiểu, có hình minh họa và ví dụ thực tế.

• Sử dụng các công cụ như Notion, Zeroheight, GitHub Wiki hoặc Storybook để quản lý tài liệu.

Bước 7: Kiểm thử, Áp dụng và Duy trì

Sau khi hoàn thành Design System, cần thử nghiệm trong các dự án thực tế để đảm bảo tính hiệu quả.

• Thử nghiệm với các sản phẩm thực tế như website, ứng dụng, dashboard.

• Thu thập phản hồi từ đội ngũ thiết kế, phát triển và người dùng.

• Cập nhật và tối ưu hệ thống để đảm bảo tính linh hoạt khi sản phẩm phát triển.

Việc duy trì và cải tiến Design System là một quá trình liên tục. Cần có cơ chế để đội ngũ có thể đề xuất thay đổi, bổ sung component mới hoặc tối ưu các thành phần hiện có.