Bài 32 — Prototyping trong Figma — UI Design and Design Handoff

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

Hãy tưởng tượng bạn vừa hoàn thành một màn hình đăng ký thật đẹp trong Figma: màu sắc chuẩn, typography chỉn chu, spacing đều tăm tắp. Bạn gửi cho product manager và lập trình viên. Vài phút sau, câu hỏi đầu tiên bật ra: "Bấm nút Đăng ký thì đi đâu? Nếu nhập sai email thì báo lỗi như thế nào? Loading trong lúc chờ server trông ra sao?". Và bạn nhận ra rằng một bức tranh tĩnh, dù đẹp đến đâu, cũng không trả lời được những câu hỏi đó.

Đó chính là lý do prototyping tồn tại. Prototype là cầu nối biến những khung hình tĩnh thành một trải nghiệm có thể bấm được, có thể cảm nhận được — gần với sản phẩm thật nhất mà không cần viết một dòng code. Với một UI designer, prototype không phải là "đồ trang trí để khoe khách hàng". Nó là công cụ để kiểm chứng luồng người dùng, thuyết phục stakeholder, và truyền đạt ý định về chuyển động cho lập trình viên trước khi tốn hàng tuần code.

Trong bài này, chúng ta sẽ đi sâu vào ba chế độ (mode) prototyping cốt lõi của Figma — Click-through, Smart Animate, và Interactive Components/Overlays — cùng với cách thiết lập trigger, transition, và các mẹo để prototype của bạn vừa mượt vừa dễ bàn giao. Đây là phần "làm cho thiết kế sống dậy", còn phần bàn giao chi tiết cho dev (Dev Mode, motion specs) sẽ được đào sâu ở các bài sau.

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

Trước hết cần nắm ba thành phần tạo nên mọi interaction trong Figma. Bất kỳ tương tác nào, dù đơn giản hay phức tạp, đều được ghép từ ba mảnh: Trigger (điều gì kích hoạt), Action (điều gì xảy ra), và Animation (chuyển động diễn ra thế nào).

Trigger là hành động của người dùng khởi động interaction: On click/On tap, While hovering, While pressing, Mouse enter/leave, Key/Gamepad, hoặc After delay (tự động chạy sau một khoảng thời gian, rất hữu ích cho splash screen hay auto-carousel).
Action là kết quả: Navigate to (chuyển sang frame khác), Open overlay (mở lớp phủ đè lên), Swap overlay, Back, Scroll to, Open link, hoặc thay đổi trạng thái của một component (Change to).
Animation quy định cách chuyển tiếp: Instant, Dissolve, Move in/out, Push, Slide in/out, và đặc biệt là Smart Animate. Đi kèm là đường cong easing (Linear, Ease In, Ease Out, Ease In and Out, Custom bezier, hoặc Spring) và thời lượng (duration).

Bây giờ ta xét ba "mode" prototyping mà bạn sẽ dùng hằng ngày.

1. Click-through — nền tảng đơn giản nhất

Đây là dạng cơ bản nhất: nối frame này sang frame kia. Người dùng bấm vào một nút, màn hình chuyển sang màn khác. Không có gì "thông minh" ở đây — Figma chỉ đơn giản thay thế toàn bộ frame. Click-through phù hợp để dựng nhanh một luồng (flow) và trả lời câu hỏi "màn nào nối với màn nào".

Bạn dùng Click-through khi cần trình bày kiến trúc điều hướng (navigation), khi làm usability test tập trung vào luồng chứ không phải chuyển động, hoặc khi cần một prototype "đủ dùng" trong thời gian ngắn. Ưu điểm là nhanh và không tốn công. Nhược điểm là nó "khựng" — mọi chuyển màn đều là cắt cảnh cứng nếu bạn để Instant, nên nó không diễn tả được cảm giác mượt mà của sản phẩm thật.

2. Smart Animate — tự động nội suy giữa các frame

Đây là "vũ khí bí mật" khiến Figma prototype trông như thật. Smart Animate hoạt động theo nguyên tắc: nếu hai frame có các layer trùng tên (matching layer name), Figma sẽ tự động nội suy (tween) mọi khác biệt về vị trí, kích thước, độ mờ (opacity), màu sắc, góc xoay, và scale giữa chúng.

