Bài 12 — Figma Variables & Modes

Mở đầu — vì sao bài này quan trọng

Hãy tưởng tượng bạn vừa hoàn thiện một bộ giao diện 40 màn hình cho ứng dụng ngân hàng số. Sếp duyệt xong, gật gù, rồi nói: "Đẹp đấy, nhưng chúng ta cần thêm chế độ Dark Mode, và tuần sau khách hàng muốn xem thử bản tiếng Anh nữa." Nếu bạn còn đang dùng cách làm cũ — copy từng màn hình, đổi từng màu một, sửa từng chữ một — thì bạn vừa nhận một bản án lao động khổ sai kéo dài cả tuần, kèm theo nguy cơ sót màu, sai sắc độ ở vài chục chỗ.

Đây chính là lý do Figma Variables & Modes ra đời và trở thành một trong những tính năng quan trọng nhất mà Figma giới thiệu từ năm 2023–2024. Trước đây, designer chỉ có Styles (color styles, text styles) — tốt nhưng cứng nhắc: một style chỉ giữ được một giá trị duy nhất. Variables thay đổi cuộc chơi: một biến có thể mang nhiều giá trị khác nhau tùy theo Mode, và bạn chuyển toàn bộ thiết kế từ Light sang Dark, từ thương hiệu A sang thương hiệu B, từ desktop sang mobile chỉ bằng một cú click.

Trong lộ trình của khóa học này, bài trước (Bài 11) bạn đã làm chủ workflow nâng cao của Figma. Bài 12 này tập trung sâu vào một công cụ cụ thể: Variables và Modes. Còn việc thiết kế kiến trúc token nhiều tầng (primitive, semantic, component) sẽ là chủ đề của Bài 16, và theming đa thương hiệu ở góc độ hệ thống là Bài 17. Ở đây, chúng ta học cách vận hành công cụ một cách thành thạo — nền tảng kỹ thuật để bạn làm tốt những bài sau.

Khái niệm cốt lõi

Variable là gì?

Variable (biến) trong Figma là một giá trị được đặt tên, lưu trữ một lần và tái sử dụng ở khắp nơi trong thiết kế. Thay vì gõ trực tiếp mã màu #0066FF vào nút bấm, bạn gán biến color/primary cho nút đó. Khi cần đổi màu thương hiệu, bạn chỉ sửa giá trị của biến một lần, và mọi nút bấm dùng biến đó cập nhật tức thì.

Điểm khác biệt cốt lõi so với Styles: Style là "ảnh chụp" một giá trị tĩnh, còn Variable là một "ô chứa" thông minh có thể đổi nội dung tùy ngữ cảnh. Variable cũng có thể tham chiếu lẫn nhau (alias) — biến này trỏ vào biến kia — điều mà Styles không làm được.

Bốn loại Variable

Figma hiện hỗ trợ bốn kiểu dữ liệu cho biến, và bạn cần hiểu rõ từng loại dùng vào việc gì:

• Color (màu): lưu mã màu — nền, chữ, viền, icon. Đây là loại được dùng nhiều nhất, đặc biệt khi làm Light/Dark mode.
• Number (số): lưu giá trị số — khoảng cách (spacing), kích thước (sizing), độ bo góc (corner radius), độ mờ (opacity). Ví dụ spacing/md = 16. Number rất mạnh khi bạn muốn co giãn toàn bộ hệ giãn cách giữa mobile và desktop.
• String (chuỗi): lưu văn bản — nhãn nút, ngôn ngữ (đa ngữ), hay tên một biến thể. Đây là chìa khóa để làm bản tiếng Việt và tiếng Anh trong cùng một file.
• Boolean (đúng/sai): lưu giá trị true/false — dùng để bật/tắt hiển thị một lớp, ví dụ ẩn/hiện huy hiệu "Mới" trên thẻ sản phẩm.

Mode là gì — và tại sao đây mới là phần "ma thuật"

Mode (chế độ) là tính năng khiến Variables trở nên thực sự uy lực. Mỗi nhóm biến (gọi là một Collection) có thể chứa nhiều Mode. Mỗi biến trong collection đó sẽ có một giá trị riêng ứng với mỗi Mode.

