Xây design system trong Figma từng bước (hướng dẫn thực hành)

Bài này không bàn lý thuyết “design system là gì” — phần đó nằm ở bài tổng quan. Ở đây bạn sẽ thấy đúng từng nút bấm trong Figma để dựng một hệ thống dùng chung, từ lớp token nền móng tới lúc publish thành library cho cả nhóm kéo về dùng. Thứ tự dưới đây cũng là thứ tự Web22 áp dụng khi dựng giao diện thật.

Trước khi mở Figma cần chuẩn bị gì

Một design system trong Figma nên nằm ở một file riêng, tách khỏi file thiết kế màn hình. File này về sau sẽ được publish thành library; nếu bạn trộn chung với màn hình thật, mỗi lần publish sẽ kéo theo cả đống thứ không liên quan. Trong file, tạo sẵn các page theo thứ tự thi công: Foundations (token màu, chữ, khoảng cách), Components (nút, ô nhập, card…), và Docs (ghi chú cách dùng).

Nguyên tắc xuyên suốt: dựng từ đơn vị nhỏ nhất lên to dần. Token trước, rồi mới tới component — vì component sẽ tham chiếu token, làm ngược lại sẽ phải sửa tay rất nhiều.

Bước 1 — Dựng token bằng Variables (biến)

Mở panel Variables (biểu tượng ở thanh phải khi không chọn gì). Đây là xương sống của hệ thống hiện đại: theo tài liệu Figma 2026, các UI kit còn dùng color style tĩnh thay vì Variables đã bị coi là lỗi thời, vì chỉ Variables mới hỗ trợ aliasing (một biến trỏ vào biến khác) và modes (chế độ — như Light/Dark) ngay trong Figma.

Cách Web22 và nhiều nhóm dựng theo Figma khuyến nghị là chia ba tầng collection:

• Primitive (giá trị thô): blue/500 = #3B82F6, space/4 = 16. Đặt tên theo giá trị, không theo công dụng.
• Semantic (ngữ nghĩa): color/primary trỏ vào blue/500; text/body trỏ vào gray/900. Đây là lớp bạn thực sự dùng khi thiết kế.
• Component (tuỳ chọn, cho hệ lớn): token riêng cho từng bộ phận, ví dụ button/bg trỏ vào color/primary.

Lợi ích của việc trỏ tầng: muốn đổi màu thương hiệu, bạn chỉ sửa một dòng ở lớp primitive, toàn hệ thống cập nhật theo. Token màu/khoảng cách/bo góc nên để ở Variables; riêng typography và gradient hiện Variables chưa gánh trọn — phần này dùng Styles ở bước sau. Chi tiết về việc đặt tên token gọn gàng có ở bài design token là đơn vị nhỏ nhất của hệ thống.

Mẹo với Modes

Trong một collection, bấm thêm mode (ví dụ Light và Dark) rồi gán giá trị khác nhau cho cùng một token semantic. Khi thiết kế màn hình, chỉ cần đổi mode trên frame là toàn bộ màu nhảy theo — không phải vẽ lại hai bản. Đây cũng là nền tảng để làm chế độ tối đúng cách.

Bước 2 — Tạo Styles cho chữ và hiệu ứng

Vào panel Local styles. Tạo Text styles cho từng cấp chữ (Heading 1, Heading 2, Body, Caption…) và Effect styles cho đổ bóng. Vì Variables chưa thay thế hoàn toàn được kiểu chữ tổng hợp (font, cỡ, dãn dòng, độ đậm gộp lại), Styles vẫn là chỗ chuẩn để lưu typography. Một hệ thống tốt là lai: Variables làm nền cho màu và khoảng cách, Styles lo chữ và gradient. Cách chọn cấp chữ và tỉ lệ có ở bài typography cho web.

Bước 3 — Dựng Components và variants

Vẽ một bộ phận (ví dụ nút bấm), bôi đen rồi bấm Create component. Để gom các trạng thái vào một chỗ, chọn nhiều component liên quan rồi bấm Combine as variants — Figma gộp thành một bộ và cho bạn khai báo property như State = Default / Hover / Disabled hay Size = S / M / L.

Vài thói quen giúp bộ component khỏi phình to:

• Đặt tên property rõ nghĩa (Type, State, Icon) — người dùng sẽ thấy đúng các dropdown này khi kéo instance ra.
• Dùng boolean property để bật/tắt phần tử (ví dụ “có icon hay không”) thay vì đẻ thêm variant.
• Figma 2026 có Component Slots: thay vì dựng 15 biến thể card cho từng kiểu nội dung, bạn dựng một card với vùng slot để người dùng nhét nội dung tuỳ ý mà không cần detach.

Bước 4 — Auto Layout để component co giãn đúng

Đây là bước khiến design system “sống” được với nội dung thật. Chọn frame của component rồi bấm Shift + A để bật Auto Layout. Khi đó nút sẽ tự nới rộng theo độ dài chữ, list tự đẩy item, padding giữ đều. Hãy gán padding và gap bằng Variables khoảng cách (ví dụ space/4) thay vì gõ số cứng — như vậy mọi component dùng chung một nhịp khoảng cách, đổi một chỗ là đổi cả hệ.

Bước 5 — Publish library và dùng chung

Khi bộ token, style và component đã gọn, vào menu Assets → biểu tượng library → Publish. Figma đóng gói file thành thư viện dùng chung; các file khác bật library này lên là kéo được component, áp được token. Khi bạn sửa và publish lại, các file đang dùng sẽ nhận thông báo cập nhật.

Hai lưu ý quan trọng:

• Ẩn primitive khỏi publish: lớp giá trị thô (blue/500) không nên cho người thiết kế chọn trực tiếp — đặt nó ở chế độ ẩn để mọi người chỉ dùng token semantic.
• Code Connect / Dev Mode: chuẩn 2026 là nối component Figma với code thật, để khi lập trình viên xem một nút trong Dev Mode họ thấy đúng đoạn React tương ứng. Đây chính là chỗ Web22 thấy giá trị rõ nhất — vì làm cả khâu thiết kế lẫn lập trình, bản trong Figma và component trong theme khớp nhau, tránh “tam sao thất bản” khi handoff (bàn giao thiết kế cho dev).

Sai lầm hay gặp khi mới dựng

Câu hỏi thường gặp

Nên dùng Variables hay Styles?

Dùng cả hai. Variables cho màu, khoảng cách, theming (Light/Dark); Styles cho typography và gradient — những thứ Variables hiện chưa gánh trọn.

Có cần tầng component token không?

Với hệ nhỏ, hai tầng primitive và semantic là đủ. Tầng component token chỉ đáng thêm khi hệ lớn, nhiều người dùng và cần kiểm soát từng bộ phận riêng.

Dựng xong là xong chưa?

Chưa. Library cần được cập nhật và quản lý phiên bản theo thời gian, nếu không nó sẽ lệch dần với sản phẩm thật.

Nếu bạn cần một hệ thống thiết kế khớp với code ngay từ đầu, dịch vụ xây design system của Web22 dựng cả phần Figma lẫn component lập trình để bản thiết kế ra đúng như sản phẩm.