Ở
Khách hàng hoặc Sếp của bạn sẽ hỏi: "Khi bấm vào nút này thì nó đi đâu?", "Cái menu này trượt ra như thế nào?", "Cảm giác vuốt danh sách có mượt không?". Bạn không thể giải thích bằng lời, và lập trình viên (Developer) cũng không thể đoán ý bạn được.
Đây là lúc Prototyping (Tạo nguyên mẫu) và Smart Animate bước ra sân khấu.
Trong bài học này, chúng ta sẽ học cách biến các Frame tĩnh thành một ứng dụng có thể bấm, vuốt, trượt y như thật. Đây là kỹ năng phân định giữa một UI Designer (chỉ vẽ giao diện) và một Product Designer (người thiết kế trải nghiệm).
Prototyping là quá trình kết nối các màn hình (Frames) lại với nhau để mô phỏng luồng hoạt động (User Flow) của ứng dụng.
Không cần viết một dòng code nào, Figma cho phép bạn tạo ra các tương tác phong phú. Mục đích của Prototyping là:
Kiểm thử (User Testing): Đưa cho người dùng trải nghiệm thử để tìm lỗi UX trước khi code.
Thuyết trình (Presentation): Giúp Stakeholders hình dung sản phẩm cuối cùng.
Bàn giao (Handoff): Giúp Developer hiểu rõ hiệu ứng chuyển động (Animation) mà bạn muốn.
Để bắt đầu, bạn cần chuyển từ tab Design sang tab Prototype ở thanh Sidebar bên phải (Phím tắt: Shift + E).
Khi ở chế độ này, khi bạn click vào bất kỳ đối tượng nào (Frame, Button, Layer), bạn sẽ thấy một hình tròn nhỏ có dấu cộng (+) xuất hiện ở cạnh. Đây gọi là Connection Node (Điểm kết nối).
II. Các thành phần cốt lõi của một tương tác
Để tạo ra một hành động (ví dụ: Bấm nút -> Chuyển trang), bạn cần hiểu công thức:
Interaction = Trigger + Action + Animation
2.1. Trigger (Tác nhân kích hoạt)
Là hành động của người dùng để bắt đầu tương tác.
On Click / On Tap: Khi nhấm chuột hoặc chạm tay vào (Phổ biến nhất).
On Drag: Khi giữ và kéo (Dùng cho carousel, gạt nút).
While Hovering: Khi di chuột vào (Dùng cho Web, hiệu ứng Button).
While Pressing: Khi nhấn giữ chuột.
Key/Gamepad: Khi nhấn phím cụ thể (Dùng cho Web App hoặc Game).
After Delay: Tự động chuyển sau một khoảng thời gian (Dùng cho màn hình chờ Splash Screen).
2.2. Action (Hành động)
Là điều gì sẽ xảy ra sau khi kích hoạt.
Navigate to: Chuyển sang một Frame khác.
Change to: Đổi sang Variant khác (Dùng cho Interactive Components).
Open Overlay: Mở một lớp phủ lên trên (Dùng cho Popup, Modal, Alert).
Scroll to: Cuộn đến một vị trí cụ thể trong trang (Dùng cho Landing Page).
Back: Quay lại màn hình trước đó.
Open Link: Mở một đường dẫn website bên ngoài.
2.3. Animation (Hiệu ứng chuyển động)
Là cách thức chuyển đổi giữa hai trạng thái.
Instant: Chuyển ngay lập tức (Không có hiệu ứng).
Dissolve: Mờ dần (Fade in/out).
Move In / Move Out / Push / Slide: Các hiệu ứng trượt (Thường dùng cho Mobile App).
Smart Animate: (Sẽ giải thích kỹ ở phần sau).
III. Tạo kết nối đầu tiên (Flows)
Hãy thực hành một luồng đơn giản: Từ màn hình Home sang màn hình Detail.
Chọn Frame Home.
Chuyển sang tab Prototype.
Chọn cái nút hoặc tấm ảnh bạn muốn người dùng bấm vào.
Kéo hình tròn dấu cộng
(+)thả sang Frame Detail.Một bảng menu Interaction Details sẽ hiện ra. Cấu hình như sau:
Trigger: On Click.
Action: Navigate to -> Detail.
Animation: Slide In (để tạo cảm giác đi vào trang trong).
Flow Starting Point
Khi bạn tạo kết nối đầu tiên, Figma sẽ tự động gắn một cái cờ màu xanh dương có chữ "Flow 1" vào Frame bắt đầu.
Bạn có thể đổi tên Flow này thành "Luồng Đăng nhập" hoặc "Luồng Mua hàng".
Một file Figma có thể có nhiều Flow khác nhau để gửi cho các bộ phận khác nhau kiểm duyệt.
IV. Smart Animate: Phép màu của Figma
Nếu hỏi tính năng nào làm nên tên tuổi của Figma trong mảng Prototyping, đó chính là Smart Animate.
Thay vì chỉ trượt qua trượt lại các Frame một cách cứng nhắc, Smart Animate tìm kiếm các Layer giống nhau giữa điểm đầu (Frame A) và điểm cuối (Frame B), sau đó tự động tính toán và biến đổi hình dáng, vị trí, màu sắc, kích thước giữa chúng một cách mượt mà.
Ví dụ: Bạn có một hình tròn nhỏ ở Frame A, và hình tròn đó trở nên to đùng ở Frame B.
Nếu dùng Instant: Hình tròn nhỏ biến mất, hình tròn to hiện ra cái "bụp".
Nếu dùng Smart Animate: Hình tròn nhỏ sẽ từ từ "phình to" ra thành hình tròn lớn.
Nguyên tắc sống còn: Layer Name Match (Trùng tên Layer)
Để Smart Animate hoạt động, các Layer ở 2 Frame BẮT BUỘC PHẢI CÙNG TÊN và CÙNG CẤP ĐỘ GROUP/FRAME.
Frame A: Layer tên là
Rectangle 1.Frame B: Layer tên là
Rectangle 1(đã đổi màu, đổi vị trí). => Smart Animate: Hoạt động tốt.Frame A: Layer tên là
Icon Home.Frame B: Layer tên là
Icon Home Active. => Smart Animate: Không hoạt động (Nó sẽ dùng hiệu ứng Dissolve mờ dần).
Lời khuyên: Đây là lý do tại sao ở
Bài 3: Layer và Frame , tôi luôn nhắc bạn phải quản lý và đặt tên Layer gọn gàng. Sự cẩu thả trong đặt tên sẽ giết chết hiệu ứng Smart Animate.
Toggle Switch: Nút tròn chạy từ trái sang phải.
Expand Card: Bấm vào thẻ nhỏ, thẻ phóng to ra toàn màn hình.
Loading Bar: Thanh tải chạy từ 0% đến 100%.
Tab Bar: Hiệu ứng gạch chân chạy dưới các menu.
V. Scrolling và Fixed Position (Cuộn trang & Cố định)
Một lỗi sơ đẳng của người mới là thiết kế trang dài ngoằng nhưng khi chạy Prototype thì... đứng im không cuộn được.
Chọn Frame chính (Ví dụ: iPhone 14).
Ở tab Prototype, mục Scroll Behavior, chọn Vertical.
- Lưu ý: Nội dung bên trong phải dài hơn chiều cao của Frame cha thì mới cuộn được. (Xem lại khái niệm "Clip Content" ở
Bài 4 ).
Gom các thẻ sản phẩm vào một Frame (hoặc Auto Layout).
Kéo Frame bao quanh nhỏ lại (nhỏ hơn nội dung bên trong).
Chọn Clip Content.
Ở tab Prototype, chọn Overflow: Horizontal.
Fixed Position (Cố định thanh Menu)
Bạn muốn thanh Header và Footer luôn đứng yên khi người dùng cuộn nội dung?
Chọn thanh Header/Footer.
Ở tab Design, tick chọn Fix position when scrolling.
Figma sẽ tự động đưa layer này lên đầu danh sách layer để nó luôn nằm trên các nội dung khác.
VI. Interactive Components: Tương tác trong Component
Đây là tính năng nâng cao giúp giảm bớt số lượng kết nối (dây nhợ) trong bản thiết kế.
Thay vì nối Frame A sang Frame B chỉ để hiển thị cái nút bấm đổi màu hover, bạn có thể cài đặt tương tác ngay bên trong Component Set (đã học ở Bài 7).
Cách làm:
Vào Component Set của cái Button.
Nối Variant
Defaultsang VariantHover.Trigger: While Hovering.
Action: Change to ->
Hover.Animation: Smart Animate (150ms).
Kết quả: Bất cứ khi nào bạn dùng nút Button này trong thiết kế, nó sẽ tự động có hiệu ứng hover mà không cần nối dây gì thêm. Đây là sức mạnh của việc kết hợpVariants và Prototyping.
VII. Overlays (Lớp phủ)
Dùng cho Menu trượt ra (Drawer), Bàn phím ảo, hoặc Thông báo xác nhận (Modal).
Cách tạo Overlay:
Thiết kế một Frame bé hơn (ví dụ: cái bảng thông báo).
Từ nút bấm ở Frame chính, kéo dây nối vào Frame thông báo.
Action: Chọn Open Overlay.
Overlay settings:
Position: Centered (Giữa) hoặc Manual (Tự chỉnh).
Close when clicking outside: Tự đóng khi bấm ra ngoài (Rất tiện lợi).
Add background behind overlay: Thêm lớp nền đen mờ phía sau (Dim background) để làm nổi bật thông báo.
VIII. Trình chiếu và Chia sẻ (Presentation)
Sau khi hì hục nối dây, giờ là lúc tận hưởng thành quả.
Bấm nút Play (hình tam giác) ở góc trên bên phải thanh công cụ. Một tab mới sẽ mở ra hiển thị bản mô phỏng ứng dụng.
Không gì thật hơn việc trải nghiệm thiết kế Mobile trên chính chiếc điện thoại thật.
Tải app Figma trên iOS hoặc Android.
Đăng nhập cùng tài khoản.
Chọn Frame trên máy tính, nó sẽ hiện ngay lập tức trên điện thoại (Real-time).
Bạn có thể chạm, vuốt, nhập liệu như một ứng dụng thật.
Tip: Hãy luôn kiểm tra trên điện thoại thật. Nút bấm có thể trông to trên máy tính nhưng lại quá bé để ngón tay cái chạm vào trên điện thoại.
IX. Các sai lầm thường gặp khi làm Prototype
Mạng nhện (Spaghetti mess): Nối dây lung tung không quy hoạch.
Giải pháp: Sử dụng Interactive Components để xử lý các tương tác nhỏ (checkbox, switch, button), chỉ dùng dây nối Frame cho luồng đi chính (Navigation).
Quên nút Back: Người dùng đi vào trang trong nhưng không có đường quay ra -> Kẹt.
Animation quá chậm: Để thời gian chuyển cảnh 1000ms (1 giây) là quá lâu.
Chuẩn: Hover (150-200ms), Slide chuyển trang (300-450ms).
Smart Animate bị giật: Do tên layer không trùng khớp hoặc cấu trúc Group khác nhau.
X. Thực hành: Làm hiệu ứng "Gạt nút Mua hàng"
Để tổng kết, hãy làm một bài tập kết hợp Smart Animate và Drag Trigger.
Yêu cầu: Tạo một thanh trượt, khi kéo nút tròn từ trái sang phải thì hiện chữ "Đã mua".
Frame 1: Vẽ một thanh dài (Track) màu xám, một hình tròn (Knob) ở bên trái.
Frame 2: Copy Frame 1. Đổi màu thanh Track sang xanh lá. Kéo hình tròn Knob sang bên phải.
Prototype:
Nối hình tròn ở Frame 1 sang Frame 2.
Trigger: On Drag.
Action: Navigate to (hoặc Change to nếu dùng Component).
Animation: Smart Animate (Linear hoặc Ease Out).
Nếu bạn làm được điều này, chúc mừng! Bạn đã hiểu cơ chế hoạt động cốt lõi của chuyển động trong UI.
Prototyping là bước thổi hồn vào thiết kế. Nó biến những ý tưởng trừu tượng thành trải nghiệm cụ thể. Với Smart Animate, bạn có thể tạo ra những hiệu ứng "wow" mà không cần biết code.
Tuy nhiên, làm xong Prototype đẹp rồi thì làm sao gửi cho Lập trình viên để họ code ra y hệt? Làm sao để xuất file ảnh, icon đúng chuẩn? Làm sao dùng Plugins để tăng tốc công việc?
Tất cả sẽ được giải đáp trong bài cuối cùng của lộ trình cơ bản:
