Giới thiệu của figma https://www.youtube.com/watch?

v=y29Xwt9dET0
Variants (Biến thể) là một module quản lý components (thành phần) thông
minh, hay còn được gọi là Thư viện thành phần Figma.

Với tính năng này, bạn có thể dễ dàng loại bỏ các biến thể trùng lặp của cùng
một component, kết hợp chúng lại để thiết lập thư viện nội dung chung của
nhóm. Bạn cũng có thể định rõ vùng chứa cho tất cả các component tương
tự. Quá trình này giúp các thành viên trong nhóm có thể xác định thứ mình
đang tìm kiếm dễ dàng hơn khi sử dụng Figma.

Vậy tại sao cần tạo variants?

Nhu cầu tạo variants xuất phát từ thực tế khi tạo components và xây dựng hệ
thống thiết kế, cần một số components tương tự nhau, chỉ có chút khác biệt
nhỏ. Khi đó, nếu tạo component cho từng thành phần tương tự nhau, sẽ có
rất nhiều components dẫn đến việc khó quản lý chúng. Bởi vậy, tạo variants
sẽ giúp giải quyết vấn đề này.
Ví dụ: Nút (button) là một đối tượng mà bạn thường hay sử dụng, bạn cần
nhiều components riêng biệt cho các trạng thái, kích thước, màu sắc khác
nhau…
Thay vì tạo components riêng cho tất cả các trạng thái đó, hãy tạo các biến
thể của 1 component. Variants cho phép bạn nhóm và tổ chức các
components tương tự nhau đó vào 1 vùng chứa duy nhất, giúp thư viện
components trở nên đơn giản hơn và mọi người dễ tìm thấy thứ họ cần dùng
hơn.
Lưu ý: Đối với các icon khác nhau, bạn không nên sử dụng variants để nhóm
chúng lại. Trong trường hợp bạn có nhiều kích thước cho 1 icon, bạn có thể
kết hợp chúng dưới dạng variants.

Các thuộc tính biến thể và giá trị của thuộc tính
Giúp xác định được variant đó tượng trưng cho điều gì. Thuộc tính biến thể
(variant properties) là 1 loại thuộc tính thành phần cụ thể đối với các biến thể
(variants) và tập hợp thành phần (component sets).
Có thể thêm bao nhiêu thuộc tính và giá trị tùy ý, sau đó tùy chỉnh cho phù
hợp với hệ thống thiết kế của mình.
  Thuộc tính biến thể (Variable properties) là các khía cạnh có thể thay
đổi của component. Ví dụ:
o Các thuộc tính (properties) của 1 component như button có thể
là kích thước, trạng thái, màu sắc…
 Giá trị (values) là các tùy chọn khác nhau có sẵn cho từng thuộc tính. Ví
dụ:
o Thuộc tính trạng thái có thể có giá trị mặc định (default), di chuột
vào (hover), nhấn (pressed) và tắt (disabled)

Tất cả các variants trong component set nên sử dụng các thuộc tính và giá trị
giống nhau, nhưng mỗi biến thể cần phải là sự kết hợp duy nhất của chúng.
Không cần phải tạo từng component riêng cho mọi trường hợp kết hợp các
thuộc tính và giá trị.

Đặt lại tên cho các thành phần

Figma sử dụng hệ thống đặt tên theo dấu gạch chéo để tổ chức các thành
phần trong Assets panel và Instance menu. Mỗi dấu / trong tên của 1
component sẽ tạo ra một mức phân cấp khác.
Bạn cũng có thể sử dụng hệ thống đặt tên này để chuyển đổi các
components hiện có thành các variants. Để được chuyển đổi chính xác, tên
component cần tuân theo cấu trúc sau:
componentName / property1value / property2value / property3value

 Phần text trước dấu / đầu tiên sẽ trở thành tên của component set.
 Figma sẽ tạo một thuộc tính mới cho mọi dấu / khác trong tên của
component, sau đó thêm thuộc tính đó dưới dạng giá trị.
 Nếu bạn đã sử dụng các hậu tố trong hệ thống đặt tên của mình, bạn
sẽ cần thêm các hậu tố này vào tên của component, được phân tách
bằng dấu /.

Lưu ý: Để đảm bảo các giá trị của bạn khớp với cùng một thuộc tính, mọi
component bạn đang kết hợp cần có cùng số dấu gạch chéo.
Ví dụ: Component là button với tên như sau
Button/Primary/Large/Default/False sẽ có các thuộc tính và giá trị sau:
  Tên bộ thành phần (component set name): Button
 Biến thể (variant): Primary
 Thuộc tính 2: Large
 Thuộc tính 3: Default
 Thuộc tính 4: False

