プロンプトから生まれる洗練されたモーション
Figmaのエージェントを使って、プロレベルのアニメーションを作成できます。繰り返しの動きや複雑なストーリーテリングにも活用できます。
Figma Motion
キャンバス上で、精密で本番対応可能なアニメーションを直接作成できます。
モーションデザインを、デザインの現場で。
モーションに初めて触れる人でも、イージングに精通したプロでも、デザインを伸縮・バウンス・スクワッシュさせることが簡単にできます。
すべてのキーフレームをコントロール
タイムラインを完全に制御できます。すべてのフレームとプロパティを思い通りに設定し、その後チームメンバーと協力して最終的なアニメーションを仕上げられます。
広がる創造性。精密なコントロール。
作業に明確さと表現力をもたらします。ローディング状態、ホバーインタラクション、ロゴアニメーションなどを自在に作成できます。限界はタイムラインだけです。
事前に用意されたスタイルで素早く構築
フェード、回転、スケール、リサイズなどのアニメーションスタイルがあらかじめ用意されており、スタイルを組み合わせて表現を実現できます。カスタムスタイルは近日公開予定です。
タイミングを自動調整
オートキーを使ってモーションの動きを記録し、その後ベジェカーブやスプリングで各キーフレームを自由に調整できます。
新しい次元へ
3Dトランスフォームによって、デザインや画像に奥行きを加えられます。モーションと組み合わせることで、現実世界のような動きを表現できます。近日公開予定。
すべてのトランジションをスムーズに
画面から画面への遷移すべてにフルタイムラインが用意されており、各要素ごとのタイミングを調整できます。近日公開予定。
システムは一度作ればよく、あらゆる場所に適用できます。
モーションシステムにより、チーム全体がブランドに沿ったモーションアセットを素早くどこにでも追加できます。
アセット全体でコンポーネントを再利用
よく使う動きを仕組み化することで、毎回ゼロから作る必要がなくなります。適用される場所を問わず機能するモードやコンポーネントを作成できます。
バリアブルを切り替えて時間を節約
バリアブルやトークンを使って、さまざまなモーション値を素早く切り替えられます。
アニメーションをそのままコードへ出力
すべてのアニメーションは実際の本番対応コードに基づいており、Figmaから直接エクスポート可能です。
スムーズな開発者へのハンドオフ
Dev Modeでは、モーションのタイムライン全体を確認でき、そのままアニメーションコードを CSS、JSON、またはReactにコピーできます。
AIエージェントに完全なモーションコンテキストを提供
Figma MCPサーバーを介してアニメーションコードをエージェント型コーディングツールに送信できます。イージングやタイミングなどのすべての値が保持されます。
Figmaから直接エクスポート
モーションを広く共有できます。アニメーションされたフレームをMP4、GIF、SVG、WebMファイルとして書き出せます。