Xây dựng hệ thống thiết kế

Hệ thống thiết kế là gì và khi nào doanh nghiệp cần

Web22 nhận xây riêng bốn hạng mục Mini UI kit, Standard, Doanh nghiệp lớn và Duy trì, giá từ 3 đến 60 triệu tuỳ hạng mục, không tính công build website. Phù hợp doanh nghiệp có từ 2 sản phẩm số dùng chung thương hiệu; nếu chỉ vận hành đúng 1 website thì dịch vụ thiết kế website gọn và đủ hơn.

Hệ thống thiết kế là thư viện thành phần, design tokens và hướng dẫn chuẩn hoá ngôn ngữ giao diện cho một thương hiệu.

Trong Figma, hệ thống gồm nền tảng màu sắc và kiểu chữ, thư viện thành phần, design tokens và tài liệu bàn giao.

Ba lợi ích chính khi có hệ thống thiết kế đồng bộ

• Đồng nhất giao diện: giữ nhất quán trên nhiều sản phẩm dùng chung thương hiệu, không còn tình trạng mỗi trang một phong cách.
• Tăng tốc thiết kế và bàn giao: không vẽ lại nút bấm mỗi lần. Designer và lập trình viên dùng chung ngôn ngữ qua Figma Variables, tránh phỏng đoán giá trị.
• Mở rộng team không chồng chéo: nhiều designer và lập trình viên cùng làm song song theo cùng một hệ thống, không xung đột.

Bốn trường hợp nên đầu tư hệ thống thiết kế

• Doanh nghiệp có 2-5 sản phẩm dùng chung thương hiệu, ví dụ SaaS có trang marketing, bảng điều khiển và ứng dụng di động. Gói Standard 10-25 triệu cover hầu hết trường hợp này.
• Team có 2 designer và 3 lập trình viên cùng làm, không có hệ thống chung, mỗi người vẽ nút bấm khác nhau. Hệ thống thiết kế tránh tình trạng mỗi người một kiểu.
• Cần bàn giao thiết kế và code hiệu quả, Figma Variables xuất JSON đồng bộ hai chiều với cấu hình Tailwind và biến CSS. Lập trình viên không phải phỏng đoán giá trị màu hay khoảng cách.

• Sản phẩm đa thương hiệu hoặc white-label, design tokens hoán đổi dễ dàng, một hệ thống gốc tạo ra nhiều thương hiệu phụ. Gói Doanh nghiệp lớn 30-60 triệu phù hợp.

Ba trường hợp không cần hệ thống thiết kế

• Một website đơn giản, đơn thương hiệu, đầu tư hệ thống thiết kế 10-25 triệu là thừa. Dịch vụ thiết kế website (10-35 triệu) đã bao gồm giao diện đủ dùng cho startup giai đoạn thử nghiệm.
• Thương hiệu mới, chưa định hình rõ, hệ thống thiết kế cần thương hiệu ổn định về màu, kiểu chữ và giọng điệu trước. Đầu tư sớm khi thương hiệu đang thay đổi liên tục đồng nghĩa với làm lại sau 3-6 tháng.
• Team một designer và một lập trình viên, chi phí duy trì hệ thống thiết kế lớn hơn lợi ích thực tế. Tailwind và shadcn/ui (nguồn mở, có sẵn thành phần) là lựa chọn phù hợp hơn cho quy mô nhỏ.

Bốn hạng mục hệ thống thiết kế Web22 cung cấp

Web22 phân thành bốn hạng mục theo số thành phần và độ phức tạp của dự án.

Hạng mục 1, Mini UI kit (3 – 6 triệu · 1-2 tuần)

Phù hợp startup hoặc thương hiệu mới cần bộ thành phần cơ bản để triển khai nhanh.

Bộ khởi điểm gồm 5-10 khối giao diện: nút bấm (3-5 biến thể), trường nhập, thẻ nội dung, hộp thoại xác nhận và menu thả xuống.

• Nền tảng: bảng màu 8-12 màu, kiểu chữ 4-5 cấp, thang khoảng cách 4/8/16/24px.
• Bàn giao: file Figma editable kèm trang giới thiệu. Không bao gồm design tokens nâng cao và chế độ tối.

Hạng mục 2, Standard ⭐ (10 – 25 triệu · 3-5 tuần)

