LanguageBahasa Indonesia
Pilar 02 · Panduan Desain Gerak
Figma Motion: Apa yang Bisa dan Tidak Bisa Dilakukan (dan Apa yang Digunakan untuk Produksi)
Figma Motion adalah cara tercepat untuk mendesain gerakan di dalam Figma. ExodeUI adalah saat gerakan tersebut harus dijalankan di produk, dengan status, fisika, dan masukan dari pengguna.
What is Figma Motion: in ExodeUI?
Figma Motion adalah mode animasi bawaan Figma, diluncurkan dalam beta terbuka pada 24 Juni 2026. Figma Motion menambahkan garis waktu ke bingkai desain sehingga Anda dapat menentukan posisi keyframe, skala, rotasi, warna dan opasitas, lalu mengekspor hasilnya sebagai MP4, WebM, GIF, animasi SVG, Lottie, atau dotLottie. Itu berhenti di file desain: animasi yang diekspor tidak menjalankan produk Anda sendiri, dan pengikatan status, input, dan data masih harus dibuat dalam kode. ExodeUI lebih cocok ketika gerakan harus dijalankan di aplikasi nyata di web, iOS, dan Android, berdasarkan status, fisika, dan masukan dari pengguna.
Arsitektur Inti
Mengapa Insinyur & Desainer Memilih ExodeUI
Design, logic and motion in one file that runs inside your app.
Komponen yang dapat dijalankan vs klip yang diekspor
Output ExodeUI adalah file .exode yang diputar runtime di aplikasi Anda. Figma Motion mengekspor video, GIF, SVG, atau Lottie, yang memutar animasi tetapi tidak membawa status aplikasi Anda.
Mesin negara yang terhubung ke aplikasi Anda
Modelkan kondisi menganggur, pemuatan, keberhasilan, dan kesalahan sebagai status yang memicu kode Anda diaktifkan, alih-alih menahan setiap kombinasi sebagai varian Figma.
Fisika yang merespons masukan
Pegas dan momentum kontinu berjalan dalam produk langsung, sehingga tarikan atau lemparan berlanjut dengan kecepatan pengguna, bukan kurva tetap.
Bawalah karya Figma Anda
Bingkai hadir dengan plugin ExodeUI Figma, jadi Anda tetap mendesain di Figma dan membuat bagian interaktif di ExodeUI.
Evaluasi Objektif
Bagaimana ExodeUI Dibandingkan dengan Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Dikirim sebagai komponen yang berjalan: file .exode diputar di React, React Native, SwiftUI, Flutter dan banyak lagi, sehingga gerakan tidak dibuat ulang dengan tangan
- Mesin status dengan input dan peristiwa yang diaktifkan aplikasi Anda saat runtime
- Pegas dan fisika yang merespons gaya hambat dan kecepatan gerakan pada produk langsung
- Server MCP sehingga alat pengkodean AI seperti Claude Code dan Cursor dapat membuat dan mengedit file gerak
Figma Motion
- Gerakan ada dalam file desain kecuali Anda mengekspornya sebagai video, GIF, SVG, atau Lottie; itu tidak berjalan sebagai komponen aplikasi Anda sendiri
- Lottie dan dotLottie yang diekspor dapat memutar animasi dan membawa status interaktif pada tingkat format, namun tidak ditransfer ke data aplikasi Anda
- Figma Motion masih dalam versi beta terbuka; penerbitan komponen animasi, pembuatan agen, dan ekspor resolusi tinggi memerlukan kursi Penuh berbayar
- Transformasi 3D diumumkan akan segera hadir, bukan dikirimkan
Penyerahan Pengembang
Menggunakannya dalam Kode Anda
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
impor { ExodeUICanvas } dari 'exodeui';
// Pegas, status, dan pengaturan waktu ada di file .exode (dirancang di
// penyunting). Kode Anda meneruskan input dan mendengarkan kembali peristiwa.
fungsi ekspor FluidCard() {
kembali (
<ExodeUIKanvas
src="/fluid_card.bexode"
onTrigger={(nama) => console.log('ExodeUI acara:', nama)}
/>
);
}Apa itu Figma Motion
Figma Motion adalah mode di dalam Figma yang menempatkan garis waktu animasi di samping desain Anda. Figma memperkenalkannya pada Config 2026 dan mulai meluncurkannya pada 24 Juni 2026, dan masih dalam versi beta terbuka, sehingga fitur dapat berubah. Anda mengalihkan bingkai ke mode Gerak dan properti bingkai utama seperti posisi, skala, rotasi, warna, lebar guratan, trim jalur, dan busur. Ini dikirimkan dengan preset animasi (Pudar, Putar, Skala, Ubah Ukuran, dan lainnya) dan gaya khusus, variabel gerakan untuk pelonggaran dan pengaturan waktu, kurva dan pegas bezier, dan penguncian otomatis yang mencatat perubahan saat Anda menggosok. Pembaruan selanjutnya menambahkan animasi teks dan audio pada timeline. Motion tersedia saat Anda mengedit di semua paket Figma, termasuk Starter; Figma untuk rencana Pemerintah tidak memilikinya.
- Diluncurkan pada Config 2026, diluncurkan mulai 24 Juni 2026, dalam versi beta terbuka
- Garis waktu, bingkai utama, preset, gaya khusus, variabel gerakan, dan pegas
- Animasi teks dan audio di timeline hadir di pembaruan 30 September 2026
- Transformasi 3D terdaftar segera hadir di halaman Figma Motion
Apa yang dapat diekspor Figma Motion
Dari bingkai dengan animasi Anda dapat mengekspor MP4, WebM, GIF atau animasi SVG langsung dari Figma. Pada tanggal 30 September 2026 Figma menambahkan ekspor Lottie dan dotLottie juga. Ekspor yang lebih besar dari tahun 1920 hingga 1080, atau di atas 30 frame per detik, memerlukan paket berbayar. Ekspor Lottie tidak mendukung semuanya: shader, video, dan gradien sudut muncul sebagai gambar statis, dan beberapa efek seperti drop shadow, noise, dan kaca diratakan ke tampilan bingkai pertama, jadi Figma merekomendasikan pengujian file di pemutar yang ingin Anda gunakan. Mode Dev menampilkan garis waktu gerakan penuh dan dapat menyalin nilai animasi sebagai CSS, JSON, atau React (termasuk motion.dev), dan server Figma MCP meneruskan animasi ke agen pengkodean. Menyalin kode dan memublikasikan komponen animasi memerlukan kursi Penuh atau kursi Pengembang berbayar.
Video dan gambar
MP4, WebM, GIF, dan SVG animasi, dibatasi pada 1920×1080 dan 30 FPS pada paket gratis.
Lottie dan dotLottie
Ditambahkan 30 September 2026; shader, video, dan gradien sudut tidak didukung, dan beberapa efek diratakan ke frame pertama.
Kode dan agen
Mode Pengembang menyalin nilai sebagai CSS, JSON, atau React, dan server Figma MCP menyerahkan gerakan ke agen pengkodean, di kursi berbayar.
Dimana Figma Motion berhenti untuk produksi
Figma Motion kuat dalam mendesain gerakan di samping antarmuka, dan ekspor serta keluaran Mode Dev-nya menutup sebagian besar kesenjangan handoff lama. Batasannya adalah apa yang dimaksud dengan ekspor: video, file GIF, atau Lottie adalah aset pemutaran, dan kode dari Mode Dev adalah cuplikan yang masih dihubungkan oleh pengembang. Tidak ada yang berjalan sendiri sebagai komponen produk Anda, dan tidak ada yang terikat pada status dan data di dalam aplikasi Anda. Jika tombol harus diam, melayang, ditekan, memuat, dinonaktifkan, dan mengalami kesalahan, serta animasi harus bereaksi terhadap data dan input pengguna di web, iOS, dan Android, logika tersebut harus dibangun di setiap basis kode. Figma Motion kini mencakup lebih banyak desain gerak dan langkah handoff dibandingkan saat peluncuran; langkah runtime adalah saat ia menyerahkan alat yang dibuat untuknya.
Jika gerakan harus dijalankan di aplikasi
ExodeUI adalah browser dan alat desktop untuk UI dan animasi interaktif, untuk desainer, pengembang, dan agen AI. Anda membuat gerakan satu kali dalam file .exode terbuka dengan mesin status, fisika pegas, input, dan peristiwa, lalu mengirimkannya dengan paket runtime untuk React, Vue, Svelte, Angular, Solid, React Native, SwiftUI, dan Flutter. Kode Anda meneruskan input dan mendengarkan kembali peristiwa, sehingga file yang sama berjalan di aplikasi alih-alih dibuat ulang per platform. Server MCP memungkinkan Claude Code, Cursor, dan alat pengkodean AI lainnya membuat dan mengedit file dari perintah bahasa sederhana. Anda dapat memasukkan bingkai dari Figma dengan plugin ExodeUI Figma. Kami membuat ExodeUI, jadi timbang bagian ini dengan tepat.
Topic Cluster Network
Jelajahi Konsep & Peralatan yang Terhubung
ExodeUI vs Figma Motion
Perbedaan runtimenya, berdampingan
Ikhtisar Figma hingga Exode
Memigrasikan gerakan gerak Figma ke ExodeUI
Lingkungan Pengembangan Gerak
Jelajahi kategori MDE selengkapnya
Alat Konverter Figma ke Exode
Ubah nilai animasi Figma menjadi sumber produksi
Glosarium: Fisika Musim Semi
Penjelasan matematika pegas, redaman, dan kekakuan
Punya pertanyaan?
Pertanyaan yang Sering Diajukan
Membangun komponen hidup dengan gerak nyata.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.