Hãy hình dung một bảng tính: cột đầu là tên biến, mỗi cột tiếp theo là một Mode.

Khi bạn chọn một frame và gán Mode "Dark" cho nó, mọi biến bên trong tự động lấy giá trị ở cột Dark. Bạn không sửa gì cả — chỉ chuyển công tắc. Một collection có thể có nhiều loại Mode khác nhau: Light/Dark cho theme, Mobile/Desktop cho kích thước, VN/EN cho ngôn ngữ, Brand A/Brand B cho đa thương hiệu.

Scoping và alias — hai khái niệm nâng cao đáng nhớ

Alias là khi một biến trỏ tới một biến khác. Ví dụ bạn có biến nền tảng blue/500 = #0066FF, rồi tạo biến ngữ nghĩa color/primary trỏ (alias) vào blue/500. Lợi ích: khi đổi blue/500, cả color/primary và mọi nơi dùng nó đều đổi theo. Đây là nền móng của kiến trúc token mà Bài 16 sẽ đào sâu.

Scoping cho phép giới hạn nơi một biến được phép áp dụng. Ví dụ bạn quy định biến spacing/md chỉ hiện ra khi gán cho padding/gap, không hiện khi ai đó muốn gán nó vào... màu chữ. Điều này giúp đồng đội không gán nhầm biến, giữ hệ thống sạch sẽ.

Tình huống thực tế

Ví dụ 1 — Tiki và bài toán Dark Mode trong 2 giờ

Giả định một nhóm 3 designer tại một sàn thương mại điện tử lớn như Tiki được giao thêm Dark Mode cho app mua sắm gồm khoảng 60 màn hình. Trước khi có Variables, ước tính của họ là 2 tuần làm việc cộng thêm 1 tuần QA để dò sót màu.

Cách họ làm với Variables & Modes: tạo một collection tên theme với hai Mode là Light và Dark. Họ liệt kê khoảng 24 biến ngữ nghĩa cốt lõi — bg/primary, bg/secondary, text/primary, text/muted, border/default, surface/card... Mỗi biến điền hai giá trị cho hai Mode. Sau đó họ rà soát các component dùng chung (nút, thẻ sản phẩm, thanh điều hướng) và thay toàn bộ màu cứng bằng biến tương ứng.

Kết quả: vì 90% giao diện được dựng từ component dùng chung, một khi component đã "ăn" biến, chỉ cần đặt Mode "Dark" cho frame tổng là toàn bộ 60 màn hình đổi sang nền tối. Công việc thực tế rút từ 2 tuần xuống còn khoảng 2 buổi: phần lớn thời gian là tinh chỉnh vài chục sắc độ cho dễ chịu mắt, chứ không phải đổi thủ công từng chỗ.

Bài học rút ra: Variables chỉ phát huy sức mạnh khi thiết kế của bạn đã được component hóa tốt và dùng biến ngữ nghĩa thay vì màu cứng. Nếu màn hình toàn màu gõ tay, Mode không cứu được bạn.

Ví dụ 2 — Startup fintech Đông Nam Á và bản demo song ngữ

Một startup ví điện tử hoạt động ở cả Việt Nam và Indonesia chuẩn bị gọi vốn. Họ cần demo cho nhà đầu tư bản tiếng Việt và bản tiếng Anh, đôi khi chuyển qua chuyển lại ngay trong cuộc họp.

Designer dựng một collection language với hai Mode: VN và EN. Họ tạo các biến String cho mọi nhãn quan trọng: label/btn_pay (Thanh toán / Pay), label/balance (Số dư / Balance), title/home (Trang chủ / Home). Mỗi text layer được gán biến String tương ứng thay vì gõ chữ trực tiếp.

Trong buổi pitch, khi nhà đầu tư nước ngoài hỏi, designer chọn frame và bật Mode "EN" — toàn bộ giao diện chuyển sang tiếng Anh trong một giây, không cần file riêng. Một lợi ích phụ bất ngờ: vì tiếng Anh thường ngắn hơn tiếng Việt, họ sớm phát hiện vài nút bị tràn chữ ở bản VN và sửa layout kịp thời.