Đây là hạng mục đông khách chọn nhất, dành cho doanh nghiệp vận hành song song 2-5 sản phẩm số dùng chung thương hiệu. Gộp tất cả thành phần Mini cộng thêm thanh điều hướng, tab, bảng, biểu mẫu, phân trang, chú thích, hình đại diện và nhãn.

• Design tokens đầy đủ: color tokens ngữ nghĩa, thang khoảng cách, bán kính và bóng đổ, typography tokens.
• Figma Variables thiết lập theo chuẩn 2023 trở lên, design tokens đồng bộ hai chiều với code.
• Auto bố cục, biến thể và thuộc tính chuẩn Figma: trạng thái mặc định, di chuột, nhấn và vô hiệu hoá.
• Tài liệu bàn giao: hướng dẫn sử dụng, ví dụ dùng đúng và dùng sai, video Loom 30 phút. Chế độ tối tuỳ chọn tính thêm phí 30%.

Hạng mục 3, Doanh nghiệp lớn (30 – 60 triệu · 6-10 tuần)

Phù hợp doanh nghiệp lớn có từ 5 sản phẩm, team lập trình từ 3 người, cần đa thương hiệu.

Gộp tất cả thành phần Standard cộng thêm 40-60 thành phần phức tạp: bảng nâng cao, biểu đồ, lịch và trình soạn thảo văn bản.

• Chế độ tối đầy đủ cho mọi thành phần trong hệ thống.
• Tiêu chuẩn trợ năng WCAG 2.1 AA, tỉ lệ tương phản màu, điều hướng bàn phím, hỗ trợ trình đọc màn hình.
• Tài liệu bàn giao cho lập trình viên: cấu trúc Storybook, đoạn code mẫu React/Vue/Angular, xuất biến CSS và cấu hình Tailwind.
• Design tokens đa thương hiệu: một hệ thống thiết kế tạo ra 3-5 thương hiệu phụ chỉ bằng cách đổi bộ màu tokens. Kèm buổi hướng dẫn đào tạo 1-2 buổi.

Hạng mục 4, Duy trì / Mở rộng hệ thống có sẵn (1 – 3 triệu mỗi thành phần · 3-7 ngày)

Phù hợp khách đã có hệ thống thiết kế với Web22 hoặc đơn vị khác và cần bổ sung thành phần theo yêu cầu.

• Giá theo độ phức tạp: đơn giản (nhãn, hình đại diện) 1 triệu. Trung bình (hộp thoại) 1,5-2 triệu, phức tạp (bảng lọc, bộ chọn ngày) 2-3 triệu.
• Bao gồm: thành phần Figma với biến thể và trạng thái đầy đủ, liên kết design tokens, tài liệu hướng dẫn sử dụng.
• Đồng bộ giữa Figma và code qua Tokens Studio, tối thiểu 1 thành phần mỗi dự án.

Bốn nhóm việc Web22 phụ trách

Mỗi dự án hệ thống thiết kế gồm bốn nhóm việc tuần tự: Nền tảng, Thư viện thành phần, Design tokens, Bàn giao.

Web22 dùng tài khoản Figma Professional, khách có toàn quyền file editable sau khi bàn giao, không bị khoá vào Web22.

Nhóm 1, Nền tảng (Màu, kiểu chữ, khoảng cách)

Web22 kiểm tra logo và hướng dẫn thương hiệu hiện có, sau đó xác định bảng màu 12-20 màu và thang kiểu chữ 4-6 cấp.

Tiếp theo xác định khoảng cách modular 4/8/16/24/32/48px, bán kính, bóng đổ, lưới 12 cột kèm breakpoint và thư viện biểu tượng Lucide Icons.

Khách duyệt nền tảng trước khi chuyển sang bước xây thành phần.

Nhóm 2, Thư viện thành phần

Xây theo thứ tự ưu tiên: nút bấm, ô nhập liệu, thẻ, hộp thoại và danh sách thả xuống trước. Tiếp theo là thanh điều hướng, tab, bảng, phân trang và nhãn (gói Standard).

Mỗi thành phần có auto bố cục, biến thể (chính/phụ/bóng ma) và trạng thái (mặc định/di chuột/nhấn/vô hiệu hoá). Các thành phần lồng ghép nhau để dễ kết hợp.

Nhóm 3, Design tokens (Figma Variables)

Web22 thiết lập Figma Variables cho design tokens theo chuẩn 2023 trở lên.

