Component và variant khác nhau thế nào?

Component là một khối dùng lại được, sửa bản gốc thì mọi instance đổi theo. Variant là các phiên bản của cùng một component, gom trong một component set và chọn qua thuộc tính như Size hay State.

Khi nào nên tách thành component riêng thay vì thêm variant?

Khi hai khối có cấu trúc layer khác nhau hoặc phục vụ việc khác nhau. Nút chính và nút viền cùng cấu trúc, nên là variant. Hộp xác nhận xoá và màn hình lỗi 404 làm hai việc khác nhau, nên là hai component. Figma cũng khuyên không gom các icon khác nhau thành variant.

Vì sao bị báo xung đột khi tạo variant?

Hai variant trong cùng component set đang có cùng một tổ hợp thuộc tính, ví dụ cả hai đều là Size=md, State=Default. Mỗi variant phải là một tổ hợp riêng. Đổi giá trị của một trong hai để hết xung đột.

Có nên detach instance để sửa nhanh không?

Hạn chế tối đa. Instance đã detach không nhận cập nhật từ component gốc nữa. Nếu bạn cần detach thường xuyên, component đó đang thiếu một property, một variant hoặc một slot.

Component và Variant trong Figma: làm đúng từ đầu

Component là khối giao diện dùng lại được trong Figma: sửa bản gốc thì mọi instance đổi theo. Variant gom nhiều phiên bản của cùng một component, như các cỡ và trạng thái của nút, vào một component set. Làm đúng từ đầu nghĩa là chọn đúng giữa variant, component property và component riêng, rồi đặt tên khớp với props trong code.

Tôi là Hai Le, UI/UX designer. Thư viện tôi dựng cho Joyme có hơn 50 component, và tôi cũng tự viết component bằng React cho site này. Bài Học Figma từ số 0 đã chỉ cách tạo component đầu tiên ở ngày 4. Bài này dành cho lúc bạn bắt đầu có nhiều component, và thư viện bắt đầu khó quản.

Tên tính năng và phím tắt trong bài được kiểm trên help.figma.com ngày 04/10/2026.

Component, instance và variant khác nhau thế nào?

Khái niệm	Là gì	Ví dụ
Main component	Bản gốc, nơi bạn sửa thiết kế	Nút trong trang "Components"
Instance	Bản sao liên kết với bản gốc	Nút đặt trên màn hình đăng ký
Component set	Nhóm các variant của một component	Bộ "Button"
Variant	Một phiên bản trong component set	Button, Size=md, State=Hover
Override	Thay đổi bạn làm trên một instance	Đổi chữ "Gửi" thành "Lưu"

Tạo component bằng Option + Command + K trên Mac hoặc Ctrl + Alt + K trên Windows. Instance nhận mọi thay đổi từ bản gốc, trừ những chỗ bạn đã override.

Tạo variant như thế nào?

Có hai đường:

Từ một component. Chọn main component, bấm Add variant ở cột phải hoặc trong menu chuột phải. Figma tạo component set và thêm một variant mới bên cạnh.
Từ nhiều component có sẵn. Chọn các component rồi bấm Combine as variants ở cột phải.

Nếu component cũ đặt tên theo dấu gạch chéo, Figma đọc tên đó thành thuộc tính. Tên Button/md/Default cho ra component set Button, phần sau mỗi dấu gạch chéo thành giá trị của một thuộc tính. Mọi component trong nhóm phải có cùng số dấu gạch chéo.

Quy tắc quan trọng nhất: mọi variant dùng chung bộ thuộc tính, nhưng mỗi variant phải là một tổ hợp giá trị riêng. Hai variant trùng tổ hợp thì Figma báo xung đột và bạn phải sửa.

Khi nào dùng variant, khi nào dùng component property?

Figma có năm loại component property. Variant chỉ là một trong số đó.

Property	Điều khiển	Ví dụ
Variant	Các phiên bản khác nhau về giao diện	Size, State, Type
Boolean	Ẩn hoặc hiện một layer	Có icon hay không
Text	Nội dung chữ sửa được	Nhãn nút
Instance swap	Instance lồng bên trong đổi được	Icon nào đứng trước nhãn
Slot	Một vùng thả nội dung tuỳ ý	Thân của một thẻ hoặc modal

Lý do nên dùng property thay cho variant là phép nhân. Nút có Size 3 giá trị, State 4 giá trị, Type 3 giá trị thì cần 36 variant. Thêm "có icon / không icon" dưới dạng variant thì thành 72. Làm bằng boolean thì vẫn là 36, và icon nào hiện thì để instance swap lo.

Quy tắc ngắn của tôi:

Khác màu, cỡ, viền, trạng thái: variant.
Khác có hay không một layer: boolean.
Khác chữ: text property.
Khác instance nào nằm trong: instance swap, kèm danh sách preferred instances để người dùng chỉ chọn trong bộ đã duyệt.
Khác cả một vùng nội dung: slot. Tạo bằng Convert to slot trong menu chuột phải, ở cột phải, hoặc Command + Shift + S trên Mac, Ctrl + Shift + S trên Windows.

Khi nào dùng variant, khi nào tách component?

Câu hỏi tôi dùng: hai khối có cùng cấu trúc layer không? Cùng cấu trúc, chỉ khác giá trị, thì là variant. Khác cấu trúc thì tách.

