Mở đầu — vì sao bài này quan trọng
Ở bài trước, bạn đã làm quen với paper prototyping — cách dùng giấy và bút để kiểm tra ý tưởng với chi phí gần như bằng không. Paper prototype tuyệt vời để bắt đầu, nhưng nó có một giới hạn: bạn không thể đưa nó cho khách hàng ở xa, không thể đo lường hành vi nhấp chuột, và nó không "trông giống" sản phẩm thật đủ để người dùng phản hồi nghiêm túc về luồng trải nghiệm. Đây chính là khoảng trống mà Figma interactive prototype lấp đầy.
Figma là công cụ thiết kế giao diện (UI design) chạy hoàn toàn trên trình duyệt, đã trở thành tiêu chuẩn ngành trong vài năm gần đây. Điều khiến Figma đặc biệt giá trị với người làm MVP không phải là khả năng vẽ đẹp, mà là tính năng prototype tương tác: bạn nối các màn hình lại với nhau bằng những liên kết bấm được, thêm chuyển động, rồi gửi một đường link để bất kỳ ai cũng có thể "bấm thử" sản phẩm như thật — mà chưa cần viết một dòng code nào.
Với người làm sản phẩm tại Việt Nam, nơi nguồn lực kỹ thuật thường khan hiếm và đắt đỏ, một prototype Figma tốt là vũ khí cực mạnh. Nó cho phép bạn kiểm tra luồng đăng ký, luồng thanh toán, luồng đặt hàng với người dùng thật — thu thập phản hồi quý giá — trước khi đốt ngân sách thuê developer. Bạn tiết kiệm được hàng chục triệu đồng và nhiều tuần lập trình chỉ để phát hiện ra rằng người dùng không hiểu nút "Tiếp tục" nằm ở đâu. Trong bài này, chúng ta sẽ đi sâu vào cách biến một bộ màn hình tĩnh thành trải nghiệm có thể bấm thử, để bài kiểm thử tiếp theo của bạn cho ra dữ liệu thực sự đáng tin.
Khái niệm cốt lõi
Figma là gì và các gói dịch vụ
Figma là công cụ thiết kế cộng tác theo thời gian thực — nhiều người có thể cùng chỉnh sửa một file giống như Google Docs. Bạn cần hiểu rõ các gói để chọn đúng cho giai đoạn MVP:
- Gói Free (Starter): Miễn phí, cho phép tạo tối đa 3 file thiết kế (Figma design), số người cộng tác không giới hạn để xem và bình luận. Đủ dùng cho hầu hết người mới bắt đầu hoặc nhóm nhỏ chỉ làm một sản phẩm tại một thời điểm. Giới hạn lớn nhất là số file và lịch sử phiên bản chỉ lưu 30 ngày.
- Gói Pro (Professional): Khoảng 12–16 USD/người/tháng. Mở khóa số file không giới hạn, lịch sử phiên bản (version history) vĩnh viễn, thư viện component dùng chung, và quyền chia sẻ chi tiết hơn. Đây là gói hợp lý khi bạn làm nhiều dự án hoặc nhóm bắt đầu chuyên nghiệp hóa.
- Gói Organization / Enterprise: Dành cho công ty lớn, có quản lý tài khoản tập trung (SSO), phân quyền theo nhóm, thư viện design system toàn tổ chức và bảo mật nâng cao. Ở giai đoạn MVP bạn gần như không cần đến gói này.
Phân biệt Frame, Flow và Connection
Để dựng prototype, bạn cần nắm ba khái niệm nền tảng:
- Frame (khung màn hình): Mỗi frame là một màn hình của ứng dụng — ví dụ màn hình đăng nhập, màn hình danh sách sản phẩm, màn hình giỏ hàng. Bạn thiết kế nội dung bên trong từng frame.
- Connection (liên kết tương tác): Là sợi dây nối từ một phần tử (nút bấm, icon, vùng bấm) ở frame này sang frame khác. Khi người dùng bấm phần tử đó trong chế độ Present, Figma sẽ chuyển sang frame đích. Mỗi connection có một trigger (điều kiện kích hoạt: On Click, On Drag, While Hovering…) và một action (hành động: Navigate To, Open Overlay, Scroll To, Back…).
- Flow (luồng): Là điểm bắt đầu của một chuỗi màn hình. Một file Figma có thể chứa nhiều flow độc lập — ví dụ "Luồng đăng ký", "Luồng đặt hàng", "Luồng thanh toán" — để bạn kiểm thử từng kịch bản riêng biệt.
Mức độ trung thực (fidelity) phù hợp với MVP
Một sai lầm phổ biến là cố làm prototype quá hoàn hảo. Với MVP, hãy nghĩ theo hai cấp độ:
- Low-fidelity (wireframe có tương tác): Khối xám, hộp chữ nhật, chữ placeholder — nhưng các nút vẫn bấm được và chuyển màn hình. Phù hợp khi bạn kiểm tra logic luồng (người dùng có hiểu phải đi đâu tiếp không).
- High-fidelity (gần giống thật): Có màu sắc, hình ảnh, font, micro-interaction. Phù hợp khi bạn kiểm tra cảm nhận, độ tin cậy và quyết định mua/đăng ký.
Smart Animate — linh hồn của prototype tương tác
Smart Animate là tính năng tự động tạo chuyển động mượt giữa hai frame dựa trên các phần tử trùng tên. Nếu một nút ở frame A và frame B có cùng tên layer nhưng khác vị trí/kích thước, Figma sẽ tự "diễn hoạt" sự thay đổi đó — tạo cảm giác như ứng dụng thật đang phản hồi. Đây là thứ biến một slideshow tĩnh thành trải nghiệm sống động khiến người test quên rằng họ đang bấm vào bản mô phỏng.
Tình huống thực tế
Ví dụ 1 — Startup giao đồ ăn ở Đà Nẵng kiểm thử luồng đặt hàng
Một nhóm ba người ở Đà Nẵng muốn làm app đặt đồ ăn chay tên "GreenBite". Trước khi thuê developer (báo giá khoảng 80 triệu đồng cho bản đầu tiên), họ dựng prototype Figma trong 4 ngày: 9 frame từ màn hình mở app, danh sách quán, chi tiết món, giỏ hàng, đến xác nhận đặt hàng. Họ dùng Smart Animate cho hiệu ứng thêm món vào giỏ "bay" lên góc phải.
Họ mang link prototype đến một quán cà phê và nhờ 8 người lạ bấm thử trên điện thoại. Kết quả gây sốc: 6/8 người không tìm thấy nút "Đặt món chay theo combo" vì nó nằm ẩn dưới một tab phụ. Nếu đây là code thật, việc sửa lại sẽ tốn ít nhất một tuần và thêm chi phí. Nhưng vì chỉ là Figma, họ kéo nút lên màn hình chính trong 20 phút và test lại ngay buổi chiều — lần này 7/8 người tìm thấy.
Bài học: Một prototype bấm được giúp phát hiện lỗi luồng trước khi viết code, biến phản hồi từ "cảm tính" thành quan sát hành vi cụ thể.
Ví dụ 2 — Quỹ đầu tư yêu cầu xem prototype thay vì slide
Một founder làm nền tảng quản lý phòng khám nha khoa tại TP.HCM gọi vốn vòng hạt giống. Nhà đầu tư nói thẳng: "Đừng cho tôi xem slide nữa, cho tôi bấm thử." Trong hai ngày, founder dựng một prototype Figma high-fidelity mô phỏng dashboard quản lý lịch hẹn, với dữ liệu giả trông như thật và vài micro-interaction khi bác sĩ kéo-thả lịch.
Khi nhà đầu tư cầm điện thoại bấm thử, họ cảm nhận được sản phẩm "đã tồn tại" dù thực tế chưa có một dòng backend nào. Cuộc gặp kết thúc bằng cam kết đầu tư 1,5 tỷ đồng. Điều then chốt: prototype không cần thật, nó chỉ cần đủ thuyết phục để mô phỏng giá trị.
Bài học: Prototype Figma là công cụ kể chuyện mạnh mẽ. Một trải nghiệm bấm được tạo niềm tin tốt hơn nhiều so với mô tả bằng lời.
Ví dụ 3 — Sai lầm vì làm quá đẹp
Một nhóm sinh viên ở Hà Nội làm app học tiếng Anh đã dành ba tuần để hoàn thiện prototype Figma với animation cực kỳ công phu, đổ bóng tinh tế, hơn 40 frame. Khi cuối cùng đem đi test, họ phát hiện ý tưởng cốt lõi — học qua flashcard kết hợp game — không hấp dẫn người dùng. Toàn bộ ba tuần tô vẽ trở nên vô nghĩa vì họ đã kiểm thử sai thứ.
Bài học: Tốc độ test ý tưởng cốt lõi quan trọng hơn vẻ đẹp. Lẽ ra họ nên dựng prototype low-fidelity trong một ngày, xác nhận sức hút của ý tưởng, rồi mới đầu tư công sức làm đẹp.
Hướng dẫn từng bước
Dưới đây là quy trình dựng một interactive prototype từ đầu:
Bước 1 — Tạo file và đặt khung màn hình. Mở Figma, tạo file mới. Nhấn phím tắt F để chọn công cụ Frame, rồi chọn kích thước thiết bị có sẵn ở panel bên phải (ví dụ iPhone 14 — 390×844px). Tạo đủ số frame tương ứng số màn hình trong luồng bạn muốn test.
Bước 2 — Thiết kế nội dung từng frame. Đặt nút, văn bản, hình ảnh vào từng frame. Ở giai đoạn này hãy giữ low-fidelity nếu chỉ test luồng. Quan trọng: đặt tên layer rõ ràng và nhất quán giữa các frame (ví dụ nút "btn-dathang" giữ nguyên tên ở mọi màn hình) — điều này giúp Smart Animate hoạt động sau này.
Bước 3 — Chuyển sang tab Prototype. Ở panel bên phải, bạn thấy ba tab: Design, Prototype, Inspect. Chọn Prototype. Giao diện chuyển sang chế độ nối liên kết.
Bước 4 — Nối các liên kết. Chọn một nút, bạn sẽ thấy một dấu cộng tròn xuất hiện ở cạnh phần tử. Kéo sợi dây từ dấu cộng đó đến frame đích. Một bảng cài đặt hiện ra: chọn Trigger = On Click (hoặc On Tap trên mobile) và Action = Navigate To.
Bước 5 — Thêm hiệu ứng chuyển cảnh. Trong cùng bảng đó, ở mục Animation, chọn kiểu chuyển: Instant (chuyển ngay), Move In / Push (trượt vào — hợp với điều hướng), hoặc Smart Animate (tự diễn hoạt). Đặt thời lượng khoảng 200–300ms để cảm giác tự nhiên, không quá chậm.
Bước 6 — Đặt điểm bắt đầu của Flow. Chọn frame đầu tiên, ở tab Prototype tìm mục "Flow starting point" và nhấn dấu cộng. Đặt tên flow (ví dụ "Luồng đặt hàng"). Bạn có thể tạo nhiều flow trong một file.
Bước 7 — Chạy thử. Nhấn nút Present (biểu tượng tam giác play ở góc trên phải) để vào chế độ trình chiếu và tự bấm thử toàn bộ luồng. Sửa ngay những liên kết bị lỗi hoặc thiếu.
Bước 8 — Chia sẻ link để test. Nhấn Share, đặt quyền "Anyone with the link can view", sao chép link. Người nhận chỉ cần mở trình duyệt là bấm thử được, không cần tài khoản Figma. Để test trên điện thoại đúng cảm giác thật, hãy hướng dẫn người dùng mở link rồi nhấn vào chế độ trình chiếu toàn màn hình.
Lỗi thường gặp & mẹo
Lỗi 1 — Quên nối liên kết "Back". Người test bấm vào màn hình chi tiết rồi muốn quay lại nhưng không có đường về, dẫn đến cảm giác bế tắc và phản hồi sai lệch. Mẹo: luôn thêm action "Back" cho mọi nút quay lại, và kiểm tra toàn bộ luồng theo cả hai chiều trước khi gửi.
Lỗi 2 — Smart Animate không chạy. Nguyên nhân gần như luôn là do tên layer ở hai frame không trùng nhau. Mẹo: cách an toàn nhất là copy frame cũ rồi chỉnh sửa, thay vì vẽ lại frame mới từ đầu — tên layer sẽ tự động giữ nguyên.
Lỗi 3 — Làm quá nhiều màn hình "chết". Bạn dựng 30 frame nhưng chỉ 8 frame có liên kết, khiến người test bấm vào nút "không phản hồi" và bối rối. Mẹo: chỉ dựng đúng những màn hình nằm trong kịch bản test. Với các nút phụ chưa làm, có thể thêm ghi chú nhỏ "chưa hoạt động" hoặc nối tạm về chính nó.
Lỗi 4 — Test trên màn hình laptop nhưng sản phẩm là app mobile. Cảm giác bấm bằng chuột rất khác bấm ngón tay. Mẹo: luôn test trên đúng thiết bị mục tiêu. Figma có app mobile và tính năng "Mirror" để xem prototype trực tiếp trên điện thoại của bạn.
Mẹo nâng cao — Dùng Overlay cho popup. Thay vì tạo một frame mới cho mỗi hộp thoại xác nhận, dùng action Open Overlay để hiển thị popup chồng lên màn hình hiện tại. Cảm giác giống app thật hơn và đỡ phải nhân bản frame nền.
Mẹo về dữ liệu giả. Đừng dùng "Lorem ipsum" hay "Sản phẩm A, B, C". Hãy dùng tên món, giá tiền VNĐ, hình ảnh thật. Dữ liệu trông thật làm tăng mạnh độ chân thực và chất lượng phản hồi.
Bài tập thực hành
Hãy chọn một sản phẩm bạn đang ấp ủ (hoặc dùng ví dụ: app đặt lịch cắt tóc) và thực hiện:
- Xác định một luồng quan trọng nhất cần kiểm thử — ví dụ từ lúc mở app đến khi đặt lịch thành công. Viết ra các bước bằng giấy trước (3–6 màn hình).
- Dựng các frame trong Figma với mức low-fidelity. Đặt tên layer nhất quán. Mục tiêu: hoàn thành trong tối đa 90 phút.
- Nối liên kết tương tác cho toàn bộ luồng, dùng ít nhất một hiệu ứng Smart Animate và một Overlay (ví dụ popup "Xác nhận đặt lịch").
- Tạo flow starting point và chạy thử bằng nút Present để chắc chắn không có nút "chết".
- Chia sẻ link và nhờ ít nhất 3 người thật bấm thử trên điện thoại. Với mỗi người, hãy im lặng quan sát, ghi lại chỗ họ ngập ngừng hoặc bấm sai. Không gợi ý, không giải thích.
- Tổng hợp 3 phát hiện lớn nhất và sửa lại prototype dựa trên đó.
Tóm tắt
Figma interactive prototype là cầu nối giữa ý tưởng trên giấy và sản phẩm code thật. Nó cho phép bạn kiểm thử luồng trải nghiệm với người dùng thật, thuyết phục nhà đầu tư, và phát hiện lỗi thiết kế — tất cả trước khi tốn tiền lập trình. Hãy ghi nhớ những điểm cốt lõi:
- Bắt đầu với gói Free (3 file, đủ cho MVP); nâng lên Pro khi cần nhiều file và lịch sử phiên bản.
- Nắm vững Frame, Connection (trigger + action), và Flow — đó là bộ ba nền tảng.
- Chọn mức độ trung thực vừa đủ để trả lời câu hỏi đang đặt ra; đừng tô vẽ quá sớm.
- Dùng Smart Animate và Overlay để tạo cảm giác như app thật, nhưng nhớ đặt tên layer nhất quán.
- Luôn test trên đúng thiết bị mục tiêu với người dùng thật, và quan sát thay vì giải thích.