Bài 34 — Figma Components & Variants

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

Hãy tưởng tượng bạn đang thiết kế giao diện cho một sàn thương mại điện tử như Tiki. Trang chủ có hàng chục cái nút "Mua ngay", "Thêm vào giỏ", "Đăng nhập"… Rồi một ngày, brand team quyết định đổi màu thương hiệu từ xanh dương sang xanh ngọc. Nếu bạn vẽ mỗi cái nút bằng tay, bạn sẽ phải đi sửa từng cái một — và chắc chắn sẽ sót vài cái, dẫn đến giao diện không nhất quán.

Đây chính là vấn đề mà Components (thành phần tái sử dụng) và Variants (biến thể) trong Figma sinh ra để giải quyết. Component cho phép bạn thiết kế một phần tử một lần duy nhất, rồi tái sử dụng nó ở khắp nơi. Khi bạn sửa bản gốc, mọi bản sao tự động cập nhật theo. Variants giúp bạn gom các trạng thái khác nhau của cùng một thành phần (nút bình thường, nút hover, nút disabled…) vào chung một "gia đình" gọn gàng.

Trong bài trước (Bài 33), bạn đã học Auto Layout — nền tảng để component co giãn linh hoạt. Bài này chúng ta sẽ đi sâu vào trái tim của tư duy thiết kế hệ thống: làm sao biến những phần tử rời rạc thành một bộ component có tổ chức, dễ bảo trì, và có thể bàn giao cho cả một team mà không loạn. Đây là kỹ năng phân biệt một người "biết dùng Figma" với một người "thiết kế chuyên nghiệp trên Figma".

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

Component là gì?

Component là một phần tử UI mà bạn định nghĩa một lần để dùng lại nhiều lần. Nó có hai khái niệm con quan trọng:

Main Component (Component gốc / Master): bản thiết kế gốc, là "nguồn chân lý". Trong Figma, main component được đánh dấu bằng icon hình bốn viên kim cương màu tím.
Instance (Bản sao / Phiên bản): là bản sao của main component được đặt vào thiết kế. Instance được đánh dấu bằng icon kim cương rỗng.

Mối quan hệ giữa chúng là một chiều theo kiểu cha–con: khi bạn sửa main component, mọi instance sẽ tự động cập nhật theo. Nhưng khi bạn sửa một instance riêng lẻ (gọi là override — ghi đè), thay đổi đó chỉ áp dụng cho instance đó, không ảnh hưởng ngược lên main.

Hãy hình dung main component như một con dấu khắc, còn instance là dấu đóng trên giấy. Bạn khắc lại con dấu thì mọi dấu đóng sau đó đổi theo. Nhưng nếu bạn lấy bút viết thêm chữ lên một tờ giấy đã đóng dấu (override), những tờ khác không bị ảnh hưởng.

Override — sức mạnh và sự tinh tế

Override là điểm khiến component thực sự mạnh. Trên một instance, bạn có thể thay đổi: text, màu sắc, hình ảnh, hiển thị/ẩn các lớp con… mà vẫn giữ kết nối với main. Điều này có nghĩa: một main component "Card sản phẩm" có thể đẻ ra hàng trăm instance, mỗi cái mang tên sản phẩm và giá khác nhau, nhưng nếu bạn đổi bo góc của card ở main, tất cả đều đổi theo. Bạn được cả hai thứ: tính nhất quán của bố cục và sự linh hoạt của nội dung.

Variants là gì?

Variants là cách Figma gom nhiều component liên quan vào một component set (bộ component) duy nhất. Thay vì có ba main component riêng biệt là Button/Primary, Button/Hover, Button/Disabled, bạn gom chúng thành một set "Button" với các property (thuộc tính) như:

State: Default, Hover, Pressed, Disabled
Size: Small, Medium, Large
Icon: True, False

Khi đặt instance vào thiết kế, người dùng chỉ cần chọn từ dropdown trong panel bên phải để chuyển đổi giữa các biến thể, thay vì phải đi tìm đúng component trong thư viện. Một set với 4 state × 3 size × 2 icon sẽ cho ra 24 tổ hợp — nhưng người dùng instance không hề thấy 24 cái lộn xộn, họ chỉ thấy ba dropdown đơn giản.

Component Properties — lớp trừu tượng cao hơn

Figma còn có Component Properties giúp instance dễ tùy biến hơn nữa mà không cần lục vào cây lớp:

Boolean property: bật/tắt một lớp (ví dụ: hiện/ẩn icon).
Text property: gắn một ô nhập text trực tiếp lên panel.
Instance swap property: cho phép tráo một instance con bằng instance khác (ví dụ: đổi icon trong nút).
Variant property: chính là các dropdown chọn biến thể nói trên.

Đây là tầng giúp component của bạn dùng "sướng tay" cho cả người không phải tác giả — cực kỳ quan trọng khi làm việc nhóm.

Tình huống thực tế

Ví dụ 1 — Startup fintech và nút bị "vỡ trận"

