Web22 nhận xây hệ thống thiết kế Figma độc lập từ 3 đến 60 triệu. Bốn hạng mục: Mini UI kit, Standard, Doanh nghiệp lớn, Duy trì — không kèm build website.
Bài này dành cho doanh nghiệp có từ 2 sản phẩm số trở lên và cần ngôn ngữ thiết kế đồng nhất. Nếu chỉ cần 1 website, xem dịch vụ thiết kế website thay vì hệ thống thiết kế.
Hệ thống thiết kế là gì và khi nào doanh nghiệp cầ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.
Web22 xây 5-10 thành phần cơ bản: nút bấm với 3-5 biến thể, ô nhập liệu, thẻ, hộp thoại và danh sách 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)
Mức phù hợp nhất cho doanh nghiệp vừa có từ 2 đến 5 sản phẩm số. 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.
Cần tư vấn hạng mục phù hợp với quy mô dự án?
Gửi yêu cầu để Web22 kiểm tra số sản phẩm, quy mô team và đề xuất hạng mục Mini, Standard hay Doanh nghiệp lớn phù hợp nhất.
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
Hệ thống thiết kế cần cập nhật định kỳ khi có sản phẩm mới hoặc thương hiệu thay đổi. Không phải “xây xong là xong”.
- 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 không code thành phần thành React/Vue/Angular — phạm vi hệ thống thiết kế chỉ gồm Figma và spec Storybook. 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.
Dịch vụ liên quan
- Dịch vụ UI/UX — tổng quan 8 hạng mục: bốn hạng mục hệ thống thiết kế và bốn hạng mục UI/UX ứng dụng di động.
- Thiết kế UI/UX ứng dụng di động — nếu cần thiết kế giao diện ứng dụng native (Figma và bản chạy thử, không code ứng dụng).
- Thiết kế website — nếu chỉ cần một website cụ thể, đặt kèm hệ thống thiết kế có ưu đãi gộp gói.
- Tuỳ biến theme WordPress — nếu cần code hệ thống thiết kế thành theme WordPress hoặc thành phần React.
Dự án Web22 đã thực hiện
Web22 thiết kế giao diện và trải nghiệm cho các website sau:
- Mộc Wedding — thiệp cưới trực tuyến sang trọng — web studio cưới — bộ sưu tập ảnh, bảng giá gói chụp, form đặt lịch tư vấn.
- Hoa Tươi Duy Duy — web cửa hàng hoa tươi TP.HCM — shop hoa tươi — đặt hoa theo dịp, giao nhanh nội thành, giỏ hàng và thanh toán.
Xem đầy đủ tại trang dự án Web22 đã thực hiện. Tham khảo thêm nghiên cứu trải nghiệm của Nielsen Norman Group.