<>“If UI is the skin, a Design System is the DNA.” Trong bài viết này, tôi sẽ chỉ cho bạn cách tôi xây dựng một design system và cách bạn có thể tạo ra một hệ thống vừa đơn giản, mạnh mẽ và bền vững. Dù bạn là người mới bắt đầu hay một nhà thiết kế dày dạn kinh nghiệm, bài viết này đều dành cho bạn.
/Tại sao Design system lại quan trọng?
Hãy tưởng tượng bạn đang thiết kế 12 màn hình. Nhưng số màn hình sẽ phải lên tới 100 màn hình. Bạn có copy – paste một nút mỗi lần không? Từng button một, từng frame một? Không. Bạn sẽ phát điên mất. Đó chính là lúc design system giúp bạn giải quyết vấn đề. Chúng giúp bạn:
– Xây dựng nhanh hơn với các thành phần có thể tái sử dụng.
– Duy trì tính nhất quán giữa các sản phẩm và màn hình.
– Cải thiện sự hợp tác với các team.
– Cho phép mở rộng trên nhiều nền tảng.
/Bên trong Design system có gì?
1. Color Token
Đai diện cho color (mầu sắc), trạng thái (states) và backgrounds.
2. Typography scale
Giúp nhất quán cho size font (kích thước font), weights (độ đậm nhạt), line heights (khoảng cách giữa các dòng văn bản)
3. Spacing & Grid
Đảm bảo sự cân bằng về thị giác và nhịp điệu
4. Components
Giúp tái sử dụng UI như: button, input, card …
5. Pattern & Layout
Giúp tái sử dụng UI flow (form, modal, onboarding …)
6. Documentation
Giúp dev và designer đồng bộ trong làm việc cùng nhau
/Nào chúng ta bắt đầu từng bước 1
1. Bước cơ bản:
– Đặt tên theo chuẩn: Primary/500, Success/100, Neutral/700.
– Map colors theo các trạng thái (hover, focus, disabled).
– Đạt chuẩn khả năng truy cập về độ tương phản
//Mẹo: dùng Coolors
2. Thiết lập Nhịp điệu Kiểu chữ
– Chọn một bộ font chữ sạch như Inter cho web hoặc SF Pro
– Xác định size cơ sở : 12 → 96px.
– Sử dụng token như text-300-sb (16px, in đậm một phần), text-300 (16px, thông thường) v.v.
//Mẹo: dùng plugin TypeScale
3. Build the Atomic Components
– Tạo button variants: primary, secondary, link.
– Add interactive states: hover, active, disabled, pressed.
– Build các components trong Auto Layout and with Variants in Figma.
4. Create Layouts & Templates
– Design section templates: card lists, filters, empty states, dashboards.
– Định nghĩa grid system: 12-column grid, 8px spacing.
– Document responsive behavior for desktop, tablet & mobile.
5. Viết Documentation
– Dùng Notion + Figma Descriptions cho tài liệu.
– Bao gồm Do’s & Don’ts, spacing rules, usage examples.
