Design system trong Figma: tạo màu, chữ, component từ đầu cho người mới

Design system trong Figma theo Figma Learn (đọc ngày 29/10/2026): token primitive và semantic, biến màu với mode Light/Dark, text style cho thang chữ, biến khoảng cách, component Button có variants và component properties, quy tắc đặt tên, publish library, bảo trì và lỗi hay gặp.

Trả lời nhanh: Design system trong Figma là bộ "nguồn sự thật" chung của một sản phẩm: màu, chữ, khoảng cách và component được tạo một lần, đặt tên rõ, rồi publish thành library để cả nhóm dùng lại. Trong Figma, bạn dựng nó bằng 4 tính năng: variables (biến màu, biến số), styles (nhất là text style), components có variants và component properties, cuối cùng là library. Bảng dưới là thứ tự mình làm khi dựng một design system nhỏ từ đầu.

Tên tính năng và các bước trong bài lấy từ trung tâm trợ giúp Figma Learn (help.figma.com) và bài "Design systems 101" trên blog Figma, ColorME đọc ngày 29/10/2026; tên menu giữ tiếng Anh như Figma viết. Các hình là sơ đồ ColorME dựng bằng HTML, không phải ảnh chụp giao diện; "Chợ Gánh" (app đặt rau Đà Lạt) là thương hiệu giả định. Chưa quen Figma thì đọc trước bài Figma là gì và lộ trình học Figma cơ bản.

Design system là gì?

Bài Design systems 101 của Figma định nghĩa: "a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent". Nghĩa là một bộ "viên gạch" và quy chuẩn giúp sản phẩm trông và vận hành nhất quán. Bài viết cũng gọi nó là "a single source of truth" cho cả designer và dev.

Hai khái niệm hay bị nhầm, theo cùng bài:

• Style guide là một phần của design system, tập trung vào hình ảnh: màu, chữ, hình minh hoạ, giọng văn.
• Component library tập trung vào phần tử UI như nút, ô nhập liệu; còn pattern library lo các giải pháp lớn hơn như luồng điều hướng.

Figma cũng viết design system "is never truly done", nên bài này dựng một hệ thống nhỏ đủ cho một app, rồi mới nói chuyện bảo trì.

Bước 1: Lên cấu trúc token trước khi tạo biến

Design token là giá trị có tên (màu, khoảng cách, font) mà designer và dev cùng dùng. Trong bài Tokens, variables, and styles, Figma gợi ý một cấu trúc phổ biến gồm ba tầng:

• Primitive token (cái gì): mọi giá trị gốc, ví dụ từng màu trong bảng màu. Figma ghi primitive "are for reference only": chỉ để tham chiếu, không gán thẳng vào thiết kế.
• Semantic token (dùng thế nào): tên nói lên công dụng, ví dụ surface/brand trỏ tới jade/500. Đây là lớp bạn gán vào layer.
• Component token (dùng ở đâu): gắn với một component, ví dụ button-primary-background-default. Figma ghi tầng này thường dùng ở hệ thống lớn, không phải ai cũng cần.

Liên kết giữa các tầng gọi là alias: một biến tham chiếu biến khác cùng loại. Đổi primitive thì mọi semantic trỏ tới nó đổi theo. Người mới nên dừng ở hai tầng primitive và semantic.

Ba tầng token: primitive (cái gì), semantic (dùng thế nào), component (dùng ở đâu), nối với nhau bằng alias. Ảnh: ColorME thiết kế, mã màu là ví dụ.

Bước 2: Tạo biến màu và mode Light/Dark

Theo Overview of variables, collections, and modes, Figma có sáu loại biến: Color, Number, String, Boolean, Timing và Easing. Collection là một nhóm biến và mode; mode là một bộ giá trị, ví dụ một màu xanh ở mode này và màu trắng ở mode kia.

Cách làm, theo trang Create and manage variables and collections:

