Designere ofte prototyper overgange i Figma med Smart Animate og fjeder eller bezier lempelse. Udviklere skal derefter gengive den bevægelse i React. Figma eksporterer ikke disse overgange som fungerende animationskode, så jobbet er oversættelse.
Start med at registrere, hvad prototypen gør: hvad der udløser ændringen (tryk, svæv, efter forsinkelse), hvilke lag, der bevæger sig, og hvilke egenskaber, der ændres, og timingen (en varighed med en lempende kurve eller en fjeder). Inspicer-tilstand og prototypepanelet viser disse værdier.
Til simple tilfælde som fades eller farveændringer er CSS overgange nok. Til fjedre, bevægelser, delte layoutovergange og ind- eller udgangsanimation er et bibliotek som Motion (tidligere Framer Motion) det almindelige valg i React. Brug de samme fjederværdier, som designeren valgte.
Gem disse værdier som bevægelsestokens, så den næste overgang bruger samme timing. Vores gratis Figma Animation to Spring Converter forvandler Figma easing til fjederindstillinger. AI-kodningsværktøjer kan fremskynde dette, især når de er forbundet til Figma's MCP-server, så de kan læse designkonteksten.
For komponenter med mange tilstande, såsom en knap med indlæsning, succes og fejl eller et animeret onboarding-flow, bliver det dyrt at genopbygge manuelt. ExodeUI, som vi laver, lader dig designe den komponent én gang og afspille den i React med exodeui npm-pakken, styre den med input og hændelser fra din kode.