LanguagePolski
Filar 02 · Przewodnik po projektowaniu ruchu
Figma Motion: co może, a czego nie może zrobić (i czego używać w produkcji)
Figma Motion to najszybszy sposób projektowania ruchu wewnątrz Figma. ExodeUI jest przeznaczony do stosowania w przypadku, gdy w produkcie musi wystąpić ruch, ze stanami, fizyką i danymi wejściowymi od użytkownika.
What is Figma Motion: in ExodeUI?
Figma Motion to wbudowany tryb animacji Figma, uruchomiony w otwartej wersji beta 24 czerwca 2026 r. Dodaje on oś czasu do klatki projektowej, dzięki czemu możesz określać położenie, skalowanie, obrót, kolor i krycie klatki kluczowej, a następnie eksportować wynik jako MP4, WebM, GIF, animowany SVG, Lottie lub dotLottie. Zatrzymuje się na pliku projektu: wyeksportowana animacja nie uruchamia produktu samodzielnie, a stan, dane wejściowe i powiązanie danych nadal muszą być wbudowane w kod. ExodeUI sprawdza się lepiej, gdy ruch musi działać w prawdziwej aplikacji internetowej, na iOS i Androidzie, sterowany stanami, fizyką i danymi wejściowymi użytkownika.
Architektura rdzenia
Dlaczego inżynierowie i projektanci wybierają ExodeUI
Design, logic and motion in one file that runs inside your app.
Uruchamialny komponent vs wyeksportowany klip
Dane wyjściowe ExodeUI to plik .exode, który środowisko wykonawcze odtwarza w Twojej aplikacji. Figma Motion eksportuje wideo, GIF, SVG lub Lottie, które odtwarza animację, ale nie informuje o stanie aplikacji.
Maszyny stanowe podłączone do Twojej aplikacji
Modeluj bezczynność, ładowanie, powodzenie i błąd jako stany z wyzwalaczami uruchamiającymi Twój kod, zamiast przechowywać każdą kombinację jako wariant Figma.
Fizyka reagująca na dane wejściowe
W żywym produkcie działają sprężyny i ciągły pęd, więc przeciąganie lub rzucanie trwa z prędkością użytkownika, a nie po ustalonej krzywej.
Przynieś swoje Figma do pracy
Ramki spotykają się z wtyczką ExodeUI Figma, więc projektujesz dalej w Figma, a część interaktywną budujesz w ExodeUI.
Obiektywna ocena
Jak ExodeUI porównuje się z Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Dostarczany jako działający komponent: plik .exode jest odtwarzany w formatach React, React Native, SwiftUI, Flutter i innych, więc ruch nie jest odtwarzany ręcznie
- Maszyna stanu z danymi wejściowymi i zdarzeniami uruchamianymi przez aplikację w czasie wykonywania
- Sprężyny i fizyka reagujące na prędkość przeciągania i gestów w produkcie na żywo
- Serwer MCP, dzięki któremu narzędzia do kodowania AI, takie jak Claude Code i Cursor, mogą tworzyć i edytować plik ruchu
Figma Motion
- Ruch jest obecny w pliku projektu, chyba że wyeksportujesz go jako wideo, GIF, SVG lub Lottie; nie działa samodzielnie jako komponent aplikacji
- Wyeksportowane Lottie i dotLottie mogą odtwarzać animacje i przenosić stany interaktywne na poziomie formatu, ale nie są połączone z danymi aplikacji
- Figma Motion jest w otwartej wersji beta; publikowanie animowanych komponentów, generowanie agentów i eksportowanie w wysokiej rozdzielczości wymagają płatnego pełnego miejsca
- Ogłoszono, że transformacje 3D będą dostępne wkrótce, ale nie zostaną wysłane
Przekazanie dewelopera
Używanie go w swoim kodzie
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importuj {ExodeUICanvas} z 'exodeui';
// Sprężyny, stany i synchronizacja znajdują się w pliku .exode (zaprojektowanym w formacie
//redaktor). Twój kod przekazuje dane wejściowe i odbiera zdarzenia.
funkcja eksportu FluidCard() {
powrót (
<ExodeUIPłótno
src="/karta_płynu.bexode"
onTrigger={(nazwa) => console.log('Zdarzenie ExodeUI:', nazwa)}
/>
);
}Co to jest Figma Motion
Figma Motion to tryb w Figma, który umieszcza oś czasu animacji obok Twojego projektu. Figma wprowadził go na Config 2026 i zaczął go wdrażać 24 czerwca 2026 roku i nadal znajduje się w otwartej wersji beta, więc funkcje mogą ulec zmianie. Przełączasz klatkę do trybu ruchu i właściwości klatki kluczowej, takie jak położenie, skala, obrót, kolor, szerokość obrysu, przycięcie ścieżki i łuki. Zawiera gotowe ustawienia animacji (zanikanie, obracanie, skalowanie, zmiana rozmiaru i inne) oraz niestandardowe style, zmienne ruchu do wygładzania i synchronizacji, krzywe Beziera i sprężyny oraz automatyczne kluczowanie, które rejestruje zmiany podczas szorowania. Późniejsze aktualizacje dodały animację tekstu i dźwięk na osi czasu. Ruch jest dostępny podczas edycji we wszystkich planach Figma, w tym Starter; Figma dla planów rządowych tego nie ma.
- Uruchomiony podczas konfiguracji 2026, wdrażany od 24 czerwca 2026 r. w otwartej wersji beta
- Oś czasu, klatki kluczowe, ustawienia wstępne, style niestandardowe, zmienne ruchu i sprężyny
- Animacja tekstu i dźwięk na osi czasu pojawiły się w aktualizacji z 30 września 2026 r
- Transformacje 3D są wkrótce dostępne na stronie Figma Motion
Co Figma Motion może eksportować
Z klatki z animacją możesz wyeksportować MP4, WebM, GIF lub animowane SVG bezpośrednio z Figma. 30 września 2026 Figma dodał również eksport Lottie i dotLottie. Eksport większy niż 1920 na 1080 lub powyżej 30 klatek na sekundę wymaga płatnego planu. Eksport Lottie nie obsługuje wszystkiego: shadery, wideo i gradienty kątowe wychodzą jako obrazy statyczne, a niektóre efekty, takie jak cień, szum i szkło, są spłaszczane do wyglądu pierwszej klatki, dlatego Figma zaleca przetestowanie pliku w odtwarzaczu, którego planujesz używać. Tryb Dev pokazuje pełną oś czasu ruchu i może kopiować wartości animacji jako CSS, JSON lub React (w tym motion.dev), a serwer Figma MCP przekazuje animacje agentom kodującym. Kopiowanie kodu i publikowanie animowanych komponentów wymaga płatnego stanowiska Full lub Dev.
Wideo i obraz
MP4, WebM, GIF i animowany SVG, z ograniczeniem do 1920×1080 i 30 FPS w bezpłatnych planach.
Lottie i dotLottie
Dodano 30 września 2026 r.; shadery, wideo i gradienty kątowe nie są obsługiwane, a niektóre efekty spłaszczają się do pierwszej klatki.
Kod i agenci
Tryb deweloperski kopiuje wartości jako CSS, JSON lub React, a serwer Figma MCP przekazuje ruch agentom kodującym na płatnym stanowisku.
Miejsce zatrzymania produkcji Figma Motion
Figma Motion doskonale radzi sobie z projektowaniem ruchu obok interfejsu, a jego eksport i dane wyjściowe w trybie deweloperskim wypełniają większość starej luki w przekazywaniu. Limitem jest eksport: wideo, plik GIF lub Lottie to zasób odtwarzany, a kod z trybu deweloperskiego to fragment, który programista wciąż łączy. Żaden z nich nie działa samodzielnie jako komponent produktu i żaden nie jest powiązany ze stanami i danymi w aplikacji. Jeśli przycisk musi być bezczynny, najechany, wciśnięty, ładowany, wyłączony lub z błędem, a animacja musi reagować na dane i dane wprowadzane przez użytkownika w Internecie, iOS i Androidzie, tę logikę należy wbudować w każdą bazę kodu. Figma Motion obejmuje teraz więcej etapów projektowania ruchu i przekazywania niż w chwili premiery; etap wykonawczy polega na przekazaniu narzędzia do tego przeznaczonego.
Jeśli ruch musi być uruchamiany w aplikacji
ExodeUI to przeglądarka i narzędzie komputerowe umożliwiające interaktywny interfejs użytkownika i animacje przeznaczone dla projektantów, programistów i agentów AI. Budujesz ruch raz w otwartym pliku .exode z maszynami stanu, fizyką sprężyny, wejściami i zdarzeniami, a następnie wysyłasz go z pakietami wykonawczymi dla React, Vue, Svelte, Angular, Solid, React Native, SwiftUI i Flutter. Twój kod przekazuje dane wejściowe i ponownie słyszy zdarzenia, dzięki czemu ten sam plik jest uruchamiany w aplikacji, zamiast być odbudowywany dla każdej platformy. Serwer MCP umożliwia Claude Code, Cursor i innym narzędziom do kodowania AI tworzenie i edytowanie pliku za pomocą podpowiedzi w prostym języku. Możesz przenieść ramki z Figma za pomocą wtyczki ExodeUI Figma. Wykonujemy ExodeUI, więc odpowiednio zważ tę część.
Topic Cluster Network
Poznaj połączone koncepcje i narzędzia
ExodeUI kontra Figma Motion
Różnica w czasie wykonywania, obok siebie
Przegląd Figma do Exode
Migracja ruchu Figma do ExodeUI
Środowisko rozwoju ruchu
Poznaj pełną kategorię MDE
Narzędzie konwertujące Figma do Exode
Zmień wartości animacji Figma w sprężyny produkcyjne
Słowniczek: Fizyka Wiosny
Wyjaśniono matematykę dotyczącą sprężyn, tłumienie i sztywność
Masz pytania?
Często zadawane pytania
Buduj żywe komponenty za pomocą prawdziwego ruchu.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.