Ví dụ: frame A có một hình tròn nhỏ tên dot ở góc trái; frame B cũng có layer tên dot nhưng to hơn và nằm ở giữa. Khi chuyển từ A sang B bằng Smart Animate, Figma sẽ tự tạo hoạt ảnh hình tròn lớn dần và trượt vào giữa. Bạn không cần vẽ từng khung — chỉ cần định nghĩa trạng thái đầu và trạng thái cuối.

Chìa khóa của Smart Animate nằm ở quy tắc đặt tên layer. Nếu tên khớp, Figma nội suy; nếu tên khác, Figma coi đó là hai đối tượng khác nhau và sẽ fade in/out thay vì tween. Đây vừa là sức mạnh, vừa là cái bẫy lớn nhất mà ta sẽ nói ở phần lỗi thường gặp.

Smart Animate tỏa sáng ở những hiệu ứng: toggle switch trượt, tab indicator chạy, card mở rộng thành trang chi tiết (shared element transition), bottom sheet trồi lên, hero image phóng to. Kết hợp với easing Ease Out hoặc Spring, bạn có được cảm giác chuyển động tự nhiên gần như native app.

3. Interactive Components & Overlays — tương tác không cần nhân bản frame

Mode thứ ba nâng prototype lên tầm sản phẩm thật. Thay vì phải tạo một frame riêng cho mỗi trạng thái, Interactive Components cho phép bạn gắn interaction ngay bên trong một component có nhiều variant. Ví dụ nút bấm có variant Default, Hover, Pressed — bạn thiết lập While hovering → Change to → Hover, On click → Change to → Pressed một lần duy nhất trong component. Sau đó mọi instance của nút đó, ở bất kỳ đâu trong prototype, đều tự động phản ứng đúng mà không cần bạn nối dây lại.

Overlays là lớp phủ đè lên màn hình hiện tại thay vì thay thế nó: modal, dropdown, tooltip, bottom sheet, toast. Với Open overlay, bạn kiểm soát vị trí (giữa màn, đáy màn, cạnh chuột...), có nền mờ (background overlay) hay không, và có đóng khi bấm ra ngoài không. Đây là cách mô phỏng đúng các thành phần "nổi" mà một Click-through thuần túy không làm được.

Ngoài ba mode, Figma còn có Variables và Conditional logic (if/else, set variable) cho phép làm prototype "thông minh" như đăng nhập giả có kiểm tra mật khẩu, giỏ hàng đếm số lượng — nhưng đó là phần nâng cao, bạn nên vững ba mode nền tảng trước.

Tình huống thực tế

Ví dụ 1 — Tiki và bài học "prototype rẻ hơn code"

Giả sử đội thiết kế của một sàn thương mại điện tử như Tiki muốn thử nghiệm luồng "thêm vào giỏ hàng nhanh" (quick add-to-cart) ngay trên trang danh sách sản phẩm. Ý tưởng: bấm nút giỏ hàng trên card sản phẩm sẽ hiện một bottom sheet chọn phân loại và số lượng, thay vì phải vào trang chi tiết.

Trước khi giao cho đội kỹ thuật ước tính hai tuần công, designer dựng một prototype trong hai giờ: dùng Overlay cho bottom sheet (mở từ đáy màn, có background mờ), dùng Smart Animate để bottom sheet trồi lên mượt mà với easing Ease Out 300ms, và Interactive Component cho nút tăng/giảm số lượng. Họ đem prototype này test với 8 người dùng thật tại một quán cà phê ở Sài Gòn.

Kết quả: 5/8 người không nhận ra bottom sheet có thể cuộn để chọn phân loại vì phần "kéo lên để xem thêm" bị che. Bài học rút ra: nhờ prototype, đội phát hiện lỗi trải nghiệm chỉ với hai giờ công thiết kế, thay vì phát hiện sau khi đã code xong và phải sửa. Prototype ở đây đóng đúng vai trò của nó — một thí nghiệm rẻ tiền để thất bại sớm.

Ví dụ 2 — Startup fintech và cái bẫy đặt tên layer

Một startup fintech (tạm gọi là VíXanh) có bạn junior designer làm prototype chuyển tiền. Màn xác nhận có một dấu tích xanh phóng to khi giao dịch thành công, dự định dùng Smart Animate cho hiệu ứng "tick nảy lên". Nhưng khi chạy prototype, dấu tích cứ nhấp nháy (fade) chứ không nảy mượt.

