Bài 11 — Figma Mastery — Advanced Workflow

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

Nếu bạn đã đi qua các bài trước, bạn biết cách dựng wireframe, làm prototype, và bạn cũng đã chạm tay vào Figma ở mức cơ bản: kéo khung, gõ chữ, đổi màu. Nhưng có một khoảng cách rất lớn giữa "biết dùng Figma" và "thành thạo Figma như một công cụ sản xuất". Khoảng cách đó nằm ở ba thứ: Auto Layout, Components + Variants, và Variables. Đây chính là bộ ba quyết định bạn là một người vẽ giao diện hay một người thực sự xây dựng sản phẩm.

Tôi muốn bạn hình dung thế này. Một bạn junior designer ở một startup tại TP.HCM mất 3 tiếng để chỉnh lại một bảng giá có 4 gói dịch vụ, vì sếp đổi từ "4 cột" sang "3 cột" và thêm một dòng tính năng vào mỗi cột. Bạn đó phải kéo tay từng phần tử, căn lại từng khoảng cách, sửa từng màu nút. Trong khi đó, một bạn senior làm cùng việc đó trong 8 phút — vì bạn ấy dựng bằng Auto Layout, mỗi gói là một component, và màu sắc được điều khiển bằng variables. Đổi một con số, cả file tự cập nhật.

Sự khác biệt không phải ở khiếu thẩm mỹ. Nó nằm ở workflow. Bài này sẽ dạy bạn cách làm việc trong Figma sao cho file của bạn co giãn được, tái sử dụng được, và bảo trì được — đúng như cách một sản phẩm thật được vận hành. Đây là kỹ năng mà mọi nhà tuyển dụng product designer ở Việt Nam đều kiểm tra khi xem file Figma của bạn.

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

Ba tính năng power của Figma không phải là ba thứ rời rạc. Chúng xếp chồng lên nhau thành một hệ thống: Auto Layout lo về cấu trúc co giãn, Components + Variants lo về tái sử dụng, và Variables lo về giá trị tập trung. Hiểu đúng từng tầng rồi mới ghép lại.

Auto Layout — flexbox và grid ngay trong Figma

Auto Layout biến một frame "cứng" thành một frame "biết tự sắp xếp". Nếu bạn từng nghe đến flexbox trong CSS, đây chính là phiên bản trực quan của nó. Thay vì đặt từng phần tử ở toạ độ cố định, bạn nói với Figma: "Xếp các phần tử này theo chiều ngang, cách nhau 16px, lề trong 24px". Khi bạn thêm, xoá, hay đổi kích thước một phần tử, mọi thứ còn lại tự dồn lại cho đúng.

Những thuộc tính bạn phải nắm vững:

Direction (hướng): ngang hoặc dọc. Một nút bấm thường là Auto Layout ngang chứa icon + chữ. Một card thường là Auto Layout dọc chứa ảnh + tiêu đề + mô tả.
Gap (khoảng cách giữa các phần tử) và Padding (lề trong): đây là hai con số tạo nên "nhịp thở" của thiết kế.
Resizing: mỗi phần tử có thể là Fixed (cố định), Hug (ôm sát nội dung), hoặc Fill (lấp đầy không gian còn lại). Hiểu ba chế độ này là hiểu 80% Auto Layout. Ví dụ một nút "Hug contents" sẽ tự co theo độ dài chữ — chữ "Lưu" và chữ "Lưu và tiếp tục" cho ra hai nút dài ngắn khác nhau mà không cần chỉnh tay.
Nesting (lồng nhau): Auto Layout có thể lồng trong Auto Layout. Một màn hình hoàn chỉnh thực ra là nhiều lớp Auto Layout lồng vào nhau — header ngang nằm trong thân dọc nằm trong màn hình dọc.

Auto Layout từ năm 2022 cũng hỗ trợ kiểu wrap (tự xuống dòng) và absolute position (ghim một phần tử lên trên mà không phá vỡ dòng chảy), nên giờ nó đủ sức dựng cả những layout dạng lưới phức tạp.

Components + Variants — bộ não tái sử dụng

Một component là một phần tử "gốc" mà bạn có thể tạo ra nhiều bản sao gọi là instance. Sửa component gốc (gọi là main component), tất cả instance tự cập nhật theo. Đây là nền tảng của mọi design system — chúng ta sẽ đào sâu cấu trúc design system ở các bài sau, nhưng ở đây bạn cần nắm cơ chế vận hành của component trong Figma.

Variants là bước nâng cấp: thay vì có 10 component nút riêng lẻ (nút primary, secondary, disabled, có icon, không icon...), bạn gom chúng vào một component set duy nhất với các thuộc tính. Ví dụ một nút có thể có:

Property Type: Primary / Secondary / Ghost
Property State: Default / Hover / Disabled
Property Size: Small / Medium / Large

Người dùng instance chỉ cần bật/tắt các lựa chọn này trong panel, không cần đi tìm component khác. Đây là cách bạn biến hàng chục biến thể rối rắm thành một bảng điều khiển gọn gàng.

Hai khái niệm bổ trợ cực kỳ hữu ích: Component Properties (cho phép phơi bày text, boolean bật/tắt một lớp, hay instance swap ra ngoài panel) và Boolean property để ẩn/hiện icon mà không tạo thêm variant. Dùng tốt những thứ này, một component nút duy nhất có thể phục vụ mọi tình huống trong sản phẩm.

Variables — token và modes

Variables (ra mắt cuối 2023, hoàn thiện dần qua 2024–2025) là bước nhảy lớn nhất của Figma trong vài năm qua. Trước đây bạn có "styles" cho màu và chữ, nhưng styles không thể tính toán, không thể đổi theo ngữ cảnh. Variables thì khác: nó là những giá trị có tên, lưu tập trung, có thể là màu, số, chuỗi, hoặc boolean.

Điểm mạnh thật sự là modes (chế độ). Một collection variables có thể có nhiều mode — ví dụ Light và Dark. Cùng một variable color/background/surface sẽ có giá trị trắng ở mode Light và xám đậm ở mode Dark. Bạn gán variable đó vào nền của card, rồi chỉ cần đổi mode trên frame, cả màn hình lập tức chuyển sang dark mode. Không cần vẽ lại gì.

Đây là khái niệm "token" trong thực tế — và chúng ta sẽ học kiến trúc token đầy đủ (primitive, semantic, component) ở các bài về design system. Ở bài này, bạn chỉ cần làm chủ cách dùng variables trong Figma: tạo collection, tạo mode, gán variable vào thuộc tính, và alias một variable trỏ tới variable khác.

Tình huống thực tế

Ví dụ 1 — Startup fintech ở Hà Nội và bảng giá "đổi xoành xoạch"

Một công ty fintech khoảng 20 người ở Hà Nội đang xây trang pricing. Ban đầu PM muốn 4 gói. Designer mới vào dựng theo kiểu cũ: 4 frame cố định, copy-paste, căn tay từng khoảng. Hai tuần sau, marketing quyết định bỏ gói rẻ nhất còn 3 gói, và thêm 2 dòng tính năng vào mỗi gói. Bạn designer mất gần nửa ngày sửa, và vẫn lệch khoảng cách 2-3px ở vài chỗ mà dev phát hiện ra khi build.

Lần thứ hai, một bạn senior xử lý lại toàn bộ. Mỗi gói được dựng thành một component với Auto Layout dọc: phần header (tên gói + giá) Hug nội dung, danh sách tính năng là Auto Layout dọc gap 12px, nút CTA ở dưới. Cả hàng 3 gói nằm trong một Auto Layout ngang gap 24px, mỗi gói đặt Fill để chia đều bề ngang. Khi cần bỏ một gói, bạn ấy xoá một instance — hai gói còn lại tự dồn và giãn đều. Khi thêm dòng tính năng, gõ thêm một dòng vào danh sách, cả card tự cao thêm.

Bài học: cấu trúc co giãn không phải để "đẹp khi demo", mà để sống sót qua những lần đổi yêu cầu — vốn là chuyện xảy ra hằng tuần ở startup. Đầu tư 30 phút dựng đúng Auto Layout tiết kiệm hàng giờ về sau.

Ví dụ 2 — Đội design của một sàn TMĐT và "địa ngục nút bấm"

Hãy tưởng tượng một sàn thương mại điện tử cỡ trung ở Đông Nam Á, đội thiết kế 6 người. Mỗi designer tự vẽ nút riêng cho màn hình của mình. Sau một năm, file chung có hơn 40 kiểu nút "primary" với màu cam lệch nhau từ #FF6B00 đến #F96A05, bo góc chỗ 6px chỗ 8px. Khi rebrand đổi màu thương hiệu, đội phải dò tay sửa từng nút — mất gần hai tuần và vẫn sót.

