Figma Motion logo

Figma Motion

認証する

Figma Motionは、デザイン・コンポーネント・変数と同じファイル内でモーションを作成できるFigmaのキャンバス型アニメーション作業スペース。キーフレーム、プリセット、再利用、時間指定コメント、Dev Mode引き継ぎに対応。

Figma Motion preview

Figma Motionとは

Figma Motionは、デザイン、コンポーネント、変数、チームコラボレーションがすでにある同じキャンバス上に表示される、Figmaのアニメーション作業スペースです。ローンチ投稿では、デザインの横にタイムラインがある新しいMotionモードとして説明されており、アニメーション作業を別ツールではなく同じファイル内で行えます。

この製品は、モーションの作成、レビュー、再利用をより簡単にすることを目的としています。デザイナーは主要プロパティをキーフレーム設定し、プリセットのアニメーションスタイルを適用し、アニメーション化されたコンポーネントとモーション変数を利用し、時間指定コメントやDev Mode向けの引き継ぎを通じてチームと協力できます。また、このページでは、Figma agent がプロンプトからキーフレームを生成し、モーション作業の学習コストを下げる方法として位置づけられています。

主な機能

キャンバスベースのアニメーションタイムライン

デザインフレームからMotionモードに切り替え、キャンバスの横にあるタイムラインで作業できるため、アニメーションを他のデザインと同じファイル内で扱えます。

タイムライン操作とキーフレーム

レイヤーをドラッグしてタイミングを調整し、再生ヘッドをスクラブし、位置、スケール、回転、不透明度を個別にキーフレーム設定できます。自動キーフレーミングでは、再生ヘッドの移動中の変更が記録されます。

プリセットアニメーションスタイル

フェード、移動、スケールなどのプリセットスタイルを使ってすばやく始め、タイムライン上で並列に重ねたり順序立てたりできます。

再利用可能なモーションシステム

アニメーション化されたコンポーネントとモーション変数を使うことで、モーションパターンを他の画面、共同編集者、ファイルへとデザインシステム全体と一緒に引き継げます。

エージェント支援による作成

Figma agent に指示してタイムライン上に直接キーフレームを作成できるため、アニメーション初心者の立ち上がりを助け、経験者の繰り返し作業も減らせます。

レビューと引き継ぎの支援

キャンバス上に時間指定コメントを追加し、Dev Mode 機能を使って、よりスムーズなレビューと引き継ぎを行えます。

主な利用シーン

  • プロダクトUIのアニメーション化

    UIと同じファイル内で直接モーションを作成できるため、デザイナーは別のアニメーションツールに引き継がずにインタラクションを反復できます。

  • 再利用可能なデザインシステム用モーションの作成

    コンポーネント用のモーションを一度作成し、画面やファイル全体で再利用できるため、共有UI要素の動作を統一できます。

  • モーションデザインの始め方

    アイデアをモーションに変換する手助けが欲しいときに、Figma agent を使って初期キーフレームや提案を生成できます。

  • 共同でのモーションレビュー

    タイムライン上の特定時点に紐づくコメントを使って、タイミングや挙動をチームでレビューし、その後引き継ぎ前にアニメーションを調整できます。

Pros and Cons

Pros

  • モーションをデザイン作業と同じFigmaファイル内に置けるため、ツールの切り替えを減らせます。
  • キーフレーム、スクラブ、自動キーフレーミングによる直接的なタイムライン編集をサポートします。
  • アニメーション化されたコンポーネントとモーション変数を通じて、チームがモーションを再利用できます。
  • 時間指定コメントとDev Mode対応により、レビューと引き継ぎがしやすくなります。
  • Figma agent を使ってプロンプトからモーション生成を手伝い、経験の浅いユーザーを支援します。

Cons

  • 公開ソースはローンチ投稿と一部のみをカバーする製品ページであるため、ここでは一部のワークフロー詳細が文書化されていません。
  • ページにはカスタムアニメーションスタイルが近日公開予定とあり、一部機能がまだ利用できないことを示しています。
  • ソースでは、Motion自体のエクスポートや出力オプションが明確に説明されていません。

FAQ

Figma Motionにはどうやってアクセスできますか?

Figma MotionはFigmaのキャンバス体験に組み込まれており、Motionベータの一部として提供されています。料金ページによると、Figma MotionベータはFullシートで利用可能とされているため、利用可否はプランとベータの提供状況によって異なります。

MotionはFigmaのワークフローにどのように組み込まれますか?

ローンチ投稿では、フレームをMotionモードに切り替えて、デザインと並んでタイムライン上で作業できると説明されています。また、引き継ぎとレビューのためのDev Modeアクセスと時間指定コメントについても記載されています。

Figma Motionでは何をアニメーション化できますか?

このページでは、位置、スケール、回転、不透明度に加えて、シェーダーのプロパティをキーフレーム設定できると説明されています。また、フェード、移動、スケールなどのプリセットアニメーションスタイルにも触れています。

チームはMotionで再利用可能なモーションシステムを構築できますか?

この発表では、モーションはコンポーネント、変数、チームと同じファイル内に存在し、アニメーション化されたコンポーネントとモーション変数をファイル間で共有できると説明されています。カスタムアニメーションスタイルが近日公開予定であることも示されています。

Figma Motionはどのような出力に対応していますか?

このソースでは、現時点でMotionのエクスポート形式は説明されていません。ただし、近日公開予定の3D変換はCSSにエクスポートでき、MCP経由で接続できると記載されていますが、それは別の今後の機能です。

Quick Facts

カテゴリ
デザインツール
製品
Figma Motion
ソースドメイン
figma.com
提供状況
Fullシートでベータ提供
主な対象ユーザー
デザイナー、モーションデザイナー、プロダクトチーム
ワークフロー
Figmaキャンバス内のアニメーションタイムライン