Bài học rút ra: String variables biến file Figma thành công cụ trình diễn đa ngữ linh hoạt, đồng thời giúp bạn kiểm thử độ co giãn văn bản — thứ rất hay bị bỏ sót khi thiết kế cho thị trường đa quốc gia.

Ví dụ 3 — Agency thiết kế và hệ giãn cách co giãn theo thiết bị

Một agency ở TP.HCM nhận làm landing page cho một chuỗi cà phê, cần phiên bản mobile và desktop với cùng bố cục nhưng khoảng cách thoáng/chật khác nhau. Thay vì dựng hai bộ frame, họ dùng Number variables.

Họ tạo collection density với hai Mode: Compact (mobile) và Comfortable (desktop). Các biến số như space/section = 48 / 96, space/card-gap = 12 / 24, radius/card = 8 / 16 được gán vào padding, gap và bo góc của các component. Khi đổi Mode, toàn bộ trang "thở" rộng ra hay co lại đồng bộ, giữ đúng tỉ lệ thiết kế mà không cần đụng tay vào từng phần tử.

Bài học rút ra: Number variables kết hợp với Auto Layout cho phép bạn xây một thiết kế "đàn hồi", điều chỉnh mật độ giao diện chỉ bằng việc đổi Mode — tiết kiệm công sức bảo trì khổng lồ khi dự án có nhiều breakpoint.

Hướng dẫn từng bước

Hãy cùng dựng một collection theme Light/Dark cơ bản — bài tập nền tảng nhất.

• Mở Variables panel. Bỏ chọn mọi đối tượng, ở panel bên phải (tab Design) tìm mục "Variables" (hoặc Local variables) và nhấn vào biểu tượng để mở bảng quản lý biến.

• Tạo Collection. Đặt tên collection rõ ràng theo mục đích, ví dụ theme. Một collection là một nhóm biến cùng chia sẻ tập Mode. Đừng nhồi mọi thứ vào một collection — tách theme, spacing, language riêng để dễ quản lý.

• Thêm Mode thứ hai. Mặc định collection có một Mode (thường tên "Mode 1"). Đổi tên nó thành "Light", rồi nhấn dấu cộng ở phần header cột để thêm Mode "Dark".

• Tạo các biến Color. Nhấn "Create variable" → chọn Color. Đặt tên có cấu trúc thư mục bằng dấu gạch chéo: bg/primary, text/primary, border/default. Figma sẽ tự nhóm chúng thành các thư mục gọn gàng.

• Điền giá trị cho từng Mode. Với mỗi biến, điền màu ở cột Light và màu ở cột Dark. Ví dụ bg/primary là trắng ở Light, gần đen ở Dark.

• Gán biến vào thiết kế. Chọn một frame hay component, ở thuộc tính Fill nhấn vào biểu tượng biến (hình bốn chấm) và chọn bg/primary. Lặp lại cho chữ, viền, nền thẻ.

• Chuyển Mode để kiểm tra. Chọn frame tổng, ở panel Design tìm dropdown chọn Mode của collection theme, đổi sang "Dark". Toàn bộ giao diện phải đổi màu đồng loạt. Nếu có chỗ không đổi, đó là chỗ bạn còn dùng màu cứng — quay lại gán biến.

• (Nâng cao) Dùng alias. Tạo thêm một collection primitives chứa màu nền tảng như gray/900, blue/500. Rồi cho text/primary trong collection theme trỏ alias vào gray/900. Đây là cách bắc cầu sang kiến trúc token nhiều tầng bạn sẽ học ở Bài 16.

Lỗi thường gặp & mẹo

Lỗi 1 — Nhồi quá nhiều Mode vào một collection. Nhiều bạn cho cả Light, Dark, VN, EN, Mobile, Desktop vào chung một collection. Hậu quả là một biến màu lại buộc phải có cả giá trị cho Mode "VN" vô nghĩa. Mẹo: mỗi collection chỉ phục vụ một "trục" thay đổi — theme một collection, ngôn ngữ một collection, mật độ một collection.

