Bài 35 — Figma Prototyping cơ bản

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

Hãy tưởng tượng bạn vừa thiết kế xong một loạt màn hình đẹp lung linh trong Figma: trang chủ, trang sản phẩm, giỏ hàng, trang thanh toán. Mọi thứ trông rất chỉn chu. Bạn gửi cho sếp hoặc khách hàng, và câu hỏi đầu tiên họ hỏi là: "Bấm vào nút Mua ngay thì nó chạy đi đâu?". Lúc đó, một tập hợp ảnh tĩnh rời rạc không trả lời được câu hỏi đó. Người xem phải tự tưởng tượng trong đầu rằng từ màn này nhảy sang màn kia thế nào — và mỗi người tưởng tượng một kiểu khác nhau.

Đây chính là khoảng trống mà Prototyping (tạo bản mẫu tương tác) lấp đầy. Prototype trong Figma cho phép bạn nối các frame (màn hình) lại với nhau bằng những "sợi dây" tương tác, để khi bấm vào một nút, màn hình thực sự chuyển sang trang khác — y như một ứng dụng thật, nhưng chưa hề viết một dòng code nào.

Tại sao điều này quan trọng đến vậy với một web designer? Vì nó cho phép bạn kiểm chứng luồng (flow) trước khi tốn tiền code. Một lập trình viên giỏi ở Việt Nam có chi phí vài trăm nghìn đến cả triệu đồng mỗi giờ. Nếu bạn để họ code xong một luồng đăng ký rồi mới phát hiện thiếu bước xác nhận email, chi phí sửa sẽ gấp nhiều lần so với việc bạn kéo lại vài sợi dây trong Figma. Prototype giúp bạn phát hiện lỗi tư duy, thử nghiệm với người dùng thật, và thuyết phục khách hàng — tất cả chỉ trong vài giờ. Đây là kỹ năng phân biệt một người "vẽ màn hình đẹp" với một người thực sự "thiết kế trải nghiệm".

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

Prototype là gì và không là gì

Prototype trong Figma là một lớp tương tác chồng lên các thiết kế tĩnh của bạn. Bản thân các frame không thay đổi; bạn chỉ thêm thông tin về việc "khi có hành động X trên phần tử này, thì điều Y xảy ra". Khi nhấn nút Play (▶) ở góc trên bên phải, Figma trình diễn các frame như một app có thể bấm được.

Quan trọng: prototype không phải code. Nó không xử lý logic thật (không cộng tiền giỏ hàng, không lưu dữ liệu vào database). Nó chỉ mô phỏng (simulate) luồng đi và cảm giác tương tác. Đừng cố biến prototype thành phần mềm hoàn chỉnh — đó là cái bẫy ngốn thời gian mà ta sẽ nói ở phần lỗi thường gặp.

Ba thành phần của một interaction

Mỗi tương tác trong Figma được tạo từ ba phần, bạn cứ ghi nhớ công thức Trigger → Action → Destination:

Trigger (kích hoạt): hành động của người dùng làm tương tác chạy. Phổ biến nhất là On Click / On Tap (bấm chuột/chạm). Ngoài ra có On Hover (rê chuột vào), On Drag (kéo), While Pressing, After Delay (sau một khoảng thời gian — rất hữu ích cho splash screen hoặc toast tự ẩn), và Mouse Enter/Leave.

Action (hành động): điều Figma thực hiện. Các action chính:

- Navigate to: chuyển sang một frame khác. Đây là loại bạn dùng 80% thời gian. - Open overlay: mở một lớp phủ lên trên frame hiện tại — dùng cho modal, dropdown, menu, tooltip mà không rời khỏi màn hình gốc. - Swap overlay: đổi overlay đang mở sang overlay khác. - Back: quay lại frame trước đó. - Scroll to: cuộn đến một vị trí cụ thể trong cùng frame. - Open link: mở URL ngoài.

