Prototype là gì?

Nếu tìm kiếm từ “hướng dẫn prototype” chung chung trên internet thì phần nhiều các bạn sẽ gặp những bài viết nói về việc “nối dây” trong figma. Tuy nhiên bài viết này muốn nói về một thông tin sâu hơn, bạn có biết từ “prototype” nếu hiểu đúng nghĩa thì sẽ băt đầu từ đâu và từ khi nào không?

Nghĩa rộng trong sản xuất sản phẩm

Prototype – hay nguyên mẫu – là phiên bản thử nghiệm ban đầu của một sản phẩm, được tạo ra trước khi sản xuất đại trà. Trong các ngành công nghiệp truyền thống như ô tô, điện tử, hay hàng tiêu dùng, prototype là mô hình vật lý dùng để kiểm tra tính năng, phát hiện lỗi thiết kế, và thu thập phản hồi trước khi đưa vào dây chuyền sản xuất chính thức.

Mục đích cốt lõi của prototype không thay đổi dù ở lĩnh vực nào: kiểm chứng ý tưởng với chi phí thấp nhất có thể, trước khi đầu tư toàn bộ nguồn lực vào sản phẩm cuối.

prototype sản phẩm - digital vs sản phẩm vật lý

Nghĩa hẹp hơn với digital product

Trong thiết kế sản phẩm kỹ thuật số, prototype là bản mô phỏng tương tác của giao diện – cho phép người dùng thao tác như với sản phẩm thật (click, scroll, nhập liệu, chuyển màn hình) mà không cần viết code thực sự.

Prototype trong digital product không phải mockup tĩnh (chỉ thể hiện hình ảnh) và cũng không phải sản phẩm hoàn chỉnh. Nó nằm ở giữa: đủ để test, đủ để trình bày, nhưng không mất nhiều công sức như việc build thật.

Các mức độ prototype trong digital design thường được phân thành:

  • Low-fidelity prototype: Wireframe đơn giản, ít chi tiết, dùng để kiểm tra flow và cấu trúc thông tin
  • Mid-fidelity prototype: Có layout cụ thể, chưa có visual design hoàn chỉnh
  • High-fidelity prototype: Gần với sản phẩm thật về mặt hình ảnh, thường dùng để test với người dùng cuối hoặc trình bày với stakeholder

Ý nghĩa của việc tạo prototype

Prototype giải quyết một vấn đề cụ thể trong quy trình phát triển sản phẩm: phát hiện lỗi thiết kế trước khi code.

Khi một vấn đề về UX được phát hiện ở giai đoạn prototype, chi phí sửa là thời gian của designer. Khi vấn đề đó chỉ được phát hiện sau khi đã code xong, chi phí sửa là thời gian của cả team – designer, developer, và QA.

Ngoài ra, prototype còn phục vụ các mục đích thực tế khác:

  • Usability testing: Đưa prototype cho người dùng thực tế thao tác, quan sát điểm vấp váp và hành vi thực tế
  • Stakeholder presentation: Trình bày ý tưởng với client hoặc ban lãnh đạo bằng bản demo có thể tương tác – thuyết phục hơn nhiều so với slideshow
  • Developer handoff: Cung cấp cho developer bức tranh rõ ràng về flow, transition, và behavior của từng element

Cách tạo Prototype trong Figma

Trước đây vào những năm 2015~16 khi prototype chưa phải là một tiêu chuẩn của các công cụ thiết kế trên thị trường thì khách hàng hoặc stakeholder sẽ hình dung hoặc xem các tính năng thông qua trình bày từ designer. Trong một số môi trường chuyên nghiệp hơn, product team sẽ sử dụng các tool tạo prototype độc lập như invision, hoặc dùng after effect để tạo video minh họa. Tuy nhiên khi figma ra đời, việc thiết kế UI và tích hợp prototype design trở thành một tiêu chuẩn làm việc mới. Cùng xem cách tạo prototype trong figma sẽ như thế nào. Đây là một hướng dẫn prototype khái quát khi dùng figma.

Cách cơ bản – Figma Prototype Tool

Figma có sẵn tab Prototype nằm trong panel bên phải, ngay cạnh tab Design và Inspect. Đây là công cụ chính để tạo prototype không cần code trong Figma. Dễ hiểu thì Figma sẽ tạo ra những hoạt động preview và load những màn hình đã được thiết kế của mình lên trên một mô phỏng thiết bị.

Dù hiện nay có rất nhiều những AI tool có thể hỗ trợ nhanh việc prototype, tuy nhiên giá trị trực quan của việc nhìn thấy flow của thiết kế trên figma vẫn có giá trị của nó. Vậy nên trong quá trình đào tạo sử dụng Figma, TELOS vẫn giữ nội dung này ở trong nội dung học của mình để học viên có thể hiểu được nguyên lý thiết kế rồi mới đến việc tận dụng AI sau.

Interaction là đơn vị cơ bản nhất của prototype trong Figma.

Mỗi interaction được thể hiện bằng một mũi tên nối từ một element (hoặc cả frame) sang một frame khác. Khi tạo interaction, có 3 thành phần cần xác định:

  • Trigger – Hành động của người dùng kích hoạt interaction. Các trigger phổ biến: On click (nhấn), On hover (di chuột qua), On drag (kéo), After delay (tự động sau một khoảng thời gian), Mouse enter / Mouse leave.
  • Action – Điều gì xảy ra sau khi trigger được kích hoạt. Các action thường dùng: Navigate to (chuyển sang frame khác), Open overlay (mở một layer đè lên trên frame hiện tại), Swap overlay (thay thế overlay đang mở), Scroll to (cuộn đến một vị trí trong frame), Back (quay lại frame trước).
  • Animation – Hiệu ứng chuyển cảnh giữa hai trạng thái. Figma cung cấp các kiểu animation sẵn có: Instant (chuyển ngay, không animation), Dissolve (mờ dần), Smart Animate (tự động animate các layer có cùng tên giữa hai frame), Move in / Move out, Push, Slide in / Slide out. Mỗi animation có thể tùy chỉnh thời lượng (duration) và đường cong chuyển động (easing).

Smart Animate là tính năng đáng chú ý – Figma sẽ tự tìm các layer trùng tên giữa frame A và frame B, rồi tạo animation chuyển đổi mượt mà giữa hai trạng thái mà không cần cấu hình thêm. Đây là cách đơn giản nhất để tạo animation có cảm giác tự nhiên. Đây có thể xem là một trong những nguyên lý dùng để sáng tạo rất quan trọng trong figma.

Hướng dẫn prototype - đơn vị cơ bản nhất là một interaction

Có thể xem Prototype trên các hình thức nào?

Đây là một nội dung ngắn trong buổi hướng dẫn prototype

Trực tiếp trong Figma

Nhấn nút Play (hình tam giác) ở góc trên bên phải màn hình để mở Preview. Figma sẽ hiển thị prototype trong một cửa sổ riêng, cho phép tương tác đúng với các interaction đã thiết lập. Đây là cách nhanh nhất để kiểm tra flow trong khi thiết kế.

Prototype cũng có thể share qua link – mọi người nhận link đều có thể xem và tương tác mà không cần tài khoản Figma.

Dùng Figma Mirror trên thiết bị di động

Với các dự án thiết kế mobile app, xem prototype trực tiếp trên điện thoại cho kết quả đánh giá chính xác hơn so với xem trên màn hình máy tính – vì kích thước thực, tỷ lệ element, và cảm giác thao tác bằng ngón tay hoàn toàn khác.

Figma có app Figma Mirror trên cả Android và iOS. Sau khi cài app và đăng nhập cùng tài khoản, điện thoại sẽ tự hiển thị frame đang được chọn trong Figma trên máy tính – đồng bộ theo thời gian thực. Người dùng có thể tương tác với prototype như với app thật trên tay.

Mirror trên web để preview web prototype

Với prototype thiết kế cho web hoặc desktop, Figma cho phép share link prototype và xem trực tiếp trên browser. Người review có thể tương tác với đầy đủ các interaction mà không cần mở file Figma gốc.

Hướng dẫn prototype - sử dụng app figma trên mobile để preview

Dùng AI – Figma Make cho các animation phức tạp hơn

Prototype Tool cơ bản của Figma xử lý tốt các interaction thông thường. Tuy nhiên, với các animation phức tạp – ví dụ hiệu ứng vật lý, animation dựa trên data thực, hay các micro-interaction nhiều bước – việc thực hiện bằng tay trong Figma Prototype Tool sẽ tốn nhiều thời gian hoặc không khả thi.

Đọc thêm về các bài viết AI tool trong Figma:

Figma Make là giải pháp cho trường hợp này. Thay vì build animation bằng tay, người dùng dùng prompt để mô tả animation cần có và Figma Make sẽ generate code tương ứng.

Ví dụ dùng AI tạo animation với text bằng cách biến thành code layer

Quy trình ngắn gọn hay gặp:

  1. Hoàn thiện design trong Figma như bình thường
  2. Chọn frame hoặc component cần thêm animation, chọn “Send to Figma Make”
  3. Dùng prompt mô tả animation hoặc interaction cần tạo – ví dụ: “Thêm hiệu ứng loading spinner khi nhấn button”, “Tạo carousel tự chạy sau 3 giây”, “Thêm transition mờ dần khi chuyển tab”
  4. Figma Make generate code tương ứng và hiển thị kết quả ngay trong canvas
  5. Kết quả có thể copy code để chuyển cho developer phát triển tiếp, hoặc publish trực tiếp qua Figma Sites thành một trang web có thể xem trên browser

Điểm khác biệt so với prototype thông thường: output của Figma Make là code chạy được, không phải mô phỏng. Điều đó có nghĩa là animation hoạt động đúng như sản phẩm thật, và developer có thể lấy code đó làm điểm khởi đầu thay vì viết lại từ đầu.

Với các dự án website đơn giản như landing page hoặc portfolio, Figma Make kết hợp với Figma Sites cho phép đưa design lên live web mà không cần đến developer.

Prototype trong Figma tận dụng các tính năng AI

Tổng kết

Prototype là kỹ năng không thể thiếu với người làm UI/UX và Product Design. Không phải vì nó là một bước bắt buộc trong quy trình, mà vì nó là công cụ để kiểm chứng quyết định thiết kế trước khi chúng trở nên tốn kém để sửa.

Trong thực tế làm việc, designer cần thành thạo ít nhất prototype cơ bản với Figma Prototype Tool – đủ để tạo flow, test với người dùng, và handoff cho developer. Các hình thức nâng cao hơn như animation phức tạp qua Figma Make thuộc về giai đoạn tiếp theo khi đã nắm vững nền tảng.

Tại TELOS Academy, prototype cơ bản được đưa vào chương trình học Figma – kèm theo khóa Figma Prototype riêng để thực hành chuyên sâu hơn. Các kỹ thuật nâng cao kết hợp AI sẽ được học ở khóa AI for UI/UX Designer.

Hoặc bạn có thể đăng ký full lộ trình tại đây

    I. Thông tin cá nhân

    II. Lựa chọn khóa học

    TELOS Academy sẽ liên hệ với bạn trong vòng 24 giờ để hiểu rõ hơn về nhu cầu của bạn. Hãy để ý điện thoại để không bỏ lỡ cuộc gọi từ chúng mình nhé!