Projektanci często prototypują przejścia w Figma za pomocą Smart Animate i łagodzenia sprężynowego lub Beziera. Programiści muszą następnie odtworzyć ten ruch w React. Figma nie eksportuje tych przejść jako działającego kodu animacji, więc zadaniem jest tłumaczenie.
Zacznij od zarejestrowania działania prototypu: co powoduje zmianę (dotknięcie, najechanie kursorem, po opóźnieniu), które warstwy się przesuwają i jakie właściwości się zmieniają, a także czas (czas trwania z krzywą łagodzenia lub sprężyna). Tryb inspekcji i panel prototypowy pokazują te wartości.
W prostych przypadkach, takich jak zanikanie lub zmiana koloru, wystarczą przejścia CSS. W przypadku sprężyn, gestów, współdzielonych przejść układu oraz animacji wejścia i wyjścia, biblioteka taka jak Motion (dawniej Framer Motion) jest powszechnym wyborem w React. Użyj tych samych wartości sprężyn, które wybrał projektant.
Zapisz te wartości jako żetony ruchu, aby następne przejście korzystało z tego samego czasu. Nasz darmowy konwerter animacji Figma na Spring zamienia Figma w ustawienia sprężynowe. Narzędzia do kodowania AI mogą to przyspieszyć, szczególnie po podłączeniu do serwera MCP Figma, aby móc odczytać kontekst projektu.
W przypadku komponentów o wielu stanach, takich jak przycisk z ładowaniem, sukcesem i błędem lub animowany przebieg wdrażania, ręczna odbudowa jest kosztowna. ExodeUI, który wykonujemy, umożliwia jednorazowe zaprojektowanie tego komponentu i odtworzenie go w React z pakietem exodeui npm, kontrolując go za pomocą danych wejściowych i zdarzeń z Twojego kodu.