Một startup fintech ở TP.HCM (gọi là MoMoney) có 3 designer cùng làm app. Giai đoạn đầu, ai cần nút thì tự vẽ. Sau 4 tháng, khi audit lại file Figma, họ phát hiện có 17 kiểu nút khác nhau: bo góc 4px, 6px, 8px; padding lệch nhau; ba sắc thái xanh suýt soát nhau mà dev không phân biệt được nên code ra lung tung. Kết quả: app trông "rẻ tiền" và thiếu chuyên nghiệp dù từng nút riêng lẻ đều đẹp.

Giải pháp: họ ngồi lại, thống nhất một main component Button duy nhất, dùng variants cho các state và size. Sau đó dùng tính năng "Replace instance" để thay toàn bộ 17 kiểu nút cũ bằng instance của component chuẩn. Mất hai ngày dọn dẹp, nhưng kể từ đó, mỗi lần brand đổi màu chỉ cần sửa một chỗ.

Bài học: component không chỉ tiết kiệm thời gian, nó bảo vệ sự nhất quán khi nhiều người cùng làm. Vấn đề "17 kiểu nút" không phải do kỹ năng yếu, mà do thiếu một component gốc chung ngay từ đầu.

Ví dụ 2 — Agency và bài toán bàn giao cho khách

Một agency thiết kế ở Hà Nội nhận làm landing page cho một chuỗi cà phê. Khách hàng nội bộ tự sửa nội dung sau khi bàn giao, nhưng họ không rành Figma. Lần đầu bàn giao, mỗi khi khách muốn đổi tiêu đề trên card khuyến mãi, họ phải double-click lục sâu vào nhiều lớp, và thường lỡ tay làm xô lệch bố cục.

Designer bèn refactor lại: biến card thành component, rồi gắn Text property cho tiêu đề và mô tả, gắn Boolean property cho cái badge "HOT". Giờ khách chỉ cần chọn instance, nhìn sang panel bên phải, gõ text vào ô có sẵn và bật/tắt badge bằng một cú click. Không còn cảnh lục lọi cây lớp, không còn vỡ layout.

Bài học: component được thiết kế tốt không chỉ cho bạn dùng, mà cho người sau dùng. Component Properties biến một file phức tạp thành công cụ thân thiện với cả người không chuyên.

Ví dụ 3 — Team product mở rộng tính năng nhanh

Một team product làm app giao đồ ăn (giả định là FoodFast, kiểu ShopeeFood) cần thử nghiệm A/B cho nút "Đặt món": một phiên bản có icon, một phiên bản không. Vì nút đã là một component set với property Icon: True/False, designer chỉ mất 30 giây để tạo hai màn hình test khác nhau — chỉ cần toggle property trên instance, không phải vẽ lại gì.

Một tuần sau, khi cần thêm trạng thái "Loading" (đang xử lý đơn), họ chỉ việc thêm một variant mới vào set. Mọi instance trong file lập tức có thêm lựa chọn State: Loading trong dropdown — không phá vỡ bất cứ thứ gì đang có.

Bài học: variants giúp mở rộng thiết kế mà không phải làm lại từ đầu. Một hệ component có cấu trúc tốt là một khoản đầu tư sinh lời theo thời gian.

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

Tạo một component

Vẽ hoặc chọn phần tử bạn muốn biến thành component (ví dụ một frame nút đã có Auto Layout từ Bài 33).
Nhấn chuột phải → Create Component, hoặc dùng phím tắt Ctrl/Cmd + Alt + K.
Phần tử giờ có viền tím và icon bốn viên kim cương — đó là main component.
Đặt tên có cấu trúc, dùng dấu / để Figma tự gom nhóm trong panel Assets. Ví dụ: Button/Primary, Card/Product.

Tạo instance và sửa override

Mở panel Assets (icon ở thanh trái), kéo component vào canvas — bạn vừa tạo một instance.
Hoặc copy instance đang có (Ctrl/Cmd + C rồi V).
Để sửa text trên instance: double-click vào text và gõ. Đây là override — chỉ ảnh hưởng instance này.
Muốn reset về như main: chuột phải → Reset all changes.

Tạo variants

Chọn main component đầu tiên (ví dụ nút Default).
Trong panel bên phải, tìm mục Variants và nhấn dấu cộng, hoặc chọn nhiều main component liên quan rồi nhấn Combine as variants.
Figma tạo một khung component set bao quanh. Đặt tên property cho rõ ràng: ví dụ đổi property mặc định thành State, và đặt giá trị từng variant là Default, Hover, Pressed, Disabled.
Muốn thêm property thứ hai (ví dụ Size)? Chọn set, thêm property mới và gán giá trị cho từng variant.
Quy ước đặt tên: viết tên giá trị nhất quán (đừng lẫn lộn "Lg" với "Large"), vì instance sẽ hiển thị đúng những chuỗi này trong dropdown.

Gắn Component Properties

Chọn main component (hoặc component set).
Trong panel phải, ở mục Properties, nhấn dấu cộng để thêm: Boolean, Text, hoặc Instance swap.
Với Text property: chọn lớp text trong main, gắn nó vào property vừa tạo. Giờ instance sẽ có ô nhập text ngay trên panel.
Với Boolean: gắn vào lớp cần ẩn/hiện (ví dụ icon hoặc badge).