1. Bấm Variables trên thanh điều hướng bên trái để mở variables view.
2. Bấm + Create variable, chọn loại Color, gõ tên ở cột đầu và giá trị ở cột hai. Tạo collection Primitives chứa các màu gốc: jade/500, neutral/0, clay/500.
3. Tạo collection thứ hai (sidebar của variables view: More options > Create collection), đặt tên Tokens.
4. Trong Tokens, tạo biến surface/brand, chuột phải vào ô giá trị, chọn Create alias và trỏ tới jade/500.
5. Bấm New variable mode bên phải tiêu đề cột: Figma chép giá trị cột đầu sang cột mới. Đặt tên hai mode là Light và Dark, rồi đổi alias ở cột Dark (ví dụ surface/brand trỏ tới jade/300).
6. Ẩn primitive khỏi thư viện: chọn hết biến trong Primitives, chuột phải Edit variables, bỏ chọn Show in all supported properties và chọn hide from publishing.

Cột ngoài cùng bên trái là mode mặc định; đổi mode của một frame ở sidebar phải là cả màn hình chuyển sang Dark.

Lưu ý về gói (đọc 29/10/2026): trang Modes for variables ghi "Anyone on Education, Professional, Organization, and Enterprise plans can create and use modes for variables", và số mode mỗi collection "depends on your plan". Tạo biến thì trang Create and manage variables ghi "Anyone on any plan".

Hai collection: Primitives (ẩn khi publish) và Tokens có mode Light, Dark; thẻ sản phẩm bên dưới dùng cùng biến ở hai mode. Ảnh: ColorME thiết kế.

Bước 3: Text styles cho thang chữ

Figma ghi text style dùng để "define typographic scale". Theo Create and apply text styles, một text style giữ font family, weight, size, line height, letter spacing, paragraph spacing; nó không giữ màu chữ, căn lề và cách co giãn. Vì vậy màu chữ nên gán bằng biến text/primary, text/secondary ở bước 2.

1. Gõ chữ mẫu, chỉnh font, cỡ, line height.
2. Ở sidebar phải, bấm Apply styles or variables cạnh mục Typography, chọn New style or variable.
3. Đặt tên theo nhóm có dấu gạch chéo: title/xl, title/lg, body/md, label/md. Bấm Create style.
4. Lặp lại cho cả thang chữ. Ví dụ Chợ Gánh dùng 7 style, đủ cho một app nhỏ.

Chọn font có đủ dấu tiếng Việt và thử bằng chữ thật như "Rau sạch từ Đà Lạt". Về sau, bạn có thể gán number variable vào cỡ chữ trong text style để chữ đổi cỡ theo mode mobile hay desktop.

Thang chữ 7 text style đặt tên theo nhóm title, body, label, thử bằng chữ tiếng Việt. Ảnh: ColorME thiết kế, cỡ chữ là ví dụ.

Bước 4: Biến khoảng cách và bo góc

Number variable gán được cho corner radius, width/height, padding, gap, stroke weight và nhiều thuộc tính khác. Mình tạo collection Spacing với space/4, space/8, space/16, space/24... và nhóm radius/sm, radius/md, radius/lg. Ví dụ trong khoá học của Figma dùng hệ lưới 8 điểm, linh hoạt thêm 4 và 6 cho mobile.

Bước quan trọng là scope: mở Edit variable, tab Scope, chỉ tick Corner radius cho biến radius, Gap và Padding cho biến space. Khi đó biến chỉ hiện ở đúng thuộc tính, danh sách gợi ý gọn hơn. Biến space phát huy rõ nhất khi đi cùng auto layout; xem bài Auto Layout trong Figma: làm nút, card, danh sách co giãn. Lưới trang thì dùng layout guide style, có trong bài layout grid Figma: lưới 12 cột web, 4 cột mobile.

Lưu ý của Figma: kéo chỉnh padding hay gap trực tiếp trên canvas sẽ tách biến số đã gán.