Destination & Animation (đích đến & chuyển động): frame mà ta đi tới, cùng kiểu chuyển cảnh: Instant (chuyển ngay), Dissolve (mờ dần), Move in/out, Push, Slide in/out, và đặc biệt là Smart Animate — Figma tự động nội suy chuyển động giữa các phần tử trùng tên ở hai frame, tạo hiệu ứng mượt mà như app thật.

Connection (sợi dây nối) và Flow

Khi bạn chọn một phần tử và mở tab Prototype ở panel bên phải, một chấm tròn (+) xuất hiện ở cạnh phần tử. Bạn kéo từ chấm đó sang frame đích để tạo một connection — sợi dây màu xanh. Một chuỗi các connection bắt đầu từ một frame "khởi điểm" tạo thành một Flow (luồng). Figma cho phép đặt tên flow, ví dụ "Luồng đăng ký" hay "Luồng thanh toán", để khi chia sẻ, người xem thấy ngay danh sách các kịch bản có thể chạy thử.

Overlay — bí quyết cho modal và menu

Rất nhiều người mới mắc lỗi tạo một frame riêng cho trạng thái "đã mở modal", khiến file phình to và khó bảo trì. Cách đúng là dùng Open overlay: thiết kế modal như một frame nhỏ riêng, rồi chọn action Open overlay, đặt vị trí (giữa màn hình, dưới cùng, theo con trỏ...), bật Add background behind overlay để làm tối nền và Close when clicking outside để bấm ra ngoài là đóng. Đây là kỹ thuật nền tảng cho mọi popup trên web.

Tình huống thực tế

Ví dụ 1: Tiki thử nghiệm nút "Mua ngay" trước khi giao cho team dev

Giả sử một nhóm thiết kế ở một sàn thương mại điện tử lớn như Tiki đang cải tiến trang chi tiết sản phẩm. Họ phân vân: khi bấm Mua ngay, nên đưa thẳng người dùng tới trang thanh toán (giảm bước, tăng chuyển đổi) hay nên hiện một popup chọn số lượng và phân loại trước?

Thay vì tranh luận lý thuyết trong cuộc họp, designer dựng hai prototype trong một buổi chiều. Phương án A: nút Mua ngay dùng Navigate to đi thẳng tới frame thanh toán. Phương án B: nút Mua ngay dùng Open overlay mở popup chọn phân loại, rồi nút trong popup mới Navigate to trang thanh toán. Họ gửi link cho 8 đồng nghiệp không thuộc team thiết kế bấm thử.

Kết quả: 6/8 người ở phương án A cảm thấy "hụt hẫng" vì chưa kịp chọn size đã nhảy sang trả tiền. Bài học rút ra: prototype biến một cuộc tranh cãi cảm tính kéo dài thành một quyết định dựa trên quan sát hành vi thực, chỉ trong nửa ngày và không tốn một giờ công lập trình nào.

Ví dụ 2: Một startup fintech ở TP.HCM và luồng onboarding 5 bước

Một startup ví điện tử ở Sài Gòn có luồng đăng ký gồm 5 bước: nhập SĐT → nhập OTP → tạo mật khẩu → chụp CMND/CCCD → hoàn tất. Trước đây họ mô tả luồng này bằng tài liệu Word dài 4 trang gửi cho team dev ở Đà Nẵng. Hậu quả: dev hiểu nhầm thứ tự bước 3 và 4, phải làm lại, trễ một sprint hai tuần.

Lần cải tiến sau, designer dựng prototype nối liền 5 frame bằng các connection Navigate to, dùng chuyển cảnh Slide in để mô phỏng cảm giác đi tới ở mỗi bước, và thêm nút "Quay lại" với action Back ở mỗi màn. Họ còn dùng After Delay 2 giây ở màn OTP để tự động hiện thông báo "Mã đã được gửi lại". Khi gửi link prototype thay cho file Word, team dev chỉ cần bấm qua một lượt là nắm trọn luồng. Bài học: một prototype bấm được truyền đạt luồng rõ hơn hàng nghìn chữ mô tả, và cắt giảm rủi ro hiểu nhầm giữa các team ở xa nhau — điều rất phổ biến với các công ty Việt Nam có team phân tán.

Ví dụ 3: Freelancer chốt hợp đồng nhờ Smart Animate