Trong ảnh dưới, chúng ta có thể thấy cách mà phần còn lại của tên thành
phần (ở bên trái) được chuyển đổi thành giá trị biến thể (ở bên phải).

Cách tổ chức các thành phần trên bản vẽ

Lưu ý:

 Component sets chỉ có thể chứa các components, vì vậy không thể
thêm văn bản hoặc chú thích, lồng khung hoặc nhóm một tập hợp con
các variants vào trong component set.
 Khi kết hợp các components dưới dạng variants, Figma sẽ áp dụng bố
cục và khoảng cách hiện tại cho các variants bên trong component set.
 Vì vậy nên tổ chức các thành phần của mình trước khi chuyển đổi
chúng.

Nếu có nhiều variants cho 1 component cụ thể, chúng ta có thể tổ chức các
thành phần của mình theo hàng, cột hoặc lưới.
Điều này sẽ giúp truyền đạt bản chất đa chiều của chúng cho bất kỳ ai đang
sử dụng hệ thống thiết kế của bạn. Bạn cũng có thể thêm các lớp văn bản
bên cạnh component set của mình để chú thích các thuộc tính và giá trị có
liên quan.
Trong ví dụ dưới, các button variants đã được sắp xếp trong một lưới. Các lớp
văn bản cũng đã được thêm vào bản vẽ, tương ứng với các giá trị của thuộc
tính.

Kết hợp dưới dạng các biến thể

 Bước 1: Chọn các components mà bạn muốn kết hợp

 Bước 2: Trong thanh bên bên phải, nhấn nút Combine as Variants
 Bước 3: Figma sẽ thêm tất cả các components vào 1 component set.

Đặt tên mô tả thuộc tính

Figma sẽ tạo các thuộc tính chung và thêm bất kỳ thuộc tính nào mà bạn đã
tạo vào tên của component dưới dạng giá trị.
Do Figma không biết tên của các thuộc tính, nên sẽ đặt tên cho thuộc tính
đầu tiên là Variant, sau đó đánh số thứ tự chúng: Property 2, Property 3, v.v.
Bạn nên đổi tên các thuộc tính đó thành các mô tả dễ hiểu hơn.

 Bước 1: Chọn component set.

 Bước 2: Xem các thuộc tính hiện tại trong phần Variants ở thanh bên
bên phải.
 Bước 3: Di chuột qua thuộc tính để box màu xám xuất hiện xung
quanh.
 Bước 4: Nhấp để chỉnh sửa thuộc tính và đặt cho nó một cái tên mô tả
hơn.
  Bước 5: Bấm ra bên ngoài để áp dụng.
 Bước 6: Lặp lại cho các thuộc tính còn lại.

Tạo biến thể mới

Bạn có thể tạo variant mới bằng cách chọn 1 component, sau đó thực hiện 1
trong các thao tác:

 Nhấn button dấu cộng trên thanh toolbar

 Chuột phải vào component → Main component → Add variant
 Nhấn dấu cộng trong mục Properties tại thanh bên bên phải →
chọn Variant. Thao tác này sẽ tạo 1 thuộc tính biến thể mới và biến
main component thành 1 component set. Sau đó, bạn nhấn dấu cộng
màu tím phía dưới component set để thêm 1 variant mới.

Lúc này Figma sẽ thực hiện:

 Tạo 1 component giống hệt, với những thuộc tính như vậy
 Thêm cả 2 components dưới dạng variants vào 1 component set
 Nếu bạn đã sử dụng quy ước đặt tên dấu gạch chéo, phần text trước
dấu / sẽ trở thành tên của component set và các thuộc tính sau sẽ
được sử dụng làm values.

1. Thêm thuộc tính và giá trị

Có thể tạo và áp dụng các thuộc tính và giá trị cho variant khi mới tạo lần đầu
hoặc khi hệ thống thiết kế của bạn mở rộng hơn.
2. Thêm variant vào component set
Bạn có thể thêm các variants vào component set bằng 1 trong các cách sau:

 Chọn 1 component set và nhấn button dấu cộng trên thanh toolbar
 Chọn 1 component set và nhấn vào ngay dưới component set đó. Tùy
chọn này chỉ hiển thị khi có ít nhất 2 variants
 Sao chép variant bằng phím tắt:
 o Mac: Command + D