Biến số cho khoảng cách (bước 4 và 8) và bo góc, scope vào Gap, Padding, Corner radius. Ảnh: ColorME thiết kế.

Bước 5: Component Button với variants và component properties

Tạo nút gốc bằng auto layout, gán biến màu, biến space, text style label/md. Sau đó, theo Create components to reuse in designs:

1. Chọn layer, bấm Create component ở sidebar phải (hoặc chuột phải, hoặc phím tắt Option Command K trên Mac, Ctrl Alt K trên Windows).
2. Bấm Create variant ở sidebar phải để thêm biến thể, đổi tên property thành Type, Size, State.
3. Đặt giá trị: Type = Primary, Secondary; Size = Large, Small; State = Default, Hover, Pressed, Disabled. Trang Create and use variants ghi tên một variant theo cú pháp Property1=value, Property2=value, và mỗi variant phải là một tổ hợp duy nhất.
4. Biến thể ở góc trên bên trái của component set là biến thể mặc định (Lesson 3 của Figma).

Không phải khác biệt nào cũng cần thành variant. Trang Explore component properties liệt kê các loại property: Boolean (ẩn hiện layer), Instance swap (đổi instance lồng bên trong), Text (đổi chữ), Variant và Slot. Với nút có hoặc không có icon, Figma gợi ý dùng Boolean thay vì nhân đôi số variant. Cách tạo: chọn component set, bấm dấu cộng ở mục Properties, chọn Boolean, đặt tên, bấm Create property, rồi gán cho layer icon. Nhãn nút dùng Text property, icon dùng Instance swap.

Kết quả: 2 Type × 2 Size × 4 State = 16 variant, cộng 3 property cho icon và chữ. Figma nhắc rằng chèn một instance là nạp cả component set, nên set quá lớn sẽ làm file chậm. Icon cho nút nên là component riêng, cách quản lý có trong bài icon trong Figma: vẽ, quản lý bằng component và xuất SVG.

Component Button: 2 Type × 2 Size × 4 State = 16 variant, cộng Boolean, Text, Instance swap. Ảnh: ColorME dựng bằng HTML, không phải giao diện Figma.

Bước 6: Quy tắc đặt tên

Các mẹo đặt tên trong bài Tokens, variables, and styles của Figma:

• Tên dễ hiểu, viết đủ từ thay vì viết tắt.
• Tiền tố nhất quán: biến nền luôn bắt đầu bằng cùng một từ (trong ví dụ là surface).
• Nếu có nhiều sản phẩm hoặc thương hiệu, đừng đưa tên thương hiệu vào token.

Trong Lesson 3, nhóm Habitz chọn camelCase vì đội dev đã dùng nó, và Figma kết luận: tên giống nhau giữa thiết kế và code quan trọng hơn kiểu viết. Mỗi dấu / trong tên tạo thêm một cấp thư mục.

Nên và tránh khi đặt tên biến, style, component, variant. Ảnh: ColorME thiết kế.

Bước 7: Publish thành library

Style, component, biến mới tạo chỉ dùng được trong file đó. Muốn file khác dùng, bạn phải publish. Các bước theo trang Publish a library:

1. File cần có ít nhất một component, style hoặc variable. File đang ở Drafts thì chuyển vào một folder trước.
2. Đặt tên file rõ ràng: library lấy tên theo file nguồn (Figma lấy ví dụ "Habitz design system").
3. Ở sidebar trái, mở tab Assets, bấm biểu tượng Libraries.
4. Ở mục This file, bấm Publish, viết mô tả, bỏ chọn tài sản chưa muốn chia sẻ, bấm Publish.

Ở file sản phẩm, khi có bản mới, biểu tượng Libraries hiện chấm xanh. Bấm Review library updates, xem so sánh Side by side hoặc Overlay, rồi Update từng mục hoặc Update all (trang Review and accept library updates).

Về gói (đọc 29/10/2026): trang Publish a library ghi tính năng dành cho "Professional, Education, Organization, Government, and Enterprise plans", và "You can still create components and styles on the free Starter plan, but you can't publish them in a library to access them in other files".

