01. Tại sao không phải là UI Kit?

Trong giới thiết kế hiện đại, người ta thường nhầm lẫn giữa một UI Kit và một Design System (DS). Là một UI/UX Designer tập trung vào mảng Tech-SaaS, tôi nhận ra rằng: UI Kit chỉ là một tập hợp các linh kiện tĩnh, trong khi Design System là một thực thể sống, có ngôn ngữ riêng và khả năng tự vận hành đồng bộ với Code.

Xây dựng DS không chỉ là vẽ các nút bấm đẹp. Đó là việc thiết lập các quy tắc (rules), ràng buộc (constraints) và tính nhất quán (consistency) để khi sản phẩm scale lên hàng trăm màn hình, bạn không phải đi sửa thủ công từng pixel.

02. Tư duy nguyên tử (Atomic Design) trong Figma

Áp dụng tư duy của Brad Frost vào Figma là bước đi nền tảng. Tôi chia hệ thống thành 5 cấp độ để quản lý tài nguyên một cách logic nhất:

03. Design Tokens: Linh hồn của khả năng tùy biến

Nếu bạn muốn thiết kế giao diện Dark/Light mode chỉ trong 1 cú click, Design Tokens là chìa khóa. Thay vì đặt tên màu là #00f2fe, chúng ta đặt tên nó là color-brand-primary.

Trong các dự án SaaS lớn, việc sử dụng Variable của Figma giúp tôi map các giá trị từ Design sang Code (CSS/JSON) một cách chính xác tuyệt đối. Designer thay đổi token, Engineer chỉ cần pull dữ liệu mới, toàn bộ giao diện sẽ tự động cập nhật.

04. Quy trình tối ưu hiệu suất (The Workflow)

Dưới đây là quy trình 4 bước tôi áp dụng để xây dựng hệ thống cho các startup công nghệ:

1. Audit & Inventory: Liệt kê tất cả các component hiện có trong sản phẩm để tìm sự trùng lặp.
2. Foundation Setup: Thiết lập Grid, Typography Scale và Color Palette sử dụng Figma Styles & Variables.
3. Component Architecture: Xây dựng Master Components sử dụng Auto Layout 5.0 và Component Properties (Boolean, Instance Swap, Text).
4. Documentation: Viết hướng dẫn sử dụng (Usage Guidelines) ngay trong Figma để Dev có thể tự tra cứu mà không cần hỏi lại Designer.

05. Bài học thực chiến: Những hố đen cần tránh

Sau nhiều dự án "đập đi xây lại", tôi rút ra 3 bài học đắt giá:

• Đừng Over-engineering: Đừng cố xây dựng một hệ thống quá phức tạp khi team của bạn chỉ có 2 người. Hãy để DS lớn lên cùng với sản phẩm.
• Auto Layout là bắt buộc: Nếu component của bạn không co giãn theo nội dung, đó chưa phải là một component thực thụ của DS.
• Đặt tên theo ngữ cảnh (Semantic): Thay vì blue-500, hãy dùng bg-action-hover. Điều này giúp Dev hiểu ý đồ thiết kế mà không cần đoán.