Les concepteurs prototypent souvent les transitions dans Figma avec Smart Animate et l'assouplissement printanier ou bézier. Les développeurs doivent ensuite reproduire ce mouvement dans React. Figma n'exporte pas ces transitions sous forme de code d'animation fonctionnel, le travail consiste donc à traduire.
Commencez par enregistrer ce que fait le prototype : ce qui déclenche le changement (appuyer, survoler, après un délai), quelles couches se déplacent et quelles propriétés changent, ainsi que le timing (une durée avec une courbe d'assouplissement ou un ressort). Le mode inspection et le panneau prototype affichent ces valeurs.
Pour des cas simples comme des fondus ou des changements de couleurs, les transitions CSS suffisent. Pour les ressorts, les gestes, les transitions de mise en page partagées et les animations d'entrée ou de sortie, une bibliothèque telle que Motion (anciennement Framer Motion) est le choix courant dans React. Utilisez les mêmes valeurs de ressort que celles choisies par le concepteur.
Enregistrez ces valeurs sous forme de jetons de mouvement afin que la transition suivante utilise le même timing. Notre convertisseur gratuit d'animation Figma vers Spring transforme l'assouplissement Figma en paramètres de ressort. Les outils de codage d'IA peuvent accélérer cela, en particulier lorsqu'ils sont connectés au serveur MCP de Figma afin qu'ils puissent lire le contexte de conception.
Pour les composants comportant de nombreux états, comme un bouton avec chargement, réussite et erreur, ou un flux d'intégration animé, la reconstruction manuelle s'avère coûteuse. ExodeUI, que nous créons, vous permet de concevoir ce composant une fois et de le lire dans React avec le package exodeui npm, en le contrôlant avec les entrées et les événements de votre code.