LanguageTürkçe
Sütun 02 · Hareket Tasarımı Kılavuzu
Figma Motion: Neleri Yapabilir ve Yapamaz (ve Üretim için Ne Kullanılmalı)
Figma Motion, Figma içindeki hareketi tasarlamanın en hızlı yoludur. ExodeUI, bu hareketin üründe durumlar, fizik ve kullanıcıdan gelen girdilerle çalıştırılması gerektiği durumlar içindir.
What is Figma Motion: in ExodeUI?
Figma Motion, Figma'in yerleşik animasyon modudur ve 24 Haziran 2026'da açık beta olarak piyasaya sürüldü. Tasarım çerçevesine bir zaman çizelgesi ekleyerek ana kare konumu, ölçek, döndürme, renk ve opaklığı gerçekleştirebilir, ardından sonucu MP4, WebM, GIF, animasyonlu SVG, Lottie veya dotLottie olarak dışa aktarabilirsiniz. Tasarım dosyasında durur: Dışa aktarılan bir animasyon ürününüzü tek başına çalıştırmaz ve durum, giriş ve veri bağlamanın yine de kodda yerleşik olması gerekir. ExodeUI, hareketin web, iOS ve Android üzerindeki gerçek bir uygulamada durumlara, fiziğe ve kullanıcıdan gelen girdilere göre çalıştırılması gerektiğinde daha iyi uyum sağlar.
Temel mimari
Mühendisler ve tasarımcılar neden ExodeUI seçiyor
Design, logic and motion in one file that runs inside your app.
Çalıştırılabilir bileşen ve dışa aktarılan klip karşılaştırması
ExodeUI çıkışı, çalışma zamanının uygulamanızda oynattığı bir .exode dosyasıdır. Figma Motion, animasyonu oynatan ancak uygulama durumunuzu taşımayan videoyu, GIF, SVG veya Lottie'i dışa aktarır.
Uygulamanıza bağlanan durum makineleri
Her kombinasyonu bir Figma çeşidi olarak tutmak yerine, boşta kalma, yükleme, başarı ve hatayı kodunuzun tetiklenmesini tetikleyen durumlar olarak modelleyin.
Girdiye yanıt veren fizik
Canlı üründe yaylar ve sürekli momentum çalışır, dolayısıyla sürükleme veya fırlatma sabit bir eğriyle değil, kullanıcının hızıyla devam eder.
Figma çalışmanızı getirin
Çerçeveler ExodeUI Figma eklentisi ile karşınıza çıkıyor, böylece Figma'te tasarlamaya devam ediyor ve etkileşimli kısmı ExodeUI'te oluşturuyorsunuz.
Nesnel değerlendirme
ExodeUI şununla nasıl karşılaştırılır: Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Çalışan bir bileşen olarak gönderilir: .exode dosyası React, React Native, SwiftUI, Flutter ve daha fazlasında oynatılır, böylece hareket elle yeniden oluşturulmaz
- Uygulamanızın çalışma zamanında başlattığı girdileri ve olayları içeren bir durum makinesi
- Canlı üründe sürükleme ve hareket hızına yanıt veren yaylar ve fizik
- Claude Code ve Cursor gibi AI kodlama araçlarının hareket dosyasını oluşturabilmesi ve düzenleyebilmesi için bir MCP sunucusu
Figma Motion
- Video, GIF, SVG veya Lottie olarak dışa aktarmadığınız sürece hareket tasarım dosyasında kalır; tek başına uygulama bileşeniniz olarak çalışmaz
- Dışa aktarılan Lottie ve dotLottie, animasyonu oynatabilir ve etkileşimli durumları format düzeyinde taşıyabilir ancak bunlar uygulama verilerinize bağlı değildir
- Figma Motion açık beta sürümündedir; Animasyonlu bileşenlerin yayınlanması, aracı oluşturma ve yüksek çözünürlüklü dışa aktarma işlemlerinin ücretli Tam lisansa ihtiyacı vardır
- 3D dönüşümler yakında duyurulacak, gönderilmeyecek
Geliştirmeye devir
Kodunuzda kullanma
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
'exodeui'den { ExodeUICanvas }'ı içe aktarın;
// Yaylar, durumlar ve zamanlama .exode dosyasında yayındadır (
// editör). Kodunuz girdileri iletir ve olayları geri duyar.
dışa aktarma işlevi FluidCard() {
dönüş (
<ExodeUICanvas
src = "/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI olayı:', name)}
/>
);
}Figma Motion nedir?
Figma Motion, Figma'in içinde tasarımınızın yanına bir animasyon zaman çizelgesi koyan bir moddur. Figma, bunu Config 2026'da tanıttı ve 24 Haziran 2026'da kullanıma sunmaya başladı. Halen açık beta aşamasında olduğundan özellikler değişebilir. Bir kareyi Hareket moduna ve konum, ölçek, döndürme, renk, kontur genişliği, yol kırpma ve yaylar gibi ana kare özelliklerine geçirirsiniz. Animasyon ön ayarları (Karartma, Döndürme, Ölçekleme, Yeniden Boyutlandırma ve daha fazlası) ve özel stiller, hareket hızı ve zamanlama için hareket değişkenleri, bezier eğrileri ve yayları ve siz fırçalarken değişiklikleri kaydeden otomatik anahtarlama ile birlikte gelir. Daha sonraki güncellemeler zaman çizelgesine metin animasyonu ve ses ekledi. Hareket, Başlangıç dahil tüm Figma planlarında düzenleme yaparken kullanılabilir; Hükümet planlarına yönelik Figma'te bu özellik yoktur.
- Config 2026'da başlatıldı ve 24 Haziran 2026'dan itibaren açık beta olarak kullanıma sunulacak
- Zaman çizelgesi, ana kareler, hazır ayarlar, özel stiller, hareket değişkenleri ve yaylar
- Zaman çizelgesindeki metin animasyonu ve ses, 30 Eylül 2026 güncellemesinde geldi
- 3D dönüşümler çok yakında Figma Motion sayfasında listelenecek
Figma Motion'in dışa aktarabilecekleri
Animasyonlu bir kareden MP4, WebM, GIF veya animasyonlu SVG'i doğrudan Figma'ten dışa aktarabilirsiniz. 30 Eylül 2026'da Figma, Lottie ve dotLottie ihracatını da ekledi. 1920 x 1080'den büyük veya saniyede 30 karenin üzerindeki dışa aktarmalar için ücretli bir plan gerekir. Lottie dışa aktarma her şeyi desteklemez: gölgelendiriciler, video ve açısal degradeler statik görüntüler olarak ortaya çıkar ve alt gölge, gürültü ve cam gibi bazı efektler ilk kare görünümüne göre düzleştirilir; bu nedenle Figma, dosyayı kullanmayı planladığınız oynatıcıda test etmenizi önerir. Geliştirici Modu, tam hareket zaman çizelgesini gösterir ve animasyon değerlerini CSS, JSON veya React (motion.dev dahil) olarak kopyalayabilir ve Figma MCP sunucusu, animasyonları kodlama aracılarına iletir. Kodu kopyalamak ve animasyonlu bileşenleri yayınlamak için ücretli Tam lisans veya Geliştirici koltuğu gerekir.
Video ve resim
MP4, WebM, GIF ve animasyonlu SVG, ücretsiz planlarda 1920×1080 ve 30 FPS ile sınırlıdır.
Lottie ve dotLottie
30 Eylül 2026'da eklendi; gölgelendiriciler, video ve açısal degradeler desteklenmez ve bazı efektler ilk kareye düzleşir.
Kod ve aracılar
Geliştirici Modu, değerleri CSS, JSON veya React olarak kopyalar ve Figma MCP sunucusu, ücretli bir koltukta hareketi kodlama aracılarına iletir.
Figma Motion'in üretim için durduğu yer
Figma Motion, arayüzün yanında hareket tasarlama konusunda güçlüdür ve dışa aktarma ve Geliştirme Modu çıktısı, eski aktarım boşluğunun çoğunu kapatır. Sınır, dışa aktarmanın ne olduğudur: bir video, bir GIF veya bir Lottie dosyası bir oynatma varlığıdır ve Geliştirme Modundan gelen kod, geliştiricinin hâlâ bağlantı kurduğu bir pasajdır. İkisi de ürün bileşeniniz olarak tek başına çalışmaz ve uygulamanızın içindeki durumlara ve verilere bağlı değildir. Bir düğmenin boşta olması, üzerine gelinmesi, basılması, yüklenmesi, devre dışı bırakılması ve hatalı olması gerekiyorsa ve animasyonun web, iOS ve Android'deki verilere ve kullanıcı girişine tepki vermesi gerekiyorsa, bu mantığın her kod tabanında yerleşik olması gerekir. Figma Motion artık lansmanda olduğundan daha fazla hareket tasarımı ve geçiş adımını kapsıyor; çalışma zamanı adımı, kendisi için oluşturulmuş bir araca devredildiği yerdir.
Hareketin uygulamada çalıştırılması gerekiyorsa
ExodeUI, tasarımcılara, geliştiricilere ve yapay zeka aracılarına yönelik etkileşimli kullanıcı arayüzü ve animasyona yönelik bir tarayıcı ve masaüstü aracıdır. Hareketi, durum makineleri, yay fiziği, girişler ve olaylarla birlikte açık bir .exode dosyasında bir kez oluşturursunuz ve ardından React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter için çalışma zamanı paketleriyle gönderirsiniz. Kodunuz girdileri iletir ve olayları geri duyar; böylece aynı dosya platform başına yeniden oluşturulmak yerine uygulamada çalışır. MCP sunucusu, Claude Code, Cursor ve diğer yapay zeka kodlama araçlarının, dosyayı düz dildeki istemlerden oluşturmasına ve düzenlemesine olanak tanır. ExodeUI Figma eklentisi ile Figma'ten kareler getirebilirsiniz. ExodeUI yapıyoruz, dolayısıyla bu parçayı buna göre tartın.
Topic Cluster Network
İlgili kavramlar ve araçlar
ExodeUI ve Figma Motion
Çalışma süresi farkı yan yana
Figma - Exode'e genel bakış
Figma hareket çalışmasını ExodeUI'e geçirme
Hareket Geliştirme Ortamı
MDE kategorisinin tamamını keşfedin
Figma'ten Exode'e Dönüştürücü Aracı
Figma animasyon değerlerini üretim yaylarına dönüştürün
Sözlük: Bahar Fiziği
Bahar matematiği, sönüm ve sertlik açıklandı
Sorunuz mu var?
Sık sorulan sorular
Gerçek hareketle yaşayan bileşenler oluşturun.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.