Dessa två termer svarar på olika frågor. Smart Animate svarar "vad förändras?" Den tittar på två ramar, hittar lager med matchande namn och animerar deras position, storlek, rotation, opacitet och andra egenskaper från en bildruta till den andra.
Lättande svar "hur förändras det över tiden?" Figma låter dig välja en standardkurva som ease-out, en anpassad cubic-bezier-kurva eller en fjäder. Fjäderlättnad definieras av fysiska inställningar, styvhet, dämpning och massa, snarare än en fast varaktighet, så rörelsen påskyndar och avgör hur verkliga föremål gör.
Den verkliga skillnaden visas i koden. I en produkt kan en fjäder starta från ett elements aktuella position och hastighet. Om en användare avbryter en övergång eller snärtar med ett ark, fortsätter rörelsen naturligt istället för att hoppa. En prototypövergång spelar på samma sätt varje gång, vilket är bra för att visa uppsåt men visar inte hur rörelsen beter sig under verklig input.
Så en Figma-prototyp är en bra referens, men utvecklare bygger fortfarande om rörelsen i kod. För att hålla värdena konsekventa sparar många lag vårinställningar som rörelsesymboler. Vår gratis Figma Animation to Spring Converter gör Figma lättnader till fjäderinställningar som du kan använda i kod.
Om du vill att den interaktiva versionen ska vara leveransen snarare än en referens, behövs ett verktyg med en runtime. ExodeUI, som vi gör, lagrar tillstånd, källor och händelser i en fil som körs i appen.