設計師經常使用智慧動畫和彈簧或貝塞爾緩動在 Figma 中製作過渡原型。然後，開發人員需要在 React 中重現該運動。 Figma 不會將這些過渡匯出為工作動畫程式碼，因此工作就是翻譯。
首先记录原型的作用：什么触发了变化（点击、悬停、延迟后）、哪些层移动、哪些属性发生变化，以及时间（缓动曲线或弹簧的持续时间）。檢查模式和原型面板顯示這些值。
對於淡入淡出或顏色變化等簡單情況，CSS 過渡就足夠了。對於彈簧、手勢、共享佈局轉換以及進入或退出動畫，Motion（以前稱為 Framer Motion）等庫是 React 中的常見選擇。使用設計師選擇的相同彈簧值。
將這些值儲存為運動標記，以便下一次轉換使用相同的計時。我們免費的 Figma 動畫到彈簧轉換器將 Figma 緩動轉換為彈簧設定。 AI 編碼工具可以加快這一速度，特別是當連接到 Figma 的 MCP 伺服器時，他們可以讀取設計上下文。
對於具有多種狀態的元件，例如具有載入、成功和錯誤的按鈕，或動畫啟動流程，手動重建會變得昂貴。我们制作的 ExodeUI 允许您设计该组件一次，然后使用 exodeui npm 包在 React 中播放它，并使用代码中的输入和事件来控制它。