LanguageTiếng Việt
Trụ cột 02 · Hướng dẫn thiết kế chuyển động
Figma Motion: Nó có thể và không thể làm gì (và sử dụng gì cho sản xuất)
Figma Motion là cách nhanh nhất để thiết kế chuyển động bên trong Figma. ExodeUI dành cho khi chuyển động đó phải chạy trong sản phẩm, với các trạng thái, vật lý và đầu vào từ người dùng.
What is Figma Motion: in ExodeUI?
Figma Motion là chế độ hoạt ảnh tích hợp của Figma, được ra mắt trong phiên bản beta mở vào ngày 24 tháng 6 năm 2026. Chế độ này thêm dòng thời gian vào khung thiết kế để bạn có thể định vị khung hình chính, chia tỷ lệ, xoay, màu sắc và độ mờ, sau đó xuất kết quả dưới dạng MP4, WebM, GIF, SVG hoạt hình, Lottie hoặc dotLottie. Nó dừng ở tệp thiết kế: hoạt ảnh được xuất không tự chạy sản phẩm của bạn và liên kết trạng thái, đầu vào và dữ liệu vẫn phải được xây dựng trong mã. ExodeUI phù hợp hơn khi chuyển động phải chạy trong ứng dụng thực trên web, iOS và Android, được điều khiển bởi các trạng thái, vật lý và đầu vào từ người dùng.
Kiến trúc cốt lõi
Vì sao kỹ sư và nhà thiết kế chọn ExodeUI
Design, logic and motion in one file that runs inside your app.
Thành phần có thể chạy được so với clip đã xuất
Đầu ra ExodeUI là tệp .exode mà thời gian chạy sẽ phát trong ứng dụng của bạn. Figma Motion xuất video, GIF, SVG hoặc Lottie, phát hoạt ảnh nhưng không mang trạng thái ứng dụng của bạn.
Máy trạng thái được kết nối với ứng dụng của bạn
Mô hình không hoạt động, đang tải, thành công và lỗi dưới dạng các trạng thái có trình kích hoạt mã của bạn sẽ kích hoạt, thay vì giữ mọi kết hợp dưới dạng biến thể Figma.
Vật lý phản ứng với đầu vào
Lò xo và động lượng liên tục chạy trong sản phẩm trực tiếp, do đó lực kéo hoặc lực ném tiếp tục theo vận tốc của người dùng chứ không phải theo một đường cong cố định.
Mang tác phẩm Figma của bạn vào
Các khung đi kèm với plugin ExodeUI Figma, vì vậy bạn tiếp tục thiết kế trong Figma và xây dựng phần tương tác trong ExodeUI.
Đánh giá khách quan
ExodeUI so với Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Vận chuyển dưới dạng thành phần đang chạy: tệp .exode phát ở dạng React, React Native, SwiftUI, Flutter, v.v., do đó chuyển động không được xây dựng lại bằng tay
- Máy trạng thái có đầu vào và sự kiện mà ứng dụng của bạn kích hoạt khi chạy
- Lò xo và vật lý phản ứng với tốc độ kéo và cử chỉ trong sản phẩm trực tiếp
- Máy chủ MCP để các công cụ mã hóa AI như Claude Code và Cursor có thể tạo và chỉnh sửa tệp chuyển động
Figma Motion
- Chuyển động tồn tại trong tệp thiết kế trừ khi bạn xuất nó dưới dạng video, GIF, SVG hoặc Lottie; nó không tự chạy như thành phần ứng dụng của bạn
- Lottie và dotLottie đã xuất có thể phát hoạt ảnh và mang các trạng thái tương tác ở cấp định dạng nhưng chúng không được kết nối với dữ liệu ứng dụng của bạn
- Figma Motion đang trong giai đoạn thử nghiệm mở; xuất bản các thành phần hoạt hình, tạo tác nhân và xuất khẩu có độ phân giải cao cần có Chỗ ngồi đầy đủ trả phí
- Biến đổi 3D được thông báo là sắp ra mắt, chưa xuất xưởng
Bàn giao cho đội phát triển
Dùng trong mã của bạn
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
nhập {ExodeUICanvas } từ 'exodeui';
// Lò xo, trạng thái và thời gian tồn tại trong tệp .exode (được thiết kế trong
// trình soạn thảo). Mã của bạn chuyển đầu vào vào và nghe lại các sự kiện.
hàm xuất FluidCard() {
trở lại (
<ExodeUIVải
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI sự kiện:', name)}
/>
);
}Figma Motion là gì
Figma Motion là một chế độ bên trong Figma đặt dòng thời gian hoạt ảnh bên cạnh thiết kế của bạn. Figma đã giới thiệu nó tại Cấu hình 2026 và bắt đầu tung ra vào ngày 24 tháng 6 năm 2026 và nó vẫn đang trong giai đoạn thử nghiệm mở nên các tính năng có thể thay đổi. Bạn chuyển khung sang Chế độ chuyển động và các thuộc tính của khung hình chính như vị trí, tỷ lệ, góc xoay, màu sắc, độ rộng nét, đường cắt và cung. Nó đi kèm với các cài đặt trước hoạt ảnh (Làm mờ, Xoay, Chia tỷ lệ, Thay đổi kích thước, v.v.) và các kiểu tùy chỉnh, các biến chuyển động để giảm bớt và định thời gian, các đường cong và lò xo đẹp hơn cũng như tự động khóa để ghi lại các thay đổi khi bạn chà. Các bản cập nhật sau này đã thêm hoạt ảnh văn bản và âm thanh trên dòng thời gian. Chuyển động khả dụng trong khi bạn chỉnh sửa trên tất cả các gói Figma, bao gồm cả Starter; Figma dành cho các kế hoạch của Chính phủ không có nó.
- Ra mắt tại Config 2026, ra mắt từ ngày 24 tháng 6 năm 2026, ở dạng beta mở
- Dòng thời gian, khung hình chính, cài đặt trước, kiểu tùy chỉnh, biến chuyển động và lò xo
- Hoạt ảnh văn bản và âm thanh trên dòng thời gian đã có trong bản cập nhật ngày 30 tháng 9 năm 2026
- Các phép biến đổi 3D được liệt kê sắp ra mắt trên trang Figma Motion
Figma Motion có thể xuất những gì
Từ khung có hoạt ảnh, bạn có thể xuất MP4, WebM, GIF hoặc SVG hoạt hình trực tiếp từ Figma. Vào ngày 30 tháng 9 năm 2026, Figma cũng đã thêm tính năng xuất Lottie và dotLottie. Xuất lớn hơn 1920 x 1080 hoặc trên 30 khung hình mỗi giây, cần có gói trả phí. Xuất Lottie không hỗ trợ mọi thứ: bóng đổ, video và chuyển màu góc xuất hiện dưới dạng hình ảnh tĩnh và một số hiệu ứng như bóng đổ, nhiễu và kính được làm phẳng theo giao diện khung hình đầu tiên, vì vậy Figma khuyên bạn nên kiểm tra tệp trong trình phát mà bạn định sử dụng. Chế độ Dev hiển thị dòng thời gian chuyển động đầy đủ và có thể sao chép các giá trị hoạt ảnh dưới dạng CSS, JSON hoặc React (bao gồm motion.dev) và máy chủ Figma MCP chuyển hoạt ảnh cho các tác nhân mã hóa. Sao chép mã và xuất bản các thành phần hoạt hình cần có ghế Full hoặc Dev trả phí.
Video và hình ảnh
MP4, WebM, GIF và SVG hoạt hình, giới hạn ở 1920×1080 và 30 FPS trên các gói miễn phí.
Lottie và dotLottie
Đã thêm vào ngày 30 tháng 9 năm 2026; trình đổ bóng, video và chuyển màu góc không được hỗ trợ và một số hiệu ứng làm phẳng khung hình đầu tiên.
Mã số và đại lý
Chế độ Dev sao chép các giá trị dưới dạng CSS, JSON hoặc React và máy chủ Figma MCP chuyển giao chuyển động cho các tác nhân mã hóa, trên một chỗ trả phí.
Nơi Figma Motion dừng sản xuất
Figma Motion rất giỏi trong việc thiết kế chuyển động bên cạnh giao diện, đồng thời xuất khẩu và đầu ra Chế độ Dev của nó sẽ thu hẹp phần lớn khoảng cách chuyển giao cũ. Giới hạn là nội dung xuất: video, tệp GIF hoặc Lottie là nội dung phát lại và mã từ Chế độ phát triển là một đoạn mã mà nhà phát triển vẫn kết nối. Cả hai đều không tự chạy như thành phần sản phẩm của bạn và cũng không bị ràng buộc với các trạng thái và dữ liệu bên trong ứng dụng của bạn. Nếu một nút không hoạt động, di chuột, nhấn, tải, tắt và bị lỗi, đồng thời hoạt ảnh phải phản ứng với dữ liệu và thông tin đầu vào của người dùng trên web, iOS và Android, thì logic đó phải được xây dựng trong mỗi cơ sở mã. Figma Motion hiện bao gồm nhiều bước thiết kế chuyển động và chuyển giao hơn so với khi ra mắt; bước thời gian chạy là nơi nó chuyển giao cho một công cụ được xây dựng cho nó.
Nếu chuyển động phải chạy trong ứng dụng
ExodeUI là một công cụ trình duyệt và máy tính để bàn dành cho giao diện người dùng và hoạt ảnh tương tác, dành cho các nhà thiết kế, nhà phát triển và tác nhân AI. Bạn xây dựng chuyển động một lần trong tệp .exode mở với các máy trạng thái, vật lý lò xo, đầu vào và sự kiện, sau đó gửi chuyển động đó cùng với các gói thời gian chạy cho React, Vue, Svelte, Angular, Solid, React Native, SwiftUI và Flutter. Mã của bạn chuyển đầu vào và nghe lại các sự kiện, do đó, cùng một tệp sẽ chạy trong ứng dụng thay vì được xây dựng lại trên mỗi nền tảng. Máy chủ MCP cho phép Claude Code, Cursor và các công cụ mã hóa AI khác tạo và chỉnh sửa tệp từ các lời nhắc bằng ngôn ngữ đơn giản. Bạn có thể đưa khung hình từ Figma vào bằng plugin ExodeUI Figma. Chúng tôi tạo ra ExodeUI, vì vậy hãy cân nhắc phần này cho phù hợp.
Topic Cluster Network
Khám phá khái niệm và công cụ liên quan
ExodeUI so với Figma Motion
Sự khác biệt về thời gian chạy cạnh nhau
Tổng quan về Figma đến Exode
Di chuyển công việc chuyển động Figma sang ExodeUI
Môi trường phát triển chuyển động
Khám phá danh mục MDE đầy đủ
Công cụ chuyển đổi Figma sang Exode
Biến các giá trị hoạt hình Figma thành lò xo sản xuất
Thuật ngữ: Vật lý mùa xuân
Giải thích toán học về lò xo, giảm xóc và độ cứng
Bạn có câu hỏi?
Câu hỏi thường gặp
Tạo component sống động với chuyển động thật.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.