Một bạn freelancer nhận làm landing page cho một thương hiệu mỹ phẩm. Khách hàng còn do dự chưa ký hợp đồng. Thay vì gửi ảnh JPG tĩnh, bạn dựng một prototype với hiệu ứng Smart Animate: khi người dùng cuộn xuống, các card sản phẩm trượt nhẹ vào, nút Đặt hàng khi rê chuột vào thì phóng to mượt mà (dùng trigger On Hover + Smart Animate giữa hai variant của nút).

Khách hàng bấm thử trên điện thoại, thấy "y như app thật", và ký hợp đồng ngay trong buổi gặp. Bài học: prototype không chỉ để kiểm thử nội bộ — nó là công cụ bán hàng. Cảm giác chạm vào một sản phẩm "sống" tạo niềm tin mà ảnh tĩnh không bao giờ làm được, đặc biệt với khách hàng không rành kỹ thuật.

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

Hãy cùng dựng một luồng đơn giản: từ trang chủ, bấm nút mở một modal đăng nhập, rồi bấm Đăng nhập để vào trang Dashboard.

Chuẩn bị các frame. Tạo ba frame: Home, Modal Đăng nhập (frame nhỏ, ví dụ 400×320), và Dashboard. Đặt tên frame rõ ràng — tên frame chính là thứ hiện trên panel khi nối, đặt tên cẩu thả sẽ khiến bạn rối khi file lớn.

Chuyển sang tab Prototype. Ở panel bên phải, bên cạnh tab Design có tab Prototype. Bấm vào đó. Giao diện canvas sẽ chuyển sang chế độ cho phép kéo các connection.

Đặt Starting Frame (Flow). Chọn frame Home, ở tab Prototype bấm dấu (+) bên cạnh "Flow starting point" để đánh dấu đây là điểm bắt đầu. Đặt tên flow là "Luồng đăng nhập".

Nối nút mở modal. Chọn nút Đăng nhập trên frame Home. Một chấm tròn xuất hiện ở cạnh phải. Kéo từ chấm đó tới frame Modal Đăng nhập. Một bảng cài đặt hiện ra: đặt Trigger = On Click, Action = Open overlay, vị trí = Center, bật Add background behind overlay và Close when clicking outside.

Nối nút trong modal. Chọn nút Đăng nhập nằm bên trong frame Modal Đăng nhập. Kéo connection tới frame Dashboard. Chọn Trigger = On Click, Action = Navigate to, Animation = Smart Animate hoặc Dissolve cho mượt.

Thêm nút quay lại. Nếu muốn, thêm action Back cho nút "X" hoặc mũi tên quay lại để người dùng đóng modal hoặc lùi bước.

Chạy thử (Preview). Bấm nút ▶ (Present) ở góc trên bên phải. Figma mở cửa sổ trình diễn. Bấm thử nút, kiểm tra modal mở đúng, đóng đúng, và chuyển sang Dashboard mượt mà.

Chia sẻ link. Trong cửa sổ Present, bấm Share prototype, đặt quyền Anyone with the link can view, sao chép link gửi cho đồng nghiệp hoặc khách hàng. Họ không cần tài khoản Figma vẫn bấm thử được trên trình duyệt hoặc điện thoại.

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

Lỗi 1: Quên đặt thiết bị (Device) cho preview. Bạn thiết kế cho mobile nhưng khi present lại thấy frame lọt thỏm giữa nền xám. Vào tab Prototype → mục Device, chọn đúng khung máy (iPhone, Android) để bản trình diễn trông giống thực tế.

Lỗi 2: Nối connection từ frame thay vì từ phần tử. Nếu bạn lỡ kéo dây từ cả frame, toàn bộ màn hình trở thành vùng bấm được — bấm chỗ nào cũng nhảy. Hãy luôn chọn đúng nút/phần tử cần nối, không chọn nguyên frame.

