LanguageSuomi
Pilari 02 · Liikesuunnitteluopas
Figma Motion: Mitä se voi tehdä ja mitä ei voi tehdä (ja mitä käyttää tuotannossa)
Figma Motion on nopein tapa suunnitella liikettä Figma:n sisällä. ExodeUI on tarkoitettu silloin, kun liikkeen on suoritettava tuotteessa tilojen, fysiikan ja käyttäjän syötteen kanssa.
What is Figma Motion: in ExodeUI?
Figma Motion on Figma:n sisäänrakennettu animaatiotila, joka julkaistiin avoimessa betaversiossa 24. kesäkuuta 2026. Se lisää suunnittelukehykseen aikajanan, jotta voit määrittää avainkehyksen sijainnin, skaalan, kierron, värin ja peittävyyden ja viedä tuloksen sitten MP4-, WebM-, GIF- tai animoituina ZQZX,3QZX tai dotLottie. Se pysähtyy suunnittelutiedostoon: viety animaatio ei suorita tuotettasi yksinään, ja tila, syöttö ja tiedon sidonta on silti rakennettava koodiin. ExodeUI sopii paremmin, kun liike on suoritettava todellisessa sovelluksessa verkossa, iOS:ssä ja Androidissa tilojen, fysiikan ja käyttäjän syötteen ohjaamana.
Ydinarkkitehtuuri
Miksi insinöörit ja suunnittelijat valitsevat ExodeUI
Design, logic and motion in one file that runs inside your app.
Suoritettava komponentti vs. viety leike
ExodeUI-lähtö on .exode-tiedosto, jonka suoritusaika toistaa sovelluksessasi. Figma Motion vie videon, GIF, SVG tai Lottie, joka toistaa animaatiota, mutta ei sisällä sovelluksesi tilaa.
Tilakoneet, jotka on kytketty sovellukseesi
Mallin tyhjäkäynti, lataus, onnistuminen ja virheet tiloissa, joissa koodisi käynnistyy, sen sijaan, että kaikki yhdistelmät olisivat Figma-variantteja.
Fysiikka, joka reagoi syötteisiin
Jouset ja jatkuva liikemäärä kulkevat elävässä tuotteessa, joten veto tai heiluminen jatkuu käyttäjän nopeudella, ei kiinteällä käyrällä.
Tuo Figma-työsi
Kehykset kohtaavat ExodeUI Figma -laajennuksen, joten jatkat suunnittelua Figma:ssä ja rakennat interaktiivisen osan ExodeUI:ssä.
Objektiivinen arviointi
Miten ExodeUI verrattuna Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Toimitetaan juoksevana komponenttina: .exode-tiedosto toistetaan tiedostoissa React, React Native, SwiftUI, Flutter ja muissa, joten liikettä ei rakenneta uudelleen käsin
- Tilakone, jossa on syötteitä ja tapahtumia, jotka sovelluksesi käynnistyy ajon aikana
- Jouset ja fysiikka, jotka reagoivat veto- ja eleiden nopeuteen live-tuotteessa
- MCP-palvelin, jotta AI-koodaustyökalut, kuten Claude Code ja Cursor, voivat luoda ja muokata liiketiedostoa
Figma Motion
- Liike säilyy suunnittelutiedostossa, ellet viet sitä videona, GIF, SVG tai Lottie; se ei toimi sovelluskomponenttinasi yksinään
- Viedyt Lottie ja dotLottie voivat toistaa animaatioita ja kuljettaa interaktiivisia tiloja muototasolla, mutta niitä ei ole kytketty sovellustietoihisi
- Figma Motion on avoimessa betavaiheessa; animoitujen komponenttien julkaiseminen, agenttien luominen ja korkearesoluutioinen vienti vaativat maksetun täysimääräisen paikan
- 3D-muunnosten on ilmoitettu tulevan pian, mutta niitä ei toimiteta
Kehittäjän vaihto
Käytä sitä koodissasi
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
tuo { ExodeUICanvas } 'exodeuista';
// Jouset, tilat ja ajoitus livenä .exode-tiedostossa (suunniteltu
// editori). Koodisi välittää syötteitä ja kuulee tapahtumat takaisin.
vientifunktio FluidCard() {
paluu (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(nimi) => console.log('ExodeUI event:', name)}
/>
);
}Mikä on Figma Motion
Figma Motion on Figma:n sisällä oleva tila, joka asettaa animaation aikajanan suunnittelusi viereen. Figma esitteli sen Config 2026:ssa ja aloitti sen julkaisun 24. kesäkuuta 2026, ja se on edelleen avoimessa betavaiheessa, joten ominaisuudet voivat muuttua. Voit vaihtaa kehyksen liiketilaan ja avainkehyksen ominaisuudet, kuten sijainnin, mittakaavan, kierron, värin, viivan leveyden, polun trimmauksen ja kaaret. Sen mukana toimitetaan animaation esiasetukset (häivytys, kierto, skaalaus, kokoa ja paljon muuta) ja mukautettuja tyylejä, liikemuuttujia helpotusta ja ajoitusta varten, bezier-käyrät ja jouset sekä automaattinen näppäily, joka tallentaa muutokset hankaaessasi. Myöhemmät päivitykset lisäsivät tekstianimaatiota ja ääntä aikajanalle. Liike on käytettävissä, kun muokkaat kaikkia Figma-suunnitelmia, mukaan lukien Starter; Figma hallituksen suunnitelmissa ei ole sitä.
- Julkaistu Config 2026:ssa, julkaistaan 24.6.2026, avoimessa betaversiossa
- Aikajana, avainkehykset, esiasetukset, mukautetut tyylit, liikemuuttujat ja jouset
- Tekstianimaatio ja ääni aikajanalla saapuivat 30.9.2026 päivitykseen
- 3D-muunnokset näkyvät pian tulossa Figma Motion-sivulla
Mitä Figma Motion voi viedä
Animaatiokehyksestä voit viedä MP4, WebM, GIF tai animoidut SVG suoraan Figma:stä. 30.9.2026 Figma lisäsi myös Lottie- ja dotLottie-viennin. Vienti, joka on suurempi kuin 1920 x 1080 tai yli 30 kuvaa sekunnissa, vaatii maksetun suunnitelman. Lottie-vienti ei tue kaikkea: varjostimet, videot ja kulmagradientit tulevat ulos staattisina kuvina, ja jotkin tehosteet, kuten varjot, kohina ja lasi, litistyvät ensimmäisen ruudun ulkoasuun, joten Figma suosittelee tiedoston testaamista soittimessa, jota aiot käyttää. Kehittäjätila näyttää koko liikkeen aikajanan ja voi kopioida animaatioarvoja muodossa CSS, JSON tai React (mukaan lukien motion.dev), ja Figma MCP -palvelin välittää animaatioita koodausagenteille. Koodin kopioiminen ja animoitujen komponenttien julkaiseminen edellyttävät maksullisen täysi- tai kehittäjäpaikan.
Video ja kuva
MP4, WebM, GIF ja animoitu SVG, enimmäisraja 1920 × 1080 ja 30 FPS ilmaisissa paketeissa.
Lottie ja dotLottie
Lisätty 30. syyskuuta 2026; varjostimia, videoita ja kulmagradientteja ei tueta, ja jotkin tehosteet tasoittuvat ensimmäiseen ruutuun.
Koodi ja agentit
Kehittäjätila kopioi arvot muodossa CSS, JSON tai React, ja Figma MCP -palvelin antaa liikkeen koodausagenteille maksetulla paikalla.
Missä Figma Motion pysähtyy tuotantoa varten
Figma Motion on vahva liikkeen suunnittelussa käyttöliittymän vieressä, ja sen vienti- ja kehitystilan ulostulo sulkee suuren osan vanhasta yhteysvastuun vaihdosta. Vienti on rajana: video, GIF- tai Lottie-tiedosto on toistoresurssi, ja Dev Mode -koodi on katkelma, jonka kehittäjä edelleen yhdistää. Kumpikaan ei toimi tuotekomponenttinasi, eikä kumpikaan ole sidottu sovelluksesi sisäisiin tiloihin ja tietoihin. Jos painikkeen on oltava käyttämättömänä, sitä painettava, latautuva, pois käytöstä ja virheellinen ja animaation on reagoitava tietoihin ja käyttäjän syötteisiin verkossa, iOS:ssä ja Androidissa, tämä logiikka on rakennettava jokaiseen koodikantaan. Figma Motion kattaa nyt enemmän liikkeen suunnittelua ja kanavanvaihtovaihetta kuin käynnistettäessä; suoritusaikavaiheessa se siirtyy sitä varten rakennetulle työkalulle.
Jos liikkeen on suoritettava sovelluksessa
ExodeUI on selain- ja työpöytätyökalu interaktiiviseen käyttöliittymään ja animaatioihin suunnittelijoille, kehittäjille ja tekoälyagenteille. Rakennat liikkeen kerran avoimessa .exode-tiedostossa tilakoneiden, jousifysiikan, syötteiden ja tapahtumien kanssa ja toimitat sen sitten ajonaikaisten pakettien kanssa malleille React, Vue, Svelte, Angular, Solid, React Native, ZQZX ja ZQX. Koodisi välittää syötteitä ja kuulee tapahtumat takaisin, joten sama tiedosto suoritetaan sovelluksessa sen sijaan, että se rakennettaisiin uudelleen alustakohtaisesti. MCP-palvelin antaa Claude Code:n, Cursor:n ja muiden tekoälyn koodaustyökalujen luoda ja muokata tiedostoa selväkielisistä kehotteista. Voit tuoda kehyksiä Figma:stä ExodeUI Figma -laajennuksella. Valmistamme ExodeUI, joten punnitse tämä osa vastaavasti.
Topic Cluster Network
Tutustu yhdistettyihin käsitteisiin ja työkaluihin
ExodeUI vs. Figma Motion
Ajoaikaero vierekkäin
Figma - Exode yleiskatsaus
Siirretään Figma liiketyö ExodeUI:ksi
Liikekehitysympäristö
Tutustu koko MDE-luokkaan
Figma-Exode-muunnintyökalu
Muuta Figma-animaatioarvot tuotantojousiksi
Sanasto: Spring Physics
Kevään matematiikka, vaimennus ja jäykkyys selitetty
Onko sinulla kysyttävää?
Usein kysytyt kysymykset
Rakenna eläviä komponentteja todellisella liikkeellä.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.