Xuất bản thành thư viện (library)

Khi bộ component đã ổn, mở menu Assets → Publish library (cần tài khoản có quyền team).
Các file khác trong team có thể bật thư viện này và dùng chung component — đây là nền tảng của Design System mà bạn sẽ học sâu ở Bài 38.

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

Lỗi 1 — Tạo component quá sớm hoặc quá muộn. Đừng biến mọi thứ thành component ngay khi mới phác thảo; bạn sẽ tốn công sửa cấu trúc liên tục. Cũng đừng để đến cuối dự án mới gom — lúc đó đã có quá nhiều phiên bản rời rạc. Mẹo: tạo component khi một phần tử bắt đầu xuất hiện lần thứ hai hoặc thứ ba.

Lỗi 2 — Đặt tên lộn xộn. Tên như "Button 2", "Final button", "button-copy" sẽ phá hỏng cả hệ thống. Hãy dùng cấu trúc phân cấp với dấu / và đặt tên nhất quán ngay từ đầu. Tên tốt là một nửa của một component tốt.

Lỗi 3 — Override quá nhiều rồi quên mất. Khi bạn override hàng loạt thứ trên instance, có lúc bạn quên rằng nó vẫn liên kết với main. Đến khi main đổi, instance cập nhật những phần chưa override và sinh ra kết quả khó hiểu. Mẹo: nếu một instance cần khác main quá nhiều, có thể nó nên là một component riêng.

Lỗi 4 — Nhầm Detach với việc cần. Tính năng Detach instance (Ctrl/Cmd + Alt + B) cắt đứt hoàn toàn liên kết với main, biến instance thành các lớp thường. Đừng detach chỉ vì muốn sửa một chi tiết nhỏ — thường bạn chỉ cần override hoặc dùng property. Detach là lựa chọn cuối cùng, vì sau đó bạn mất hết lợi ích của component.

Lỗi 5 — Variant bùng nổ tổ hợp. 5 state × 4 size × 3 màu × 2 icon = 120 variants. Quá nhiều variant khiến set khó bảo trì và file nặng. Mẹo: với những khác biệt độc lập, ưu tiên dùng Boolean property hoặc Instance swap thay vì biến chúng thành variant.

Mẹo vàng: Luôn xây component từ Auto Layout (Bài 33). Component không co giãn được khi text dài ra sẽ vỡ ngay khi gặp nội dung tiếng Việt có dấu, vốn thường dài hơn tiếng Anh. Auto Layout là nền móng, component là ngôi nhà.

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

Tạo nút có variants: Vẽ một nút với Auto Layout. Biến nó thành component. Tạo một component set với property State gồm 4 giá trị: Default, Hover, Pressed, Disabled. Đổi màu nền/độ trong suốt cho hợp với từng trạng thái.

Thêm size: Bổ sung property Size (Small, Medium, Large) cho cùng set nút trên. Kiểm tra xem instance có hiện đủ hai dropdown không.

Component Properties: Thêm một Text property cho nhãn nút và một Instance swap property cho icon bên trái. Tạo 3 instance với 3 nhãn tiếng Việt khác nhau ("Đặt hàng", "Liên hệ tư vấn", "Thanh toán ngay") và quan sát nút tự co giãn.

Card sản phẩm: Thiết kế một card sản phẩm (ảnh, tên, giá, badge "Giảm giá"). Biến thành component, gắn Text property cho tên và giá, Boolean property cho badge. Tạo 4 instance mô phỏng một lưới sản phẩm như trên Tiki.

Bài tập tư duy: Mở một app bạn dùng hằng ngày (ShopeeFood, MoMo, ví dụ thế), liệt kê 5 phần tử mà bạn nghĩ nên là component, và với mỗi cái, chỉ ra nên dùng variant property hay component property.

Tóm tắt

Component là cách bạn thiết kế một lần để dùng nhiều lần, với mối quan hệ main → instance giúp mọi thay đổi ở bản gốc tự động lan tỏa. Override cho phép tùy biến từng instance mà vẫn giữ liên kết. Variants gom các trạng thái liên quan vào một component set gọn gàng, để người dùng chọn qua dropdown thay vì lục thư viện. Component Properties (Boolean, Text, Instance swap) đẩy tính tiện dụng lên một bậc, giúp cả người không chuyên cũng dùng được component của bạn.

Ba bài học cốt lõi từ các tình huống thực tế: component bảo vệ sự nhất quán khi làm nhóm, thân thiện với người bàn giao sau bạn, và dễ mở rộng theo thời gian. Hãy nhớ tránh đặt tên lộn xộn, đừng lạm dụng detach, đừng để variant bùng nổ tổ hợp, và luôn dựng component trên nền Auto Layout. Nắm vững bài này, bạn đã sẵn sàng cho Bài 35 về Prototyping và xa hơn là xây dựng cả một Design System hoàn chỉnh.