Lỗi 3: Smart Animate không chạy. Smart Animate chỉ "biến hình" được giữa các phần tử trùng tên (cùng layer name) ở hai frame. Nếu bạn vẽ lại nút ở frame đích với tên khác, Figma không nhận ra đó là cùng một vật và sẽ nhảy cứng. Mẹo: copy frame nguồn rồi chỉnh sửa, để tên layer được giữ nguyên.

Lỗi 4: Quên trạng thái cuộn. Với trang dài, đặt thuộc tính Overflow → Vertical scrolling cho frame, nếu không nội dung sẽ bị cắt cứng khi present.

Mẹo lớn — đừng cố làm "100% thật". Cám dỗ lớn nhất với người mới là muốn mọi nút đều bấm được, mọi ô input đều gõ được. Đừng. Hãy dựng prototype theo nguyên tắc "happy path" — chỉ cần luồng chính đi trơn tru để minh họa ý tưởng. Một prototype 80% giá trị mất 2 giờ; cố lên 100% có khi mất 2 ngày mà chẳng ai cần. Bạn đang thiết kế, không phải lập trình.

Mẹo về Interactive Components. Khi đã quen, hãy chuyển các tương tác lặp lại (nút hover, toggle, checkbox) vào Interactive Components — gắn tương tác ngay trong component để dùng lại khắp file, thay vì nối tay từng nơi. Điều này tiết kiệm rất nhiều công khi prototype lớn dần.

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

Luồng cơ bản (bắt buộc): Dựng một prototype gồm 3 frame — Trang chủ, Trang sản phẩm, Giỏ hàng. Nối nút "Xem chi tiết" (Navigate to) và nút "Thêm vào giỏ" (Navigate to). Đặt flow starting point ở Trang chủ, đặt tên flow là "Luồng mua hàng", rồi present thử.

Overlay (nâng nhẹ): Thêm một frame Modal xác nhận nhỏ. Khi bấm "Thêm vào giỏ", thay vì chuyển trang, hãy Open overlay hiện popup "Đã thêm vào giỏ" ở chính giữa, có nền tối phía sau và tự đóng khi bấm ra ngoài.

Smart Animate (thử thách): Tạo hai variant của một nút (bình thường và phóng to). Dùng trigger On Hover + Smart Animate để nút phình nhẹ khi rê chuột. Cảm nhận sự khác biệt giữa Instant và Smart Animate.

Chia sẻ & nhận feedback: Bật Share prototype, gửi link cho ít nhất 2 người (bạn bè, đồng môn) và ghi lại 3 điểm họ thấy khó hiểu hoặc bấm nhầm. Đây là bước quan trọng nhất — prototype sinh ra là để được người khác bấm thử.

Tóm tắt

Prototyping trong Figma là cây cầu nối giữa thiết kế tĩnh và sản phẩm thật. Bằng cách thêm lớp tương tác chồng lên các frame, bạn mô phỏng được luồng đi của người dùng, kiểm chứng ý tưởng và thuyết phục người khác — tất cả trước khi viết bất kỳ dòng code nào.

Hãy nhớ công thức cốt lõi Trigger → Action → Destination: chọn phần tử, mở tab Prototype, kéo connection, chọn kiểu kích hoạt và chuyển cảnh. Dùng Navigate to cho chuyển trang, Open overlay cho modal và menu, Smart Animate cho chuyển động mượt mà giữa các phần tử trùng tên. Đặt flow starting point, đặt tên flow rõ ràng, chọn đúng device, rồi present và chia sẻ link.

Quan trọng nhất, đừng sa đà vào việc làm prototype hoàn hảo 100%. Mục tiêu là truyền đạt ý tưởng và phát hiện vấn đề sớm với chi phí thấp nhất. Như ba ví dụ đã thấy — từ sàn thương mại điện tử quyết định luồng mua hàng, startup fintech truyền đạt onboarding cho team ở xa, đến freelancer chốt hợp đồng — một prototype tốt không chỉ là bản demo, mà là công cụ ra quyết định và bán hàng mạnh mẽ trong bộ kỹ năng của bạn. Bài tiếp theo, ta sẽ rời Figma để bàn về Wireframing — bước phác thảo ý tưởng còn trước cả khi mở phần mềm thiết kế.