Ở Joyme, thư viện có hộp xác nhận trước khi xoá trang, trạng thái trống, lỗi 404, mất kết nối và tải quá lâu. Mascot của Joyme có mặt trong các trạng thái này, nên nhìn qua chúng giống một họ. Nhưng một hộp xác nhận xoá và một màn hình lỗi 404 làm hai việc khác nhau. Gom chúng vào một component set chỉ vì cùng có mascot sẽ tạo ra những variant mang đầy layer ẩn chỉ để khớp cấu trúc với nhau. Bạn có thể xem các trạng thái đó trong case study Joyme.

Figma cũng nói rõ một trường hợp: không nên dùng variant để gom các icon khác nhau. Các cỡ của cùng một icon thì gom được.

Nested instance và swap dùng thế nào?

Một nút thường chứa một instance icon bên trong. Đó là nested instance. Mặc định, người dùng instance nút phải chọn sâu vào trong mới đổi được icon.

Hai cách làm gọn:

Bật Expose properties from nested instances trong mục Properties của main component. Property của icon hiện ngay cạnh property của nút ở cột phải.
Tạo instance swap property cho icon, đặt sẵn các icon được phép chọn.

Để đổi một instance sang component khác, bấm vào tên component ở cột phải để mở Instance menu, hoặc chuột phải chọn Swap instance. Bạn cũng có thể giữ Option (Mac) hoặc Alt (Windows) khi kéo component từ tab Assets thả lên instance.

Figma cố giữ override khi bạn đổi variant hoặc swap. Muốn chữ đã sửa không bị mất, hãy đặt tên riêng cho các layer chữ, đừng để mọi layer chữ cùng tên "Text".

Vì sao thư viện component của tôi bị rối?

Triệu chứng	Nguyên nhân	Cách sửa
Component set có hàng trăm variant	Mọi khác biệt đều làm thành variant	Chuyển phần ẩn/hiện sang boolean, phần icon sang instance swap
Báo xung đột trong component set	Hai variant trùng tổ hợp thuộc tính	Đổi giá trị cho một variant
Đổi variant thì mất chữ đã sửa	Layer chữ trùng tên giữa các variant	Đặt tên layer chữ nhất quán và riêng biệt
Màn hình đầy instance đã detach	Component thiếu property hoặc slot	Thêm property còn thiếu, rồi thay lại instance
Dev không tìm ra component tương ứng	Tên property khác tên props trong code	Thống nhất tên với dev từ đầu
Thiếu trạng thái khi bàn giao	Chỉ thiết kế trạng thái mặc định	Liệt kê trạng thái trống, lỗi, đang tải, vô hiệu trước khi vẽ

Dòng cuối là bài học tôi rút ra ở Joyme. Với thời hạn ba tháng, những trạng thái như mất kết nối hay tải quá lâu là thứ dễ bị bỏ qua nhất. Thư viện vẫn có đủ các trạng thái đó, nên dev không phải tự đoán chúng trông ra sao.

Variant thành props trong code như thế nào?

Mỗi loại property có một dạng prop tương ứng trong React:

Figma	Props trong code
Variant `Size` = sm, md, lg	`size: "sm" \| "md" \| "lg"`
Variant `State` = Hover, Focus	Thường là trạng thái CSS, không phải prop
Boolean `Has icon`	`icon` có hoặc không, hoặc một prop boolean
Text `Label`	`children` hoặc `label: string`
Instance swap `Icon`	`icon: ReactNode`
Slot	`children`

Lưu ý dòng thứ hai. Hover và Focus là variant trong Figma vì bạn cần nhìn thấy chúng, nhưng trong code trình duyệt tự xử lý bằng :hover và :focus-visible. Đừng đòi dev thêm prop state.

Nút của chính site này dùng thư viện class-variance-authority với hai trục variant và size:

const buttonVariants = cva("…", {
  variants: {
    variant: { default: "…", outline: "…", ghost: "…" },
    size: { sm: "…", default: "…", lg: "…" },
  },
});

Hai trục đó tương ứng với hai variant property trong Figma. Khi tên trong Figma khớp tên trong code, công cụ như Claude Code đọc file qua Figma MCP sẽ ánh xạ đúng mà không phải đoán. Bài Figma MCP và Claude Code chỉ cách thiết lập. Tên giá trị màu và khoảng cách bên trong mỗi variant nên lấy từ token, như trong bài Design token là gì. Còn quy tắc khi nào dùng biến thể nào thì nên viết ra một file như DESIGN.md để cả người lẫn AI cùng đọc.

Bắt đầu từ đâu nếu thư viện đã rối?

Đừng làm lại cả thư viện. Chọn component được dùng nhiều nhất, thường là nút hoặc ô nhập, rồi đi theo thứ tự: liệt kê props trong code, đặt lại tên property cho khớp, chuyển phần ẩn/hiện sang boolean, thêm trạng thái còn thiếu. Làm xong một component rồi mới sang cái tiếp theo.

Nếu bạn chưa vững phần bố cục bên trong component, đọc trước bài Auto layout trong Figma. Còn nếu bạn đang tìm một designer dựng thư viện component mà dev dùng được, phần giới thiệu về tôi có kinh nghiệm và cách liên hệ.

Nguồn

Kiểm ngày 04/10/2026.

Create and use variants, Figma Help Center
Explore component properties, Figma Help Center
Use slots to build flexible components, Figma Help Center
Swap components and instances, Figma Help Center
Create and insert component instances, Figma Help Center