Nguyên nhân: ở frame trạng thái chờ, layer tên là icon-loading; ở frame thành công, layer tên icon-success. Vì tên khác nhau, Smart Animate không nội suy được nên chuyển sang fade in/out. Sau khi mentor chỉ ra, bạn junior đổi cả hai thành cùng tên status-icon, chỉ khác nội dung và scale bên trong. Ngay lập tức hiệu ứng nảy hoạt động đúng.

Bài học: Smart Animate không đọc "ý định" của bạn, nó chỉ đọc tên layer. Muốn hai thứ được nội suy, chúng phải cùng tên. Đây là lỗi phổ biến nhất của người mới và cũng là lý do vì sao đặt tên layer sạch sẽ không phải chuyện "cho vui".

Ví dụ 3 — Grab và Interactive Components giúp scale prototype

Một đội thiết kế quy mô lớn kiểu Grab, khi làm lại luồng đặt xe, cần prototype có hàng chục màn hình mà nút bấm, ô nhập, toggle xuất hiện lặp lại khắp nơi. Nếu nối dây interaction thủ công cho từng nút trên từng frame, họ sẽ có hàng trăm sợi dây rối và mỗi lần đổi behavior là sửa cả trăm chỗ.

Giải pháp: họ xây một thư viện component có sẵn interaction bên trong — nút với hover/pressed, ô nhập với default/focused/error, toggle bật/tắt bằng Smart Animate. Khi ráp prototype, mỗi màn chỉ việc kéo instance vào, mọi tương tác tự chạy. Bài học: Interactive Components biến prototype từ việc thủ công tốn sức thành hệ thống có thể mở rộng — đúng tinh thần design system mà một đội chuyên nghiệp cần.

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

Ta sẽ dựng một prototype hoàn chỉnh cho luồng "đăng nhập → dashboard" có đầy đủ ba mode.

Chuẩn bị frame. Tạo ít nhất ba frame: Login, Loading, Dashboard. Đặt tên frame rõ ràng — đây là gốc rễ của một prototype dễ đọc. Dùng đúng khung kích thước thiết bị (ví dụ iPhone 14, 390×844).

Chuyển sang tab Prototype. Ở panel bên phải, chuyển từ Design sang Prototype. Bạn sẽ thấy chế độ nối dây xuất hiện — mỗi layer khi được chọn sẽ có một chấm tròn ở cạnh để kéo tạo kết nối.

Tạo Click-through cơ bản. Chọn nút Đăng nhập ở frame Login, kéo chấm tròn sang frame Loading. Trong popup interaction, đặt On tap → Navigate to → Loading. Chạy thử (nút Play ở góc phải) để chắc chắn luồng chạy.

Thêm auto-navigate bằng After delay. Chọn frame Loading, thêm interaction After delay → 1500ms → Navigate to → Dashboard. Đây là cách mô phỏng thời gian chờ server mà không cần người dùng bấm gì.

Áp dụng Smart Animate cho một shared element. Đặt logo ở Login (tên layer brand-logo, kích thước lớn, giữa màn) và cùng layer brand-logo ở Loading (nhỏ hơn, lên trên). Ở interaction bước 3, đổi animation thành Smart Animate, easing Ease Out, duration 400ms. Chạy lại — logo sẽ thu nhỏ và trượt lên mượt mà.

Thêm Interactive Component. Chuyển nút Đăng nhập thành component có variant Default và Pressed. Trong component, thiết lập While pressing → Change to → Pressed. Giờ nút sẽ phản hồi khi nhấn ở mọi nơi nó xuất hiện.

Thêm Overlay cho thông báo lỗi. Tạo frame nhỏ Toast-Error. Ở nút Đăng nhập, thêm một interaction phụ Open overlay → Toast-Error, đặt vị trí Top center, animation Move in từ trên xuống, tự đóng sau delay nếu muốn.

Thiết lập easing và duration nhất quán. Quy ước một bộ giá trị chung: micro-interaction 150–200ms, chuyển màn 300–400ms, easing chủ đạo là Ease Out. Sự nhất quán này chính là "motion language" mà sau này bạn bàn giao cho dev.

Preview trên thiết bị thật. Dùng app Figma Mirror trên điện thoại để cảm nhận prototype ở đúng kích thước tay cầm. Rất nhiều vấn đề về tốc độ, vùng chạm chỉ lộ ra khi cầm trên tay thật.

Chia sẻ và lấy phản hồi. Bấm Share, bật chế độ prototype link, gửi cho stakeholder. Người xem có thể để lại comment trực tiếp trên từng màn.

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