o Windows: Ctrl + D
 Kéo các components khác vào component set để thêm chúng dưới
dạng variants.

Quản lý các biến thể

1. Sắp xếp các biến thể
Khi bạn thêm các variants mới vào 1 component, Figma sẽ mặc định thêm
các variants vào một cột duy nhất, với khoảng cách bằng nhau giữa chúng.
Nếu bạn có các components trong 1 layout khác trước khi chuyển đổi chúng,
Figma sẽ giữ nguyên bố cục cho component set.
Bạn có thể bỏ qua mặc định của Figma và sắp xếp các variants theo cách của
mình.

 Chọn 1 variant và di chuyển sang vị trí mới trong component set. Figma
cho phép bạn đặt các variants ở bất kỳ đâu trong component set.
 Điều chỉnh kích thước của component ở thanh bên bên phải hoặc thay
đổi kích thước của nó trong bản vẽ giống như bạn làm với frame thông
thường.
 Với tất cả các variants được chọn: Sử dụng các trường trong thanh bên
bên phải để điều chỉnh khoảng cách ngang và dọc giữa các variants.

Lưu ý: Figma sẽ sử dụng variant ở góc trên cùng bên trái làm variant mặc
định. Variant này sẽ đại diện cho toàn bộ component set được đặt trong
Asset panel.
2. Quản lý các thuộc tính và giá trị
Bạn có thể đặt lại tên và sắp xếp lại các thuộc tính và giá trị bất kỳ lúc nào sau
khi tạo.

 Nếu bạn sắp xếp lại các thuộc tính, Figma sẽ điều chỉnh tên và cú pháp
của các variants cho phù hợp.
 Nếu đã chuyển đổi các components hiện có thành các variants, bạn sẽ
cần đổi tên các thuộc tính của mình để mô tả rõ hơn.

Sử dụng các biến thể

Các component sets hiển thị trong Assets panel cùng với các components
thông thường. Do đó, thay vì tìm variant cụ thể trong Assets panel, bạn chỉ
cần chọn component set.
Khi bạn đã có 1 bản sao (instance) của component set đó trên bản vẽ, bạn có
thể định hình các giá trị thuộc tính của bản sao để chọn 1 variant.
1. Chọn component set

 Nhấp vào tab Assets trong thanh bên bên trái hoặc sử dụng phím tắt:
o Máy Mac: ⌥ Option + 2
o Cửa sổ: Alt + 2
 Nhấn vào 1 component set và kéo nó vào bản vẽ. Figma sẽ tạo 1
instance của variant mặc định của component set đó.
 Xem tên và thuộc tính của component set trong thanh bên bên phải.
 Sử dụng mũi tên bên cạnh thuộc tính để chọn sự kết hợp các giá trị mà
bạn muốn.
 Bật và tắt các thuộc tính cụ thể bằng cách sử dụng các công tắc chuyển
đổi.

2. Cấu hình cho variant

Chọn các variants khác trong 1 component set bằng cách định cấu hình các
thuộc tính và giá trị trong thanh bên bên phải.

 Chọn instance
 Xem tên của component trong thanh bên bên phải. Nếu component có
variants, bạn sẽ thấy các trường bên dưới tên component để định cấu
hình các thuộc tính và giá trị của component set đó.
o Sử dụng mũi tên bên cạnh thuộc tính để chọn sự kết hợp các giá
trị mà bạn muốn.
o Bật và tắt các thuộc tính cụ thể bằng cách sử dụng các công tắc
chuyển đổi.

3. Duy trì các bản ghi đè

Figma sẽ cố gắng giữ nguyên các thông tin ghi đè của bạn khi bạn chọn sang
1 variant khác, hoặc hoán đổi giữa các instances trong Instance menu.
Figma sẽ dựa vào các tiêu chí sau để quyết định có giữ nguyên thông tin ghi
đè hay không:

 Tên của các layers cần khớp giữa instance hiện tại và variant/ instance
mà bạn đang chọn. Điều này áp dụng cả khi hoán đổi các instances và
chọn variant.
 Khi chọn các variants, Figma cũng sẽ kiểm tra xem các thuộc tính của
layer bạn đã ghi đè ban đầu có khớp với nhau giữa các variants hay
không. Nếu có, Figma sẽ giữ nguyên bản ghi đè của bạn.

Các bước và cách tao, sử dụng biến thể

https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-
variants#Variant_properties_and_values