Variants là gì?

Thay vì tạo nhiều component rời như Button Primary Large Hover, variants gom chúng vào một component set với các thuộc tính như Type, Size, State. Để tạo, chọn một main component và bấm Add variant trong bảng thuộc tính, hoặc chọn nhiều component rồi dùng Combine as variants. Tên mỗi variant theo dạng Thuộc tính=Giá trị, ví dụ State=Hover, Size=Large. Khi dùng, người thiết kế chỉ cần đổi giá trị trên instance. Kết hợp với các component property khác như Boolean (bật tắt icon), Text (sửa nhãn), Instance swap (đổi icon), số variant cần tạo giảm đi rất nhiều. Variants còn là nền cho interactive components, cho phép tạo hiệu ứng hover ngay trong component. Ví dụ: một nút có 3 kiểu × 3 kích thước × 4 trạng thái là 36 variant trong một bộ. Lỗi thường gặp là tạo variant cho mọi khác biệt nhỏ như từng nhãn chữ, làm bộ component phình to và khó bảo trì.