Publish library từ file nguồn, file khác nhận cập nhật qua Review library updates. Ảnh: ColorME thiết kế theo các bước của Figma Learn.

Giữ design system sống: bảo trì sau khi publish

Lesson 4 trong khoá Introduction to design systems của Figma dành riêng cho việc tài liệu hoá và quản lý. Ba việc đáng làm ngay cả với nhóm nhỏ:

• Viết mô tả cho biến, style, component, và ghi mô tả mỗi lần publish (Figma hiện mô tả này khi người khác nhận cập nhật và trong version history).
• Changelog theo Major.Minor.Patch: Major khi thay đổi làm vỡ thiết kế cũ (xoá component, đổi lớn về hình ảnh), Minor khi bổ sung không làm vỡ gì, Patch khi sửa lỗi nhỏ như padding sai, tên lệch với code.
• Theo dõi component bị detach: theo Figma, đó thường là dấu hiệu thiếu tài liệu hoặc component dựng chưa đúng (Figma kể ví dụ constraints sai).

Lỗi hay gặp khi dựng design system trong Figma

• Instance bị detach: theo trang Detach an instance from the component, instance bị detach thành frame thường, mất liên kết với component gốc và không nhận thay đổi nữa.
• Quá nhiều style, biến trùng nhau: audit lại, gộp về một bộ primitive.
• Tên lộn xộn: chốt một quy tắc tên với dev, đổi tên hàng loạt một lần.
• Gán thẳng primitive: đổi sang Dark mà màu không đổi. Chỉ gán semantic token.
• Sửa mà quên publish: thay đổi ở file nguồn chỉ có tác dụng trong file đó cho tới khi publish.

5 lỗi làm design system rối và cách sửa. Ảnh: ColorME thiết kế.

Checklist design system nhỏ trong Figma

Trước khi publish bản đầu tiên, mình rà 8 mục trong bảng dưới: màu, chữ, khoảng cách, component, tên, mô tả, library và kế hoạch bảo trì. Thiếu mục nào thì quay lại bước tương ứng ở trên.

Checklist 8 mục trước khi publish bản đầu tiên. Ảnh: ColorME thiết kế.

Dựng xong một design system nhỏ như trên là bạn đã chạm vào phần lớn công việc hằng ngày của một UI designer trong nhóm sản phẩm. Nếu bạn muốn học UI/UX có lộ trình và người hướng dẫn, có thể xem khoá học UI/UX của ColorME.

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

Design system trong Figma gồm những gì?

Biến màu và biến số (variables), text style cho thang chữ, component có variants và properties, publish thành library, kèm tài liệu và quy tắc đặt tên.

Nên dùng variables hay styles cho màu?

Theo Figma, variables hỗ trợ alias, nhiều mode (Light/Dark), scope và code syntax; styles hợp với giá trị gộp như nhiều lớp fill hoặc nhiều lớp shadow. Figma ghi nhiều nhóm dùng kết hợp cả hai; trong bài này mình dùng variables cho màu, khoảng cách và styles cho chữ.

Primitive token và semantic token khác nhau thế nào?

Primitive là giá trị gốc (jade/500), chỉ để tham chiếu. Semantic có tên theo công dụng (surface/brand), trỏ tới primitive, được gán vào thiết kế và đổi theo mode.

Gói miễn phí của Figma có publish library được không?

Trang Publish a library (đọc 29/10/2026) ghi bạn vẫn tạo được component và style trên "free Starter plan" nhưng không publish thành library để dùng ở file khác. Tính năng publish dành cho gói Professional, Education, Organization, Government và Enterprise.

Detach instance có sao không?

Instance bị detach thành frame thường và không nhận thay đổi từ component gốc nữa. Nếu một component bị detach nhiều lần, đó là dấu hiệu component cần sửa hoặc thiếu tài liệu.