キャンバスベースのアニメーションタイムライン
デザインフレームからMotionモードに切り替え、キャンバスの横にあるタイムラインで作業できるため、アニメーションを他のデザインと同じファイル内で扱えます。
Figma Motionは、デザイン・コンポーネント・変数と同じファイル内でモーションを作成できるFigmaのキャンバス型アニメーション作業スペース。キーフレーム、プリセット、再利用、時間指定コメント、Dev Mode引き継ぎに対応。
Figma Motionは、デザイン、コンポーネント、変数、チームコラボレーションがすでにある同じキャンバス上に表示される、Figmaのアニメーション作業スペースです。ローンチ投稿では、デザインの横にタイムラインがある新しいMotionモードとして説明されており、アニメーション作業を別ツールではなく同じファイル内で行えます。
この製品は、モーションの作成、レビュー、再利用をより簡単にすることを目的としています。デザイナーは主要プロパティをキーフレーム設定し、プリセットのアニメーションスタイルを適用し、アニメーション化されたコンポーネントとモーション変数を利用し、時間指定コメントやDev Mode向けの引き継ぎを通じてチームと協力できます。また、このページでは、Figma agent がプロンプトからキーフレームを生成し、モーション作業の学習コストを下げる方法として位置づけられています。
デザインフレームからMotionモードに切り替え、キャンバスの横にあるタイムラインで作業できるため、アニメーションを他のデザインと同じファイル内で扱えます。
レイヤーをドラッグしてタイミングを調整し、再生ヘッドをスクラブし、位置、スケール、回転、不透明度を個別にキーフレーム設定できます。自動キーフレーミングでは、再生ヘッドの移動中の変更が記録されます。
フェード、移動、スケールなどのプリセットスタイルを使ってすばやく始め、タイムライン上で並列に重ねたり順序立てたりできます。
アニメーション化されたコンポーネントとモーション変数を使うことで、モーションパターンを他の画面、共同編集者、ファイルへとデザインシステム全体と一緒に引き継げます。
Figma agent に指示してタイムライン上に直接キーフレームを作成できるため、アニメーション初心者の立ち上がりを助け、経験者の繰り返し作業も減らせます。
キャンバス上に時間指定コメントを追加し、Dev Mode 機能を使って、よりスムーズなレビューと引き継ぎを行えます。
UIと同じファイル内で直接モーションを作成できるため、デザイナーは別のアニメーションツールに引き継がずにインタラクションを反復できます。
コンポーネント用のモーションを一度作成し、画面やファイル全体で再利用できるため、共有UI要素の動作を統一できます。
アイデアをモーションに変換する手助けが欲しいときに、Figma agent を使って初期キーフレームや提案を生成できます。
タイムライン上の特定時点に紐づくコメントを使って、タイミングや挙動をチームでレビューし、その後引き継ぎ前にアニメーションを調整できます。
Figma MotionはFigmaのキャンバス体験に組み込まれており、Motionベータの一部として提供されています。料金ページによると、Figma MotionベータはFullシートで利用可能とされているため、利用可否はプランとベータの提供状況によって異なります。
ローンチ投稿では、フレームをMotionモードに切り替えて、デザインと並んでタイムライン上で作業できると説明されています。また、引き継ぎとレビューのためのDev Modeアクセスと時間指定コメントについても記載されています。
このページでは、位置、スケール、回転、不透明度に加えて、シェーダーのプロパティをキーフレーム設定できると説明されています。また、フェード、移動、スケールなどのプリセットアニメーションスタイルにも触れています。
この発表では、モーションはコンポーネント、変数、チームと同じファイル内に存在し、アニメーション化されたコンポーネントとモーション変数をファイル間で共有できると説明されています。カスタムアニメーションスタイルが近日公開予定であることも示されています。
このソースでは、現時点でMotionのエクスポート形式は説明されていません。ただし、近日公開予定の3D変換はCSSにエクスポートでき、MCP経由で接続できると記載されていますが、それは別の今後の機能です。