• Color tokens ngữ nghĩa: –primary-500, –neutral-100, –success-base thay vì mã màu hex cứng.
• Spacing tokens: –space-1 tương đương 4px, –space-2 tương đương 8px, nhất quán toàn hệ thống.
• Radius và shadow tokens cùng Typography tokens (–text-body-md), lập trình viên dùng trực tiếp.
• Chế độ sáng/tối hoán đổi qua Variables. Xuất JSON tokens cho lập trình viên nhập vào cấu hình Tailwind, biến CSS hoặc Storybook.

Nhóm 4, Tài liệu bàn giao

Bàn giao gồm trang bìa Figma, trang giới thiệu với triết lý thiết kế và hướng dẫn sử dụng từng thành phần.

Mỗi thành phần có ví dụ dùng đúng và dùng sai để team mới tiếp nhận nhanh.

• Cấu trúc Storybook (gói Doanh nghiệp lớn) cho lập trình viên triển khai.
• Đoạn code mẫu React/Vue/Angular kèm theo từng thành phần phức tạp.
• Tài liệu Notion và video hướng dẫn Loom 30 phút (Standard trở lên) hoặc 60-90 phút (Doanh nghiệp lớn).

Quy trình 4 tuần (gói Standard)

Web22 chia gói Standard thành 4 tuần, Mini UI kit 1-2 tuần, Doanh nghiệp lớn 6-10 tuần với 6-8 mốc bàn giao. Tiến độ cụ thể được xác nhận sau buổi khởi động dự án.

• Tuần 1, Kiểm tra thương hiệu và nền tảng: xác định bảng màu, kiểu chữ, khoảng cách, lưới và breakpoint. Khách duyệt nền tảng trước khi qua bước xây thành phần.
• Tuần 2, Thành phần cốt lõi: xây nút bấm, ô nhập liệu, thẻ, hộp thoại và danh sách thả xuống. Thiết lập auto bố cục, biến thể và trạng thái, khách góp ý qua Figma comment.
• Tuần 3, Thành phần nâng cao: xây thanh điều hướng, tab, bảng, phân trang, hình đại diện và nhãn. Có luồng ví dụ thực tế (đăng nhập, bảng điều khiển) dùng thành phần đã xây.
• Tuần 4, Tokens và bàn giao: thiết lập Figma Variables và xuất JSON tokens. Ghi video Loom 30 phút, bàn giao file Figma editable và tài liệu Notion.

Thực hành tốt nhất để duy trì hệ thống thiết kế lâu dài

Xây xong chưa phải kết thúc, mỗi lần ra sản phẩm mới hoặc đổi nhận diện thương hiệu đều kéo theo việc rà lại hệ thống.

• Người phụ trách cố định: chỉ định một designer và một lập trình viên làm “DS Champion”. Họ duyệt mọi thay đổi, tránh mất nhất quán.
• Quản lý phiên bản: dùng Figma branching (Pro) hoặc Notion changelog theo dõi từng phiên bản. Khi thương hiệu thay đổi lớn thì phát hành phiên bản 2.0, sản phẩm cũ di chuyển dần.
• Quy trình yêu cầu thành phần mới: nộp yêu cầu qua Notion kèm ngữ cảnh sử dụng và ảnh tham chiếu. DS Champion xét duyệt hoặc đề xuất tái dùng thành phần có sẵn.

Năm thành phần thường thiếu khi tự xây hệ thống thiết kế

Web22 đã kiểm tra nhiều hệ thống thiết kế tự xây của khách trước khi nhận mở rộng.

• Trạng thái rỗng: giao diện giữ chỗ cho “không có dữ liệu” (bảng rỗng, tìm kiếm không có kết quả, bảng điều khiển mới). Thiếu mục này, lập trình viên tự thiết kế ad-hoc, mất nhất quán.
• Trạng thái đang tải: bộ xương giữ chỗ, vòng quay và thanh tiến trình cho 3-5 ngữ cảnh khác nhau.
• Trạng thái lỗi: trang toàn màn hình 404/500, kiểm tra biểu mẫu nội tuyến, thông báo lỗi dạng nổi.
• Hình đại diện dự phòng: hiển thị chữ tắt và màu theo hash tên thay vì ảnh bị vỡ.
• Biến thể đa thiết bị của bảng dữ liệu: màn hình điện thoại cần dạng thẻ thay vì cuộn ngang. Gói Standard cover 4/5 mục, Doanh nghiệp lớn cover cả 5 cộng thêm bộ chọn ngày và trình soạn thảo.

