Figma Motion 2026: Timeline, Keyframe, Motion Variables Và Cách Handoff Animation Sang Dev Mode

Figma Motion thay đổi một điểm căn bản trong workflow product và graphic design: animation không còn phải rời file thiết kế để đi sang một công cụ khác ngay từ đầu. Motion nằm trên cùng canvas với Design, Draw và Dev Mode; khi chuyển một frame sang Motion mode, timeline xuất hiện ngay bên cạnh thiết kế.

Figma công bố Motion ngày 24/6/2026. Đến thời điểm bài viết này được biên soạn ngày 7/8/2026, đây vẫn là một trong những thay đổi đáng chú ý nhất cho designer muốn đưa chuyển động vào hệ thống component thay vì làm animation như một file “trang trí” tách biệt.

Motion không chỉ là “prototype có thêm animation”

Prototype truyền thống thường mô tả chuyển trang và interaction giữa các state. Motion đi sâu hơn vào thời gian của từng layer: khi nào xuất hiện, di chuyển bao lâu, scale ra sao, easing thế nào và nhiều chuyển động có chạy đồng thời hay nối tiếp.

Figma cho phép keyframe position, scale, rotation và opacity độc lập. Designer có thể kéo layer trên timeline để thay timing, scrub playhead để xem một thời điểm cụ thể và bật auto keyframing để ghi thay đổi khi playhead di chuyển.

Điểm này đưa Figma gần hơn với tư duy motion tool nhưng vẫn giữ cấu trúc component, variables và collaboration của design system.

1. Timeline: hãy thiết kế nhịp trước khi thêm nhiều hiệu ứng

Motion design tốt không phải là “mọi thứ đều bay vào”. Trước tiên hãy xác định nhịp: đâu là hành động chính, đâu là phản hồi phụ, element nào cần dẫn mắt trước.

Một microinteraction button có thể chỉ cần 100–200ms; một modal có thể cần entry chậm hơn một chút để người dùng nhận ra thay đổi không gian; một hero marketing có thể dùng sequence dài hơn. Con số không phải công thức cố định — mục tiêu là hierarchy.

Figma Motion có time-based comments, cho phép teammate phản hồi đúng thời điểm trên timeline. Đây là một khác biệt lớn so với comment chung kiểu “animation này hơi nhanh”: reviewer có thể chỉ đúng đoạn cần sửa.

2. Animation Styles: dùng preset để khởi động, không nên dừng ở preset

Figma cung cấp các animation style như fade, move và scale. Chúng phù hợp để dựng nhịp nhanh. Bạn có thể stack style để chạy cùng lúc hoặc sequence trên timeline.

Nhưng với sản phẩm thật, preset chỉ nên là baseline. Sau đó cần chỉnh duration, easing, delay và relationship giữa element. Nếu mọi component đều dùng cùng một fade/scale y hệt, sản phẩm dễ có cảm giác template.

3. Animated Components: component giờ mang cả hành vi chuyển động

Điểm mạnh nhất của Motion với team lớn nằm ở Animated Components. Khi animation được xây cho một component, chuyển động có thể đi cùng component qua các screen và file — tương tự fill, typography hoặc property.

Điều này thay đổi cách quản trị motion. Thay vì mỗi designer tự dựng loading, tooltip, accordion hoặc button state khác nhau, team có thể chuẩn hóa chuyển động trong library.

Với graphic designer làm campaign system, tư duy tương tự cũng hữu ích: logo sting, badge, CTA, card reveal hoặc lower-third có thể trở thành module animation tái sử dụng.

4. Motion Variables: biến easing thành design token

Figma Motion cho phép tạo motion variables, ví dụ một easing variable với nhiều mode. Khi đổi mode ở page level, những animation tham chiếu variable đó có thể cập nhật đồng loạt.

Đây là bước quan trọng vì easing vốn thường nằm rải rác dưới dạng con số hoặc cubic-bezier mà mỗi designer tự đặt. Khi easing trở thành token, bạn có thể xây hệ: motion-fast, motion-standard, motion-emphasized, ease-enter, ease-exit và áp dụng có quy tắc.

Đối với design system, motion token nên được tài liệu hóa cùng color, spacing và typography. Chuyển động cũng là một phần brand expression.

5. Shader property cũng có thể keyframe

Figma cho biết các property mà shader expose có thể được keyframe trên timeline. Điều này mở rộng motion khỏi position/opacity sang hiệu ứng hình ảnh phức tạp hơn.

