Làm một cái thanh trượt (Slider/Carousel) trong Figma thì dễ: Chỉ cần bật chế độ “Horizontal Scrolling” là xong. Nhưng để làm một cái slider có hồn, chuyển động mượt mà, có hiệu ứng focus (phóng to/thu nhỏ) khi lướt qua… thì lại là bài toán khó khiến nhiều Designer vò đầu bứt tai.

Nếu bạn đang tìm kiếm sự hoàn hảo trong từng cú vuốt, bản mẫu Smooth Carousel chính là tài liệu tham khảo không thể chất lượng hơn. Đến từ Figmatelier – cái tên bảo chứng cho những kỹ thuật Prototype cao cấp, file này sẽ cho bạn thấy sức mạnh thực sự của Interactive Components.

1. Trong “chiếc hộp” này có gì?

Dù tác giả khiêm tốn ghi chú đây là bản “WIP” (Work In Progress – Đang hoàn thiện), nhưng chất lượng của nó đã vượt xa nhiều mẫu slider thông thường.

  • Độ mượt chuẩn mực (Smoothness): Khác với kiểu cuộn trang thông thường, prototype này sử dụng kỹ thuật Smart Animate kết hợp với Interactive Components. Kết quả là hiệu ứng chuyển cảnh giữa các thẻ (cards) cực kỳ êm ái, có độ trễ và gia tốc tự nhiên như trên App thật.
  • Tư duy logic cao cấp: File không chỉ là các Frame nối nhau. Nó chứa đựng cách tư duy xử lý các trạng thái (States) của một Component khi được kéo (Drag) hoặc bấm (Click). Đây là mỏ vàng kiến thức cho những ai muốn học sâu về logic trong Figma.
  • Tiềm năng mở rộng: Vì đang là bản WIP, cấu trúc của nó khá tinh gọn, giúp bạn dễ dàng bóc tách để hiểu nguyên lý hoạt động cốt lõi mà không bị rối bởi quá nhiều chi tiết trang trí.

Bạn có thể tìm resource này bằng cách:

2. Hướng dẫn khai thác tối đa

Đây là một file thiên về kỹ thuật (Technical Demo), nên cách dùng tốt nhất là học hỏi tư duy:

  • Bước 1: Lấy về (Duplicate): Mở link resource và nhấn “Open in Figma” để nhân bản file về Drafts.
  • Bước 2: Soi “dây điện” (Inspect Interaction):
    • Chuyển sang tab Prototype (Shift + E).
    • Click vào các Component để xem tác giả đang dùng sự kiện gì: On Drag hay After Delay? Đường cong chuyển động (Easing) là Ease-in-out hay Custom Bezier? Chính những thông số này tạo nên độ mượt “thần thánh”.
  • Bước 3: Tái sử dụng (Reuse): Copy Component chính sang dự án của bạn, sau đó dùng tính năng “Swap Instance” để thay thế hình ảnh bên trong bằng thiết kế của bạn. Vậy là bạn đã có ngay một cái slider xịn sò mà không cần setup lại từ đầu.

3. Kết luận

Smooth Carousel là minh chứng cho việc Figma có thể làm được những prototype tiệm cận với code thật nếu biết cách khai thác.

Đừng chấp nhận những slider giật cục nhàm chán nữa. Hãy tải file này về để nâng cấp trải nghiệm người dùng (UX) cho dự án của bạn, hoặc đơn giản là để học lỏm bí kíp từ các cao thủ Figmatelier.