Mở đầu — vì sao bài này quan trọng
Nếu hai bài trước dạy bạn tư duy về thiết kế — nguyên tắc thị giác, màu sắc và khả năng tiếp cận — thì bài này dạy bạn công cụ để biến tư duy đó thành sản phẩm thật. Và trong ngành UI Design hôm nay, công cụ đó gần như luôn là Figma.
Tôi muốn bạn hình dung một tình huống rất đời thường ở một startup fintech tại TP.HCM. Bạn thiết kế xong màn hình đăng nhập, gửi file cho bạn dev. Ba ngày sau, giao diện lên staging: nút bấm lệch 3px, khoảng cách giữa các ô nhập không đều, font chữ không đúng, và khi xoay ngang điện thoại thì layout vỡ toác. Bạn ức chế, dev cũng ức chế. Ai đúng ai sai?
Sự thật là: cả hai đều đúng, và cả hai đều thua — vì quy trình bàn giao (handoff) giữa design và code chưa được xây dựng tử tế. Đây chính xác là vấn đề mà Figma sinh ra để giải quyết. Figma không chỉ là một công cụ vẽ đẹp; nó là một ngôn ngữ chung giữa designer và developer. Khi bạn dùng đúng ba tính năng cốt lõi — Auto Layout, Components và Variants — thì file thiết kế của bạn không còn là "hình ảnh tĩnh" nữa, mà trở thành một bản đặc tả (spec) sống, dev đọc được ngay khoảng cách, màu, kích thước, và trạng thái.
Bài này là nền móng. Nếu nắm chắc, những bài sau về Auto Layout nâng cao, Components API, hay Dev Mode sẽ trở nên dễ thở hơn rất nhiều. Chúng ta sẽ đi từ khái niệm, tới ví dụ thật, rồi tới thao tác từng bước.
Khái niệm cốt lõi
Figma là công cụ thiết kế giao diện chạy trên trình duyệt (browser-based), nghĩa là bạn không cần cài đặt nặng nề, và nhiều người có thể mở cùng một file cùng lúc như Google Docs. Nhưng điều làm Figma trở thành "chuẩn công nghiệp" không phải là chuyện chạy trên web, mà là ba trụ cột dưới đây.
1. Auto Layout — thiết kế biết co giãn
Auto Layout là tính năng cho phép một khung (frame) tự động sắp xếp các phần tử con theo hàng ngang hoặc dọc, tự giãn ra hoặc co lại khi nội dung thay đổi. Hãy nghĩ về nó giống như CSS Flexbox nếu bạn từng chạm vào code: bạn định nghĩa hướng (horizontal/vertical), khoảng cách giữa các phần tử (gap/spacing), và padding (đệm bên trong), thay vì đặt từng phần tử vào một toạ độ cứng.
Vì sao điều này quan trọng? Vì giao diện thật luôn thay đổi. Một nút "Đăng nhập" và một nút "Tiếp tục thanh toán ngay bây giờ" có độ dài chữ khác nhau. Nếu không dùng Auto Layout, mỗi lần đổi chữ bạn phải kéo lại kích thước nút thủ công. Với Auto Layout, nút tự nở ra ôm lấy chữ, padding hai bên vẫn giữ nguyên. Quan trọng hơn, cách Auto Layout mô tả khoảng cách trùng khớp gần như 1:1 với cách dev viết code — nên khi bàn giao, dev đọc ra ngay "à, gap 8px, padding 16px".
2. Components — phần tử UI dùng lại được
Component là một phần tử giao diện được định nghĩa một lần và dùng lại nhiều nơi. Bạn tạo một component gốc gọi là main component (hay master component), rồi mỗi lần dùng lại, bạn tạo ra một bản sao gọi là instance. Điều thần kỳ là: khi bạn sửa main component, tất cả instance trên toàn bộ file tự cập nhật theo.
Ví dụ rõ nhất là nút bấm. Một app thường có hàng trăm nút. Nếu bạn quyết định đổi bo góc từ 4px sang 8px, mà mỗi nút là một hình vẽ riêng, thì bạn phải sửa hàng trăm lần — và chắc chắn sẽ sót. Với Component, bạn sửa một chỗ, cả sản phẩm đồng bộ. Đây chính là nền tảng của khái niệm Design System mà chúng ta sẽ học sâu ở các bài sau.
3. Variants — gom các trạng thái vào một component
Variants là cách gom nhiều phiên bản của cùng một component vào chung một "họ". Một nút bấm không chỉ có một hình dạng: nó có trạng thái default (bình thường), hover (rê chuột), pressed (đang nhấn), disabled (vô hiệu hoá), và có thể có kích thước small / medium / large, có thể có primary / secondary. Thay vì tạo 15 component rời rạc, bạn gom tất cả vào một component set với các thuộc tính (properties) như State, Size, Type.
Lợi ích kép: designer chọn trạng thái bằng menu thả xuống rất nhanh, còn dev nhìn vào là hiểu ngay "component Button này có các state nào cần code". Variants biến một mớ hình vẽ thành một API thiết kế — một hợp đồng rõ ràng giữa hai bên.
Dev Handoff là gì?
Handoff (bàn giao) là thời điểm designer chuyển thiết kế cho developer để hiện thực hoá bằng code. Figma có Dev Mode — một chế độ dành riêng cho dev, nơi họ click vào bất kỳ phần tử nào và thấy ngay: kích thước (px), màu (hex/rgba), font, khoảng cách, và gợi ý code CSS/iOS/Android. Handoff tốt không phải là "gửi file rồi cầu nguyện", mà là để dev tự lấy được mọi thông số họ cần mà không phải hỏi lại bạn mười lần.
Tình huống thực tế
Ví dụ 1 — Sàn thương mại điện tử và cái nút "thần thánh"
Một team sản phẩm tại một sàn TMĐT (giả định là "ChợViệt") có 4 designer làm chung. Ban đầu mỗi người tự vẽ nút bấm theo ý mình. Kết quả: khi audit lại, họ đếm được 23 kiểu nút khác nhau trong cùng một app — khác bo góc, khác chiều cao, khác màu xanh (có cái #0A84FF, có cái #007AFF). Dev thì code theo từng màn, mỗi màn một component nút riêng, tổng cộng hơn 40 file nút trong codebase.
Sau khi chuẩn hoá, họ tạo một component Button duy nhất với Variants: Type (primary/secondary/ghost), Size (S/M/L), State (default/hover/pressed/disabled). Chỉ còn 1 main component, dev chỉ code 1 component nút nhận props tương ứng.
Bài học: Component và Variants không phải để "cho đẹp file Figma", mà để cắt giảm chi phí bảo trì thật. Sau chuẩn hoá, thời gian đổi nhận diện thương hiệu (rebrand màu chủ đạo) giảm từ ước tính 2 tuần xuống còn nửa ngày.
Ví dụ 2 — Startup fintech và màn hình vỡ khi đổi ngôn ngữ
Một startup ví điện tử ở Đông Nam Á làm app song ngữ Việt–Anh. Designer vẽ card thông báo với text tiếng Việt vừa khít. Khi QA đổi sang tiếng Anh, chữ "Xác nhận giao dịch" (16 ký tự) thành "Confirm your transaction now" — dài gấp đôi. Vì card được vẽ bằng frame kích thước cố định, chữ tràn ra ngoài, che mất nút bấm.
Nguyên nhân: designer không dùng Auto Layout. Card không biết cách "cao lên" khi chữ dài ra. Sau khi chuyển card sang Auto Layout theo chiều dọc, với thuộc tính "Hug contents" (ôm theo nội dung), card tự cao lên đúng bằng lượng chữ, padding giữ nguyên 16px. Dev cũng nhẹ nhõm vì hành vi này khớp hệt với cách họ code (chiều cao tự động theo nội dung).
Bài học: Auto Layout không chỉ tiện cho designer — nó mô phỏng đúng hành vi của giao diện thật trên nhiều ngôn ngữ, nhiều độ dài dữ liệu. Với sản phẩm Việt Nam thường phải hỗ trợ cả tiếng Việt lẫn tiếng Anh, đây là kỹ năng sống còn.
Ví dụ 3 — Handoff hỗn loạn vì "hỏi đi hỏi lại"
Một agency ở Hà Nội nhận làm giao diện cho một khách hàng ngân hàng. Designer gửi file Figma nhưng dùng bản Figma cũ, chưa bật Dev Mode, và các layer đặt tên lung tung kiểu Rectangle 47, Group 12. Dev không biết đâu là nút, đâu là icon, phải nhắn hỏi liên tục: "màu này hex bao nhiêu?", "khoảng cách này mấy px?". Riêng khâu hỏi–đáp này ngốn hơn 30 tin nhắn mỗi ngày, kéo dài dự án thêm gần một tuần.
Sau đó, designer bật Dev Mode, đặt tên layer tử tế (btn-primary, icon-search), gom nút và card thành Component. Dev chuyển sang tự click lấy thông số, gần như không phải hỏi nữa.
Bài học: Handoff tốt là handoff mà dev tự phục vụ được. Việc đặt tên layer sạch sẽ, gom component, bật Dev Mode nghe thì nhỏ nhặt nhưng tiết kiệm hàng chục giờ giao tiếp qua lại.
Hướng dẫn từng bước
Hãy cùng dựng một component nút bấm hoàn chỉnh — vừa dùng Auto Layout, vừa thành Component, vừa có Variants. Đây là bài thực hành gói gọn cả ba trụ cột.
Bước 1 — Tạo nút cơ bản. Vẽ một text layer với chữ "Đăng nhập". Chọn nó, nhấn Shift + A để bọc Auto Layout quanh nó. Bạn vừa tạo một frame biết co giãn.
Bước 2 — Chỉnh Auto Layout. Trong panel bên phải, đặt padding ngang 16px, padding dọc 12px, đặt màu nền (fill) xanh chủ đạo, và bo góc (corner radius) 8px. Đổi chữ trong nút thử — bạn sẽ thấy nút tự nở ra ôm chữ. Đó là Auto Layout đang làm việc.
Bước 3 — Biến thành Component. Chọn frame nút, nhấn Ctrl/Cmd + Alt + K (hoặc click biểu tượng "Create component"). Nút giờ có viền tím — đó là dấu hiệu của main component.
Bước 4 — Thêm Variants. Với component đang chọn, click "Add variant" trong panel. Figma nhân bản nút thành một component set. Đặt tên thuộc tính, ví dụ State, với các giá trị Default, Hover, Pressed, Disabled. Chỉnh màu/độ mờ cho từng variant (Hover sáng hơn, Disabled mờ đi 40%).
Bước 5 — Dùng instance. Kéo component từ Assets panel vào màn hình. Đây là instance. Ở panel bên phải sẽ có menu thả xuống cho State — bạn đổi trạng thái chỉ bằng một click, không cần vẽ lại.
Bước 6 — Chuẩn bị handoff. Đặt tên component rõ ràng (Button/Primary). Bật Dev Mode (nút toggle góc trên phải, hoặc Shift + D). Click vào nút — bạn sẽ thấy panel hiển thị kích thước, màu hex, padding, và cả gợi ý code. Chia sẻ link file cho dev với quyền "can view / Dev Mode".
Bước 7 — Thêm mô tả. Trong Dev Mode, bạn có thể thêm annotation (ghi chú) trực tiếp lên component, ví dụ "nút này gọi API /auth/login". Dev đọc đúng ngữ cảnh mà không cần bạn ngồi cạnh giải thích.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng frame cố định thay vì Auto Layout. Đây là lỗi kinh điển của người mới. Bạn vẽ layout đẹp ở đúng một kích thước, rồi mọi thứ vỡ khi nội dung dài ra hoặc màn hình đổi kích thước. Mẹo: mặc định luôn nghĩ tới Auto Layout trước khi đặt phần tử vào toạ độ cứng.
Lỗi 2 — Nhân bản (copy-paste) thay vì tạo Component. Bạn Ctrl+C, Ctrl+V một nút ra 20 chỗ. Khi cần sửa, bạn sửa 20 lần và sót vài chỗ. Mẹo: hễ một phần tử xuất hiện từ 2 lần trở lên, hãy cân nhắc biến nó thành Component.
Lỗi 3 — Tạo variant rời rạc thay vì gom vào component set. Có người tạo Button-default, Button-hover, Button-disabled là ba component riêng biệt. Điều này làm dev khó hiểu chúng thuộc cùng một "họ". Mẹo: dùng đúng tính năng Variants để gom, và đặt tên thuộc tính có ý nghĩa (State, Size, Type).
Lỗi 4 — Đặt tên layer bừa bãi. Rectangle 47, Frame 128 là ác mộng cho handoff. Mẹo: đặt tên theo vai trò (card-product, icon-search, label-price). Layer sạch = handoff sạch.
Lỗi 5 — Quên bật Dev Mode / share sai quyền. Dev mở link mà không thấy thông số, lại phải hỏi. Mẹo: trước khi handoff, tự mình mở Dev Mode kiểm tra một lượt như thể bạn là dev.
Mẹo vàng: Trước mỗi lần bàn giao, hãy tự đặt câu hỏi "Nếu tôi là dev và chưa từng nói chuyện với designer, tôi có tự code được màn này không?". Nếu câu trả lời là "không", handoff của bạn chưa xong.
Bài tập thực hành
- Dựng component nút hoàn chỉnh. Tạo một component
Buttonvới Variants gồm hai thuộc tính:Type(Primary, Secondary) vàState(Default, Hover, Disabled). Tổng cộng 6 variant. Dùng Auto Layout cho padding và bo góc. Yêu cầu: đổi chữ trong nút thì nút phải tự co giãn.
- Test khả năng co giãn. Lấy một instance của nút vừa tạo, đổi chữ từ "OK" thành "Xác nhận thanh toán đơn hàng ngay bây giờ". Quan sát xem nút có nở ra đúng không, padding có giữ nguyên không. Nếu vỡ, hãy tìm chỗ bạn còn dùng kích thước cố định.
- Chuẩn hoá một card. Vẽ một card sản phẩm (ảnh + tên + giá + nút "Mua"), chuyển toàn bộ sang Auto Layout dọc, đặt "Hug contents" để card tự cao theo nội dung. Đặt tên tất cả layer tử tế.
- Mô phỏng handoff. Bật Dev Mode, click qua từng phần tử của card, ghi lại 5 thông số (kích thước, màu, padding, font, bo góc) như thể bạn là dev đang đọc. Tự đánh giá: có thông số nào bạn không tìm thấy không? Nếu có, đó là chỗ handoff của bạn cần cải thiện.
Tóm tắt
Figma không chỉ là công cụ vẽ — nó là ngôn ngữ chung để designer và developer làm việc cùng nhau mà không hiểu lầm nhau. Ba trụ cột bạn cần nắm chắc từ bài này:
- Auto Layout giúp thiết kế biết co giãn theo nội dung, mô phỏng đúng hành vi giao diện thật — cực kỳ quan trọng với sản phẩm đa ngôn ngữ như ở Việt Nam.
- Components cho phép định nghĩa một lần, dùng lại nhiều nơi, sửa một chỗ đồng bộ tất cả — nền tảng của Design System.
- Variants gom các trạng thái (default, hover, pressed, disabled, các size, các type) vào một component set, biến thiết kế thành một API rõ ràng cho dev.
Ở các bài tiếp theo, chúng ta sẽ đào sâu từng trụ cột này. Nhưng nền móng đã đặt xong ngay tại đây — hãy chắc chắn bạn làm hết phần bài tập trước khi đi tiếp.