Lỗi 2 — Đặt tên biến theo giá trị thay vì theo vai trò. Đặt color/blue rồi đến lúc đổi thương hiệu sang cam thì cái tên hóa ra sai bét. Mẹo: đặt tên theo chức năng — color/primary, bg/danger — để biến giữ đúng ý nghĩa dù giá trị có đổi.

Lỗi 3 — Quên gán biến vào component dùng chung. Bạn gán biến cho vài màn hình lẻ nhưng bỏ quên thư viện component gốc, thế là đa số giao diện vẫn dùng màu cứng. Mẹo: ưu tiên gán biến từ trong component master trước, rồi mọi instance sẽ thừa hưởng.

Lỗi 4 — Lạm dụng Boolean để dựng layout phức tạp. Boolean tiện cho ẩn/hiện đơn giản, nhưng đừng cố dùng nó thay cho component variants. Mẹo: việc nào của Variants thì để Variants làm, Boolean chỉ nên gánh các trạng thái bật/tắt đơn giản.

Mẹo vàng: Bắt đầu nhỏ. Đừng cố dựng hệ thống biến 200 dòng ngay từ đầu. Hãy bắt đầu với 15–25 biến ngữ nghĩa cốt lõi, dùng thật quen rồi mới mở rộng. Một hệ thống biến quá to mà không ai hiểu còn tệ hơn không có gì.

Mẹo về scoping: Sau khi quen, hãy đặt scope cho biến (nhấn vào biến → Edit → chọn nơi áp dụng). Ví dụ giới hạn biến radius/* chỉ cho corner radius. Việc này giúp đồng đội không gán nhầm và làm danh sách biến gợi ý ngắn gọn, dễ chọn hơn.

Bài tập thực hành

• Dựng theme Light/Dark cơ bản: Tạo collection theme với hai Mode, định nghĩa ít nhất 12 biến màu ngữ nghĩa (bg/primary, bg/secondary, text/primary, text/muted, border/default, surface/card, color/primary...). Thiết kế một màn hình hồ sơ người dùng đơn giản (avatar, tên, vài nút) rồi gán toàn bộ màu bằng biến. Kiểm chứng bằng cách đổi Mode sang Dark — mục tiêu là 100% đổi đúng, không sót chỗ nào.

• Thử nghiệm song ngữ: Tạo collection language với Mode VN và EN. Tạo 6 biến String cho các nhãn trên màn hình ở bài 1. Gán vào text layer và đổi Mode để kiểm tra. Ghi chú lại bất kỳ nút nào bị tràn chữ.

• (Thử thách) Number variables co giãn: Tạo collection density với Mode Compact và Comfortable, định nghĩa 4 biến số (spacing và radius). Dùng Auto Layout, gán biến vào padding/gap, rồi đổi Mode để xem giao diện co giãn. Viết một đoạn ngắn 3–4 câu nhận xét trải nghiệm so với cách chỉnh tay.

Tóm tắt

Figma Variables là các giá trị được đặt tên, tái sử dụng khắp thiết kế, gồm bốn loại: Color, Number, String và Boolean. Sức mạnh thật sự đến từ Modes — cho phép một biến mang nhiều giá trị tùy ngữ cảnh, giúp bạn chuyển toàn bộ thiết kế giữa Light/Dark, VN/EN, hay Mobile/Desktop chỉ bằng một cú click.

Những điều cốt lõi cần nhớ: tổ chức biến thành các Collection riêng theo từng trục thay đổi; đặt tên theo vai trò chứ không theo giá trị; gán biến từ trong component dùng chung để hưởng hiệu ứng lan tỏa; và dùng alias để bắc cầu sang kiến trúc token nhiều tầng. Bắt đầu nhỏ với 15–25 biến, dùng quen rồi mở rộng dần.

Khi đã thành thạo công cụ này, bạn sẵn sàng cho Bài 13 về thiết kế component tái sử dụng, và xa hơn là Bài 16 về kiến trúc token và Bài 17 về theming đa thương hiệu — nơi Variables & Modes trở thành xương sống của cả một design system chuyên nghiệp.