Họ làm lại bằng đúng bộ ba của bài này. Tạo một component set cho nút với variants (Type × State × Size). Màu, bo góc, padding đều gán bằng variables (color/brand/primary, radius/button, space/button-padding). Giờ toàn bộ sản phẩm chỉ có một nguồn nút duy nhất. Lần rebrand kế tiếp, họ đổi đúng một variable màu — toàn bộ nút trong mọi file dùng thư viện đó đổi theo trong vài giây.

Bài học: components giải quyết bài toán nhất quán, variables giải quyết bài toán thay đổi tập trung. Khi đội đông lên, hai thứ này không còn là "nice to have" mà là điều kiện sống còn để không rơi vào hỗn loạn.

Ví dụ 3 — Dark mode trong một đêm nhờ modes

Một app đọc tin tức của người Việt cần bổ sung dark mode gấp trước hạn demo gọi vốn. Nếu làm kiểu cũ, designer phải nhân đôi mọi màn hình và tô lại tay — không kịp. Nhưng vì file đã gán toàn bộ màu bằng variables, họ chỉ cần thêm một mode Dark vào collection màu, điền giá trị tối cho từng semantic variable (surface, text/primary, border...). Sau đó chọn các frame chính và chuyển mode. Trong một buổi tối, toàn bộ 18 màn hình có phiên bản dark mode hoàn chỉnh, đồng bộ tuyệt đối.

Bài học: modes biến những thay đổi vốn tốn hàng ngày công thành thao tác vài phút — nếu bạn đã đặt nền móng đúng từ đầu bằng variables semantic thay vì màu hardcode.

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

Hãy dựng một component nút hoàn chỉnh theo chuẩn — đây là bài tập "vỡ lòng nâng cao" mà mọi product designer nên làm được nhắm mắt.

Tạo variables nền tảng trước. Mở panel Variables (Local variables), tạo collection Theme. Thêm các variable: color/brand/primary (màu thương hiệu), color/text/on-primary (màu chữ trên nền brand), radius/md = 8, space/md = 16. Đây là nguồn giá trị tập trung.

Vẽ nút thô bằng Auto Layout. Tạo một frame ngang chứa text "Nút". Bật Auto Layout (phím tắt Shift + A). Đặt direction ngang, padding gán bằng variable space/md, gap 8 (cho trường hợp có icon). Cho frame nút này Hug cả hai chiều để ôm theo nội dung.

Gán variable vào thuộc tính. Click vào màu nền → chọn biểu tượng variable → gán color/brand/primary. Làm tương tự cho màu chữ (color/text/on-primary) và bo góc (radius/md). Giờ nút không còn giá trị "chết" nào.

Tạo component. Chọn frame nút, nhấn Ctrl/Cmd + Alt + K để biến nó thành main component.

Tạo variants. Nhân bản component, đổi sang kiểu Secondary (nền trong, viền brand). Chọn cả hai, nhấn "Combine as variants". Đặt tên property là Type với hai giá trị Primary / Secondary. Thêm tiếp variant Disabled nếu muốn — đặt thành property State.

Phơi bày properties ra ngoài. Thêm một Text property cho nhãn nút (để người dùng instance gõ chữ trực tiếp), và một Boolean property gắn vào lớp icon để bật/tắt icon. Bây giờ một component duy nhất phục vụ mọi tình huống.

Kiểm thử bằng instance. Kéo vài instance ra, đổi Type, đổi nhãn dài ngắn, bật icon. Quan sát nút tự co giãn — đó là Auto Layout đang làm việc. Đổi giá trị variable color/brand/primary, xem tất cả instance đổi theo — đó là variables đang làm việc.

Thêm mode (tuỳ chọn nâng cao). Trong collection Theme, thêm mode Dark, điền giá trị tối cho các màu. Chuyển mode trên frame để xem nút đổi theo ngữ cảnh.

Khi bạn làm xong 8 bước này một cách trôi chảy, bạn đã nắm trong tay toàn bộ workflow nâng cao của Figma.

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

Lỗi 1 — Tạo variant cho mọi thứ. Nhiều bạn tạo variant cho cả "có icon / không icon", "icon trái / icon phải", khiến một nút có tới 36 variant. Hãy dùng Boolean property để ẩn/hiện icon và instance swap để đổi icon, chỉ dùng variant cho những khác biệt thật sự về kiểu (Type, State, Size). Quy tắc: variant cho "loại khác nhau", property cho "cùng loại nhưng tuỳ chỉnh".

