Návrháři často prototypují přechody v Figma pomocí Smart Animate a pružinového nebo Bézierova uvolnění. Vývojáři pak musí tento pohyb reprodukovat v React. Figma tyto přechody neexportuje jako funkční kód animace, takže úkolem je překlad.
Začněte tím, že zaznamenáte, co prototyp dělá: co spouští změnu (klepnutí, najetí, po prodlevě), které vrstvy se pohybují a které vlastnosti se mění, a načasování (doba trvání s křivkou náběhu nebo pružiny). Tyto hodnoty zobrazují režim kontroly a panel prototypu.
Pro jednoduché případy, jako jsou blednutí nebo změny barev, stačí přechody CSS. Pro pružiny, gesta, sdílené přechody rozvržení a animaci vstupu nebo výstupu je běžnou volbou v React knihovna jako Motion (dříve Framer Motion). Použijte stejné hodnoty pružin, jaké zvolil návrhář.
Uložte tyto hodnoty jako tokeny pohybu, aby další přechod používal stejné načasování. Naše bezplatná převaděč Figma Animation to Spring Converter změní zrychlení Figma na nastavení pružiny. Nástroje pro kódování AI to mohou urychlit, zvláště když jsou připojeny k serveru MCP Figma, takže mohou číst kontext návrhu.
U komponent s mnoha stavy, jako je tlačítko s načítáním, úspěchem a chybou nebo animovaný tok onboardingu, je ruční přestavba nákladná. ExodeUI, který vyrábíme, vám umožňuje navrhnout tuto komponentu jednou a přehrát ji v React s balíčkem exodeui npm a ovládat ji pomocí vstupů a událostí z vašeho kódu.