Hãy tưởng tượng bạn đang thiết kế một cái nút bấm (Button). Nút này cần có màu xanh (Primary) và màu xám (Secondary). Mỗi màu lại cần có trạng thái: Bình thường (Default), Khi di chuột (Hover), và Khi bị khóa (Disabled). Chưa hết, nút có thể có icon bên trái, icon bên phải, hoặc không có icon nào cả.
Nếu làm theo cách truyền thống của 2 màu x 3 trạng thái x 3 kiểu icon = 18 Components riêng biệt.
Nếu thư viện của bạn có hàng trăm thành phần như vậy, bảng Assets sẽ trở thành một "bãi rác" khổng lồ, khiến việc tìm kiếm và bảo trì trở thành cơn ác mộng.
Đây chính là lý do Variants (Biến thể) và Component Properties (Thuộc tính) ra đời. Chúng là "vũ khí tối thượng" giúp bạn gom 18 component kia lại thành MỘT Component duy nhất, gọn gàng và thông minh.
Trong bài học này, chúng ta sẽ đi từ việc tạo Variant cơ bản đến việc áp dụng các Properties nâng cao để xây dựng một hệ thống thiết kế (Design System) chuẩn quốc tế.
Variants (Biến thể) cho phép bạn nhóm các Component tương tự nhau vào một khung chứa duy nhất gọi là Component Set.
Thay vì phải tìm kiếm Button Primary, Button Secondary, Button Hover trong danh sách dài dằng dặc, bạn chỉ cần kéo ra một cái Button, sau đó dùng bảng điều khiển bên phải để chọn trạng thái bạn muốn.
Bạn nên dùng Variants cho những sự thay đổi về mặt giao diện (visual), ví dụ:
State (Trạng thái): Default, Hover, Pressed, Disabled.
Size (Kích thước): Small, Medium, Large.
Style (Phong cách): Primary, Secondary, Outline, Ghost.
Platform (Nền tảng): iOS, Android, Desktop.
Tham khảo: Tìm hiểu thêm về các trạng thái chuẩn trong UI tại
Material Design States để biết khi nào cần tạo Variant Hover hay Focused.
II. Hướng dẫn tạo Variants: Quy trình chuẩn
Giả sử bạn có 2 nút bấm: Button/Primary và Button/Secondary.
(Lưu ý: Hãy chắc chắn bạn đã áp dụng Styles màu sắc và chữ viết đã học ở
- Chọn tất cả các Component bạn muốn gộp nhóm.
Nhìn sang thanh Sidebar bên phải (Design Panel).
Click vào nút Combine as Variants.
Ngay lập tức, bạn sẽ thấy một khung viền nét đứt màu tím bao quanh các nút. Đây chính là Component Set.
Khi chọn Component Set, ở thanh bên phải, bạn sẽ thấy mục Current Variant. Hãy đặt tên cho các thuộc tính.
Property 1: Đổi tên thành "Type" hoặc "Style".
Giá trị: Đặt tên cho từng biến thể là "Primary" và "Secondary".
Mẹo đặt tên "Slash Naming" thần thánh
Nếu bạn lười click chuột, hãy đặt tên layer của component theo cú pháp: Property1=Value1, Property2=Value2.
Ví dụ:
Nút 1 tên là:
Type=Primary, State=DefaultNút 2 tên là:
Type=Primary, State=HoverNút 3 tên là:
Type=Secondary, State=Default
Khi bạn chọn cả 3 và nhấn Combine as Variants, Figma sẽ tự động hiểu và tạo ra 2 dòng thuộc tính là "Type" và "State" cho bạn. Cực kỳ nhanh chóng!
III. Component Properties
Trước năm 2022, chúng ta dùng Variants cho mọi thứ. Muốn ẩn hiện cái icon? Tạo Variant. Muốn đổi nội dung chữ? Click đúp 3-4 lần để sửa text.
Nhưng giờ đây, Figma cung cấp Component Properties (gọi tắt là Props). Nó giúp giảm số lượng Variants cần tạo và đưa các tùy chỉnh ra ngay bề mặt thanh điều khiển.
Có 3 loại Properties chính mà bạn bắt buộc phải nhớ:
3.1. Boolean Property (Ẩn/Hiện đối tượng)
Dùng để bật tắt một layer (ví dụ: Icon, Badge, Dot đỏ).
Vấn đề cũ: Để tạo nút có icon và không icon, bạn cần 2 Variants.
Giải pháp mới: Chỉ cần 1 Variant, gán thuộc tính Boolean vào layer Icon.
Cách làm:
Chọn layer Icon trong Component.
Tại mục Layer (bảng bên phải), click vào biểu tượng Create property (hình con thoi có dấu chấm).
Đặt tên:
Show Icon. Giá trị mặc định:True(Hiện) hoặcFalse(Ẩn).Kết quả: Khi dùng Instance, bạn sẽ thấy một cái công tắc (Toggle switch) để bật tắt icon.
3.2. Text Property (Chỉnh sửa nội dung nhanh)
Dùng để sửa văn bản mà không cần click đúp sâu vào trong layer.
Cách làm:
Chọn layer Text trong Component.
Tại mục Content (bảng bên phải), click biểu tượng Create property.
Đặt tên:
LabelhoặcContent.Kết quả: Bạn có thể gõ nội dung nút ngay trên thanh sidebar mà không cần chạm vào thiết kế.
3.3. Instance Swap Property (Đổi Component con)
Dùng để thay đổi icon hoặc component lồng nhau (nested component) ngay lập tức.
Cách làm:
Chọn một Instance (ví dụ: icon ngôi nhà) đang nằm trong Button Master.
Tại bảng bên phải, cạnh tên Instance, click biểu tượng Create property.
Đặt tên:
Icon Type.Kết quả: Bạn sẽ có một menu thả xuống (Dropdown) để đổi từ icon "Home" sang "User", "Settings" chỉ trong 1 giây.
IV. Phân biệt: Khi nào dùng Variants? Khi nào dùng Component Properties?
Đây là câu hỏi khiến nhiều Senior Designer cũng phải bối rối. Hãy dùng quy tắc ngón tay cái sau:
Ví dụ thực tế:
Nút màu Đỏ sang Xanh -> Variant.
Nút có Icon sang Nút không Icon -> Boolean Property.
Đổi chữ "Login" thành "Sign Up" -> Text Property.
Sự kết hợp hoàn hảo là dùng cả hai: Dùng Variants cho các trạng thái giao diện chính, và dùng Properties cho các tùy chỉnh nội dung bên trong.
V. Thực hành: Xây dựng "Super Button"
Hãy cùng thực hành tạo một nút bấm "siêu cấp" áp dụng tất cả kiến thức trên
- Tạo text "Button".
- Thêm icon vào bên trái text.
- Dùng Auto Layout (Shift + A) để bao quanh text và icon. Chỉnh padding, bo góc. (Xem lại Bài 5 nếu quên).
- Chọn layer Text -> Tạo Text Property tên là
Label. - Chọn layer Icon -> Tạo Instance Swap Property tên là
Icon. - Vẫn chọn layer Icon -> Tạo Boolean Property ở phần Layer, tên là
Has Icon.
- Biến Frame trên thành Component (
Ctrl + Alt + K). Thêm Variant mới. Đổi màu nền tối hơn. Đặt tên Variant này là
State=Hover.Variant gốc đặt tên là
State=Default.
Kéo Component vừa tạo ra màn hình (đây là Instance).
Thử gõ text mới vào bảng bên phải.
Thử bật tắt công tắc
Has Icon.Thử đổi
Statesang Hover.
Nếu mọi thứ hoạt động trơn tru, chúc mừng bạn! Bạn vừa tạo ra một Component chuẩn Design System chuyên nghiệp.
Tài nguyên hỗ trợ: Bạn có thể tham khảo
để tải các bộ UI Kit miễn phí về và "mổ xẻ" xem cách họ cấu hình Variants. Figma Community
VI. Các lỗi thường gặp khi làm việc với Variants
Dù mạnh mẽ, Variants cũng rất dễ gây lỗi nếu không cẩn thận.
Nếu bạn đặt tên Variant 1 là Style=Primary, Size=Small nhưng Variant 2 chỉ có Style=Primary (quên Size), Figma sẽ báo lỗi màu đỏ.
Khắc phục: Đảm bảo mọi Variant trong một Set đều phải có đủ số lượng thuộc tính như nhau.
Khi chuyển từ trạng thái Default sang Hover, nếu text bị đổi font hoặc icon bị biến mất, đó là do tên layer bên trong 2 variants không giống nhau.
Khắc phục: Luôn giữ tên layer giống hệt nhau (ví dụ: layer chữ luôn tên là "Label", layer icon luôn tên là "Icon Left").
Tạo Variant cho mọi tình huống nhỏ nhặt (ví dụ: tạo variant riêng cho từng icon khác nhau).
Khắc phục: Hãy tận dụng Instance Swap Property.
VII. Tổng kết
Bài học hôm nay khá nặng về kỹ thuật, nhưng nó là bước ngoặt để bạn trở thành một "Figma Master". Việc sử dụng thành thạo Variants và Component Properties sẽ giúp:
File thiết kế nhẹ hơn (ít layer hơn).
Thao tác thiết kế nhanh hơn gấp 3-4 lần.
Dễ dàng bàn giao cho Dev vì cấu trúc rõ ràng.
Bây giờ bạn đã có một nút bấm hoàn hảo với đầy đủ trạng thái Hover, Click. Nhưng... làm sao để khi bấm nút Play (Preview), cái nút đó thực sự chuyển động? Làm sao để click vào nút thì chuyển sang trang khác?
Câu trả lời nằm ở khả năng Prototyping (Tạo nguyên mẫu tương tác). Chúng ta sẽ cùng thổi hồn cho các thiết kế tĩnh này trong bài học tiếp theo:
