Figma Variables cho phép thiết kế hệ thống tự động hóa, thay thế quy trình thủ công cũ bằng biến số liên kết động. Các đội ngũ hiện đại áp dụng Figma Variables để đồng bộ màu sắc, khoảng cách, và typography trên toàn bộ dự án mà không cần sửa từng component một. Hướng dẫn này phân tích cốt lõi, workflow thực tế, và mẹo nâng cao để triển khai design tokens tại quy mô lớn.
Figma Variables là gì và tại sao quan trọng
Variables trong Figma là container chứa giá trị thiết kế (màu, số, boolean, string) có thể gán vào bất kỳ thuộc tính nào của layer. Khác với Styles chỉ lưu giá trị tĩnh, Variables cho phép alias referencing — biến này tham chiếu đến biến kia — tạo thành chuỗi tham chiếu có thể cập nhật lan truyền từ gốc.
Lợi ích cốt lõi:
- Single source of truth: thay đổi một biến gốc (primitive) → toàn bộ hệ thống cập nhật tự động.
- Multi-brand/multi-theme: chế độ sáng/tối, brand A/B cùng dùng một file, chuyển đổi qua collections.
- Handoff chính xác: dev đọc giá trị variable qua DevMode, không đoán mò hex code.
- Responsive spacing: biến số (number) điều khiển padding/margin theo breakpoint.
Kiến trúc 3 tầng: Primitive, Semantic, Component
Thiết kế hệ thống biến số tuân theo mô hình phân tầng chuẩn của design tokens:
| Tầng | Vai trò | Ví dụ | Quy tắc đặt tên |
|---|---|---|---|
| Primitive | Giá trị gốc, không ngữ nghĩa | color/blue/500 = #3B82F6 |
category/scale/value |
| Semantic | Gán ý nghĩa cho primitive | color/primary/default = {color/blue/500} |
category/role/state |
| Component | Gán cho component cụ thể | button/primary/background = {color/primary/default} |
component/variant/property |
Quy tắc vàng: Primitive không bao giờ dùng trực tiếp trên UI. Mọi layer chỉ reference Semantic hoặc Component token. Điều này cho phép đổi brand toàn hệ thống chỉ bằng cách remap tầng Semantic.
Tạo Collections và Modes cho đa theme
Collections nhóm variables theo domain (Color, Spacing, Typography, Border). Mỗi collection chứa nhiều Modes — ví dụ Color collection có modes: Light, Dark, High Contrast. Figma tự động chuyển giá trị khi đổi mode trên frame.
Workflow tạo collection Color:
- Mở Variables panel (phím V) → Create variable → Collection “Color”.
- Tạo Primitive:
color/blue/50..900,color/gray/50..900, v.v. - Tạo Semantic:
color/primary/defaultalias →color/blue/600,color/surface/defaultalias →color/gray/50. - Thêm mode “Dark” → override Semantic:
color/surface/default=color/gray/900. - Gán mode cho frame: chọn frame → Variables panel → đổi Mode Light ↔ Dark.
Mẹo: dùng number variables cho spacing scale (spacing/1=4px, spacing/2=8px…) và gán vào Auto Layout gap/padding. Khi đổi mode compact/comfortable, chỉ cần override number variable.
Alias Chain và Scope: kiểm soát nơi variable xuất hiện
Scope xác định variable có thể gán vào đâu: Fill, Stroke, Text, Font size, Gap, Padding, Radius, Effect, v.v. Scope hẹp tránh nhầm lẫn (ví dụ spacing variable chỉ dùng cho gap/padding, không cho fill).
Alias chain sâu quá 3 tầng gây khó debug. Khuyến nghị: Primitive → Semantic → Component (tối đa 3 hop). Nếu cần variant state (hover, disabled), tạo Semantic riêng: color/primary/hover alias → color/blue/700 thay vì nested alias.
Workflow thực tế với đội dev
Handoff hiệu quả nhất khi design tokens đồng bộ qua DevMode hoặc plugin như Tokens Studio (export JSON cho codebase). Quy trình:
- Designer publish library chứa Variables collection.
- Dev cài plugin Figma Tokens hoặc dùng REST API
GET /v1/files/{file_key}/variables/local. - Transform JSON → format phù hợp (Style Dictionary, Theo, hoặc custom).
- Commit token file vào repo, CI build thành CSS variables / Swift / Kotlin / Dart constants.
- Khi designer update variable → CI detect diff → PR tự động cập nhật token code.
Ví dụ output CSS custom properties từ tokens:
:root {
--color-primary-default: #2563eb;
--color-surface-default: #ffffff;
--spacing-4: 16px;
--radius-md: 8px;
}
[data-theme="dark"] {
--color-surface-default: #111827;
--color-primary-default: #3b82f6;
}Mẹo nâng cao và cạm bẫy thường gặp
- Boolean variables cho visibility: tạo
icon/visible = true, gán vào layer visibility. Toggle mode ẩn/hiện toàn bộ icon set. - String variables cho font family:
font/family/sans = "Inter, system-ui", đổi font toàn site bằng 1 variable. - Cạm bẫy: circular alias — Figma chặn nhưng logic phức tạp vẫn gây loop ngầm. Audit định kỳ bằng plugin “Variables Auditor”.
- Cạm bẫy: mode mismatch — component dùng variable từ collection A mode Light, nhưng frame đặt mode Dark của collection B. Kết quả: giá trị fallback không như mong đợi. Luôn test cross-collection.
- Performance: file >5000 variables chậm DevMode. Tách collection theo domain, archive variable cũ thay vì xóa (giữ history).
Tích hợp với Design System phổ biến
Các design system lớn (Material 3, Spectrum, Polaris) đều xuất bản token packages. Cách import vào Figma Variables:
- Download token JSON từ npm (ví dụ
@material/design-tokens). - Dùng plugin Variables Importer hoặc script Node gọi Figma REST API
POST /v1/files/{file_key}/variables. - Map token upstream vào Primitive collection, sau đó build Semantic/Component layer của team.
- Khi upstream update, re-import Primitive → Semantic tự động kế thừa.
Lưu ý: Figma Variables hiện không hỗ trợ reference across files (cross-file variables). Workaround: publish library file chứa Variables, các file khác consume qua library. Khi library update, subscriber nhận notification “Library updates available”.
Kiểm tra và duy trì hệ thống Variables
Checklist hàng tháng cho design system lead:
- Chạy audit: số lượng variable per collection, alias depth, unused variables.
- So sánh token Figma vs token codebase (diff JSON).
- Test mode switch trên 5+ component phức tạp (table, form, navigation).
- Review naming convention violation: dùng regex
^[a-z]+(/[a-z]+){2,}$. - Document quyết định breaking change trong changelog (ví dụ rename
color/primary→color/brand).
Kết luận: Figma Variables chuyển dịch thiết kế từ “vẽ pixel” sang “quản trị dữ liệu thiết kế”. Đội ngũ áp dụng chặt chẽ kiến trúc 3 tầng, alias discipline, và CI/CD token sync sẽ giảm 80% effort handoff và đảm bảo consistency trên mọi platform.