Với graphic design, đây là cơ hội tạo gradient động, distortion hoặc surface effect gắn với timeline. Tuy nhiên, hãy kiểm tra performance và khả năng triển khai thực tế. Một demo đẹp không có giá trị nếu developer phải viết lại toàn bộ bằng công nghệ khác.

6. 3D transforms: phải phân biệt phần đã có và phần được công bố “coming soon”

Trong bài giới thiệu Motion, Figma mô tả 3D transforms là tính năng coming soon, với khả năng xoay frame, vector và text theo trục z. Vì vậy, không nên viết rằng Motion hiện đã có đầy đủ 3D transform chỉ dựa trên announcement này.

Đây cũng là nguyên tắc khi đọc product update: phân biệt rõ chức năng đang hoạt động với roadmap/waitlist.

7. Export MP4, GIF, SVG và WEBM: designer có thể tạo asset chuyển động trực tiếp

Figma cho biết animated frame có thể export thành MP4, GIF, SVG hoặc WEBM. Với social graphic, marketing motion và prototype demo, đây là cách nhanh để chia sẻ mà không cần mở phần mềm video cho các animation đơn giản.

Tuy nhiên hãy chọn format theo mục tiêu: MP4 cho video phổ thông; WEBM khi cần web video hiệu quả; GIF cho compatibility nhưng dung lượng và màu hạn chế; SVG phù hợp một số vector animation tùy output.

8. Dev Mode: đây là nơi Motion khác hẳn một file video tham khảo

Khi chuyển sang Dev Mode và mở Motion tab, developer có thể xem timeline, timing, easing và keyframe. Figma công bố khả năng copy animation code dưới dạng CSS, JSON hoặc code hướng React/motion.dev.

Điều này giải quyết một lỗi handoff lâu năm: designer gửi video “trông như thế này” nhưng developer phải đoán duration và easing. Với Motion, thông số trở nên inspectable.

Figma cũng nói Motion tương thích với MCP, cho phép chia sẻ link animated frame với coding agent cùng motion context. Với team dùng AI coding, đây có thể giảm việc viết lại mô tả animation bằng văn bản.

9. Motion review cần checklist riêng

Đừng review motion chỉ bằng câu hỏi “đẹp không?”. Hãy kiểm tra: hierarchy có rõ không; animation có giúp hiểu state change không; duration có cản thao tác không; motion có gây khó chịu khi lặp nhiều lần không; focus/keyboard state có hợp lý không; reduced-motion strategy là gì; mobile performance ra sao.

Accessibility đặc biệt quan trọng. Chuyển động lớn, parallax hoặc zoom mạnh có thể gây khó chịu cho một số người dùng. Production UI nên có chiến lược tôn trọng prefers-reduced-motion khi phù hợp.

10. Một workflow Figma Motion thực tế cho team sản phẩm

1. Hoàn thiện state và component trước khi animate.
2. Xác định 3–5 motion principle cho brand/product.
3. Tạo token về duration và easing bằng variables.
4. Dựng animation trên component thay vì từng màn hình rời.
5. Dùng timeline để chỉnh hierarchy và sequence.
6. Review bằng time-based comments.
7. Test breakpoint và reduced motion.
8. Handoff qua Dev Mode, giữ timing/easing inspectable.
9. So sánh implementation với frame Motion trước khi ship.

Figma Motion phù hợp với ai?

Product designer: microinteraction, state transition, prototyping và handoff. Motion designer: chuẩn hóa animation trong design system và cộng tác trực tiếp với product team. Graphic designer: banner, card, logo/brand asset và social motion đơn giản. Developer: inspect thông số và lấy code/handoff rõ ràng hơn.

Nó không thay thế After Effects hoặc công cụ animation chuyên sâu cho mọi trường hợp. Composite phức tạp, character animation, video edit và VFX vẫn cần tool chuyên dụng. Giá trị của Motion nằm ở chỗ đưa chuyển động vào đúng nơi quyết định sản phẩm.

Nguồn chính thức

• Figma — Introducing Figma Motion: Your canvas now has a timeline
• Figma Help Center

Kết luận

Figma Motion đáng chú ý không phải vì Figma “có timeline giống phần mềm animation”, mà vì timeline nằm trong cùng hệ thống component, variables, comments và Dev Mode. Motion vì thế có thể trở thành một phần của design system, được review và handoff như typography hoặc spacing.

Với team làm sản phẩm, đây là thay đổi lớn: designer không còn chỉ bàn giao hình tĩnh và video tham khảo; developer có thể đọc chính timing, easing và keyframe. Với graphic designer, nó mở ra một workflow motion nhẹ, nhanh và gắn chặt với asset design mà không phải rời canvas quá sớm.