Layer không cùng tên nhưng mong Smart Animate nội suy. Đây là lỗi số một. Nhớ: cùng tên thì tween, khác tên thì fade. Hãy giữ tên layer nhất quán giữa các frame cho những phần tử bạn muốn chuyển động liền mạch.

Lạm dụng chuyển động, prototype "biểu diễn xiếc". Không phải mọi thứ đều cần bay nhảy. Chuyển động quá nhiều làm rối và che mất luồng chính. Mẹo: chuyển động phải phục vụ sự hiểu, không phải để khoe.

Duration quá dài. Người mới hay để 800–1000ms cho oai, nhưng thực tế sản phẩm tốt dùng 200–400ms. Chuyển động chậm khiến sản phẩm cảm giác ì ạch. Test trên thiết bị thật để hiệu chỉnh.

Quên trạng thái phụ. Prototype đẹp thường chỉ có "happy path". Nhưng dev cần biết lỗi, rỗng, loading trông ra sao. Hãy prototype cả các trạng thái phụ, ít nhất là những cái quan trọng.

Nối dây thủ công thay vì dùng Interactive Component. Nếu bạn thấy mình lặp lại cùng một interaction trên nhiều frame, đó là dấu hiệu nên chuyển thành component. Tiết kiệm công và tránh sai lệch.

Mẹo — dùng "Preserve scroll position". Khi navigate giữa các frame có nội dung cuộn, bật tùy chọn này để không bị nhảy về đầu trang, giữ cảm giác liền mạch.

Mẹo — tách flow bằng nhiều starting point. Một file có thể chứa nhiều flow độc lập (onboarding, checkout, settings). Đặt Flow starting point cho từng cụm để người xem chọn đúng luồng cần review.

Mẹo — dùng Spring cho cảm giác native. Với các phần tử "nảy" như bottom sheet hay toggle, easing Spring cho cảm giác vật lý tự nhiên hơn bezier tĩnh.

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

Dựng luồng onboarding 3 màn. Tạo prototype gồm màn Welcome → màn chọn sở thích → màn hoàn tất. Dùng Click-through nối các màn, thêm After delay cho màn hoàn tất tự chuyển vào home sau 2 giây.

Thực hành Smart Animate với shared element. Làm hiệu ứng một card sản phẩm khi bấm sẽ "nở ra" thành trang chi tiết. Đảm bảo layer ảnh, tên sản phẩm, giá đều cùng tên ở cả hai frame để nội suy đúng. Tinh chỉnh duration về 350ms, easing Ease Out.

Xây một Interactive Component toggle. Tạo component toggle có variant On/Off, dùng Smart Animate cho núm trượt và đổi màu nền. Đặt On tap → Change to giữa hai variant. Kiểm tra rằng mọi instance đều hoạt động độc lập.

Overlay modal xác nhận. Thêm một modal "Bạn có chắc muốn xóa?" mở dạng overlay giữa màn, có nền mờ, hai nút Hủy/Xóa, đóng được khi bấm ra ngoài.

Bài tập phản biện. Lấy prototype ở bài 1, nhờ một người bạn dùng thử mà không giải thích gì. Ghi lại chỗ họ ngập ngừng hoặc bấm sai. Đây là bước tập tư duy "prototype để học, không phải để khoe".

Tóm tắt

Prototyping trong Figma là bước biến thiết kế tĩnh thành trải nghiệm có thể bấm và cảm nhận — công cụ để bạn kiểm chứng luồng, thuyết phục stakeholder và truyền đạt chuyển động cho dev. Mọi interaction đều ghép từ ba mảnh: Trigger, Action, Animation.

Ba mode nền tảng bạn cần thành thạo: Click-through để dựng nhanh luồng và điều hướng; Smart Animate để tự động nội suy giữa các frame — với chìa khóa là quy tắc đặt tên layer trùng khớp; và Interactive Components cùng Overlays để làm prototype phản hồi như sản phẩm thật mà không phải nhân bản frame vô tận.

Ghi nhớ ba nguyên tắc vàng: chuyển động phục vụ sự hiểu chứ không phải để khoe, duration ngắn (200–400ms) cho cảm giác nhanh nhạy, và luôn test trên thiết bị thật. Prototype tốt nhất không phải cái đẹp nhất, mà là cái giúp bạn phát hiện vấn đề sớm nhất — rẻ hơn rất nhiều so với sửa sau khi đã code.