Lỗi 2 — Vẫn hardcode màu sau khi đã có variables. Đặt variable rồi nhưng lúc vẽ vẫn gõ mã màu tay. File trông giống dùng token nhưng thực ra không. Mẹo: tự đặt luật "không có hex nào được phép nằm trực tiếp trên layer" — mọi màu phải đến từ variable.

Lỗi 3 — Quên đặt resizing đúng. Card không co giãn vì để Fixed, hoặc nút "vỡ" khi chữ dài vì không để Hug. Trước khi than "Auto Layout không hoạt động", hãy kiểm tra ba chế độ Fixed/Hug/Fill của từng phần tử.

Lỗi 4 — Detach instance vô tội vạ. Khi không sửa được instance theo ý muốn, nhiều bạn nhấn "Detach" để cắt liên kết. Làm vậy là phá vỡ design system. Thay vào đó, hãy phơi bày đúng property bạn cần, hoặc bổ sung variant.

Mẹo vàng: đặt tên có cấu trúc theo dấu /. Tên color/text/primary hay Button/Primary sẽ tự gom thành nhóm phân cấp trong panel. Tên gọn gàng là một nửa của một file Figma chuyên nghiệp.

Mẹo tốc độ: học thuộc vài phím tắt then chốt — Shift + A (Auto Layout), Ctrl/Cmd + Alt + K (tạo component), Ctrl/Cmd + \ (ẩn UI để xem sạch), Alt + kéo (đo khoảng cách). Tốc độ trong Figma đến từ phím tắt, không phải từ chuột.

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

Hãy hoàn thành lần lượt, tăng dần độ khó:

Dựng một Card sản phẩm bằng Auto Layout thuần. Gồm ảnh, tên sản phẩm, giá, nút "Thêm vào giỏ". Yêu cầu: đổi tên sản phẩm thành chuỗi dài gấp đôi và card vẫn tự giãn đúng, không vỡ layout. Thử ảnh tỉ lệ khác nhau.

Biến Card thành component với Variants. Tạo property State: Default / Sold-out (nút mờ và đổi nhãn thành "Hết hàng"). Thêm Text property cho tên và giá. Kéo ra 6 instance khác nhau chỉ bằng cách đổi property, không sửa tay layer nào.

Áp variables và thêm mode. Tạo collection màu với hai mode Light/Dark. Gán toàn bộ màu của card bằng semantic variable. Đặt 6 instance lên hai frame, một frame Light một frame Dark, và chứng minh cả hai đồng bộ khi bạn đổi giá trị variable gốc.

Thử thách: dựng một bảng giá 3 gói (như Ví dụ 1) hoàn toàn co giãn. Xoá một gói và quan sát hai gói còn lại tự dồn. Nộp kèm một đoạn mô tả ngắn: bạn đã đặt resizing gì ở đâu và vì sao.

Nếu làm xong cả 4 bài, hãy tự kiểm: trong file của bạn còn mã hex nào nằm trực tiếp trên layer không? Còn component nào bị detach không? Nếu không, bạn đang làm việc đúng chuẩn sản xuất.

Tóm tắt

Thành thạo Figma nâng cao không phải là biết nhiều tính năng, mà là biết ghép ba trụ cột lại thành một workflow mạch lạc. Auto Layout cho bạn cấu trúc co giãn để sống sót qua mọi lần đổi yêu cầu. Components + Variants cho bạn sự nhất quán và khả năng tái sử dụng khi đội ngũ lớn lên. Variables + Modes cho bạn một nguồn giá trị tập trung, để một thay đổi nhỏ lan toả khắp sản phẩm chỉ trong vài giây — kể cả những việc khổng lồ như rebrand hay thêm dark mode.

Điểm mấu chốt cần khắc ghi: ba thứ này xếp chồng lên nhau. Auto Layout là khung xương, Components là cơ quan tái sử dụng, Variables là dòng máu giá trị chạy qua tất cả. Khi bạn quen tay đến mức dựng một component nút chuẩn mà không cần suy nghĩ, bạn đã vượt qua ranh giới từ "người vẽ giao diện" sang "người xây sản phẩm". Đó chính là kỹ năng mà nhà tuyển dụng nhìn thấy ngay khi mở file Figma của bạn — và là nền móng cho mọi bài về design system phía trước.