Tại sao Web22 dùng Figma Variables thay vì plugin tokens cũ

Trước năm 2023, design tokens trong Figma phải dùng plugin bên thứ ba, thiết lập phức tạp và dễ hỏng khi Figma cập nhật.

Figma Variables ra mắt giữa năm 2023 là tính năng gốc: tokens lưu trong file, đồng bộ hai chiều với code qua Tokens Studio.

Web22 chuẩn hoá Figma Variables cho mọi hệ thống thiết kế từ năm 2024 trở đi.

• Màu, khoảng cách, bán kính và kiểu chữ đều dùng Variables thay vì giá trị hex/px cứng.
• Chế độ sáng/tối hoán đổi qua một cú nhấp, Figma tự áp dụng biến thể cho toàn hệ thống.
• Aliasing tokens: semantic tokens tham chiếu primitive tokens (primary-500 → blue-500), thay đổi một chỗ, cập nhật toàn bộ.
• Xuất JSON cho cấu hình Tailwind, biến CSS hoặc theme Storybook, lập trình viên nhập thẳng vào code.
• Miễn phí trên mọi gói Figma (Starter, Professional, Organization).

Lưu ý: Web22 dừng ở khâu thiết kế và spec kỹ thuật (Figma, tài liệu Storybook), chuyển thành mã React/Vue/Angular nằm ngoài gói này. Cần code thành phần thì xem dịch vụ tuỳ biến theme WordPress hoặc đội frontend riêng của khách.

Cam kết kỹ thuật và những điều Web22 không làm

Năm cam kết kỹ thuật

Web22 áp dụng năm cam kết này với mọi khách, mọi hạng mục, không có ngoại lệ.

• Khách có toàn quyền file Figma sau bàn giao, file editable, khách thêm và chỉnh thành phần bất cứ lúc nào. Web22 không “khoá” file dạng chỉ xem như một số đơn vị khác.
• Auto bố cục, biến thể và thuộc tính theo chuẩn Figma 2023 trở lên, không dùng cách cũ (nhóm và khung thuần). Designer khác dễ mở rộng thành phần mà không phá vỡ cấu trúc.
• Design tokens qua Figma Variables, xuất JSON, đồng bộ hai chiều với code qua Tokens Studio. Lập trình viên không phải phỏng đoán giá trị.
• Video hướng dẫn Loom 30 phút để team mới tiếp nhận nhanh, áp dụng từ gói Standard trở lên. Gói Doanh nghiệp lớn có thêm buổi đào tạo 1-2 buổi trực tiếp.
• Có ưu đãi gộp gói khi đặt thiết kế website cùng hệ thống thiết kế. Web22 đã nắm thương hiệu từ dự án web, tiết kiệm thời gian kiểm tra ban đầu.

Năm việc Web22 không làm

Web22 công khai phạm vi từ chối để tránh hiểu lầm sau khi ký hợp đồng.

• Không nhận dưới 3 triệu mỗi dự án, thiết kế cẩn thận, thiết lập Figma và tài liệu bàn giao đã chiếm 2-3 triệu. Khách ngân sách thấp dùng Tailwind UI hoặc shadcn/ui thay vì hệ thống tuỳ chỉnh.
• Không code thành phần thành React, Vue hoặc Angular, phạm vi chỉ gồm Figma và spec Storybook. Cần code thành phần thì xem dịch vụ tuỳ biến theme WordPress.
• Không xây khi thương hiệu chưa ổn định, cần hướng dẫn thương hiệu ổn định ít nhất 6 tháng. Thương hiệu đang thay đổi thì Web22 từ chối, đề xuất chốt thương hiệu trước.
• Không báo giá khi thiếu mô tả rõ ràng, Web22 yêu cầu buổi tư vấn 1-2 triệu trước khi quote. Báo giá thiếu thông tin dẫn đến vượt phạm vi và thiệt cả hai bên.
• Không cam kết hệ thống thiết kế không cần cập nhật, cần duy trì định kỳ khi có sản phẩm mới. Khách chọn gói Duy trì 1-3 triệu mỗi thành phần hoặc tự duy trì sau bàn giao.