デザイナーは、Smart Animate とスプリングまたはベジェ イージングを使用して、Figma でトランジションのプロトタイプを作成することがよくあります。次に、開発者はそのモーションを React で再現する必要があります。 Figma はこれらのトランジションを動作するアニメーション コードとしてエクスポートしないため、仕事は翻訳です。
まず、プロトタイプの動作を記録します。変更のトリガー (タップ、ホバー、遅延後)、どのレイヤーが移動し、どのプロパティが変化するか、タイミング (イージング カーブまたはスプリングによる継続時間) を記録します。検査モードとプロトタイプ パネルにはこれらの値が表示されます。
フェードや色の変更などの単純な場合は、CSS トランジションで十分です。 React では、スプリング、ジェスチャ、共有レイアウトの遷移、およびアニメーションの開始または終了については、Motion (旧称 Framer Motion) などのライブラリが一般的に選択されます。設計者が選択したのと同じバネ値を使用します。
これらの値をモーション トークンとして保存し、次のトランジションで同じタイミングが使用されるようにします。無料の Figma アニメーション to Spring コンバーターは、Figma イージングをスプリング設定に変換します。 AI コーディング ツールは、特に Figma の MCP サーバーに接続されている場合に、設計コンテキストを読み取ることができるため、これを高速化できます。
読み込み、成功、エラーを含むボタンやアニメーション化されたオンボーディング フローなど、多くの状態を持つコンポーネントの場合、手動で再構築するとコストが高くなります。私たちが作成した ExodeUI を使用すると、そのコンポーネントを一度デザインして、exodeui npm パッケージを使用して React で再生し、コードからの入力とイベントで制御できます。