同じファイル内でアニメーション化
別のアニメーションツールへ移動する代わりに、フレームを Motion モードに切り替えて、デザインと並行してタイムライン作業を行えます。
Figma Motion
Figma Motion は、Figma 上でデザインと同じファイル内のキャンバス上から直接モーションを作成・確認できるアニメーションツールです。タイムライン編集やモーションシステム、エクスポートや開発者への受け渡しにも対応します。
製品概要
Figma Motion は、キャンバス上で直接モーションを設計できる Figma のアニメーションツールです。コンポーネント、変数、チームでの共同作業と同じファイル内にタイムラインを組み込み、Figma を離れずにモーションを作成・確認できます。
この製品は、デザイン作業のほかの部分と同じ作業環境で、アニメーション、モーションシステム、受け渡し対応のモーション素材を構築したいデザイナーと開発者を対象としています。ローンチ資料では、コンテキストの切り替えを減らし、モーションを始めやすくし、アニメーションの判断をそれを取り巻くデザインシステムと結び付け続ける方法として位置づけています。
主な機能
タイムラインベースの編集
タイムラインを使ってレイヤーのタイミングを調整し、アニメーションをスクラブし、position、scale、rotation、opacity を個別にキーフレーム設定できます。
自動キーフレーミングとタイミング制御
再生ヘッドが動いている間の変更を記録する auto keyframing をオンにしてから、easing や timing を調整して結果を洗練できます。
プリセットのアニメーションスタイル
fade、move、scale、rotate、resize などの preset animation styles から始めて、キャンバス上で重ねたり順番に並べたりできます。
コンポーネントと変数によるモーションシステム
components にモーションを組み込み、variables と modes で motion values を更新することで、アニメーションパターンをファイル間で再利用できます。
受け渡しとエクスポート
production-ready な motion outputs をエクスポートし、Dev Mode または Figma MCP server を通じて開発者と共有できます。
主な利用シーン
既存のデザインファイル内にモーションを追加する
他のプロダクトデザインが入ったファイルを離れずに、フレームをアニメーション化したいときに Motion を使います。モーションをコンポーネント、変数、チームの他の作業と整合させておきたい場合に役立ちます。
最初のアニメーションをすばやく作成する
agent とプリセットスタイルを使って素早く初期案を作り、その後 easing、timing、keyframes を調整してタイムラインを洗練します。モーション初心者や、より速い出発点が必要なデザイナーに向いています。
デザインシステム全体でモーションを標準化する
複数の画面や共同作業者のファイルに同じ動きのパターンを出したい場合に、components と motion variables を使います。単発のアニメーションではなく、再利用可能なモーションシステムを構築するチームに適しています。
モーション作業をレビューして受け渡す
モーションの下書きにレビューや開発者への受け渡しが必要なときは、timeline comments と Dev Mode を使います。ソースでは、特定の時点へのコメントと、コード志向の共同作業のためのモーションタイムラインの確認が強調されています。
アニメーション素材を共有または出力する
Figma の外でアニメーションを使いたい場合は MP4、GIF、SVG、WebM などの export formats を使い、コードによる受け渡しが必要な場合は CSS や MCP 指向の出力を使います。
Pros and Cons
Pros
- モーションを他のデザイン作業と同じ Figma ファイル内に保てるため、コンテキストの切り替えを減らせます。
- エージェント支援による作成と直接のタイムライン編集の両方に対応し、経験レベルに応じて使い分けられます。
- スクラブ、レイヤーのタイミング調整、position、scale、rotation、opacity の個別キーフレームなど、具体的なタイムライン操作を備えています。
- animated components と motion variables によるモーションシステムをサポートし、ファイル間で再利用できます。
- Dev Mode、コードエクスポート、Figma MCP server を通じて開発者向けの受け渡し経路を提供します。
Cons
- custom animation styles や 3D transforms を含むいくつかの機能は、近日公開予定とされています。
- ソースでは Motion が完全に一般公開されているとは示されておらず、料金ページでは beta が Full seats で利用可能とされています。
FAQ
Figma Motion とは何ですか？
Figma Motion は、コンポーネント、変数、チームでの共同作業と同じファイル内で、キャンバス上からアニメーションを作成できる Figma 内のモーションデザインツールです。エージェント支援の作成と直接のタイムライン編集の両方をサポートするよう設計されています。
Figma Motion は Figma のワークフローにどのように組み込まれますか？
ソースでは、Motion は Design、Draw、Dev モードと同じキャンバス上でネイティブに動作すると説明されています。また、よりスムーズな受け渡しのための Dev Mode アクセスと機能、さらにレビュー用の時間ベースのコメントも記載されています。
Figma Motion から何をエクスポートできますか？
Motion ページでは、MP4、GIF、SVG、WebM など、Figma から直接アニメーション成果物をエクスポートできると説明されています。ローンチ投稿では、3D transforms 向けの CSS と MCP へのエクスポートにも触れています。
Figma Motion はすべてのプランで利用できますか？
料金ページによると、Figma Motion beta は Full seats で利用できます。また、有料プランでは追加の seats なしで他のユーザーが閲覧やコメントを行えると示されています。
どのような制限や今後の機能が記載されていますか？
ソースでは、custom animation styles と 3D transforms が近日公開予定であると記載されています。Motion ページでも、3D transforms や screen-to-screen transitions など、一部の機能が近日公開予定として表示されています。
Quick Facts
- カテゴリ
- Design Tool
- 製品タイプ
- Animation tool
- プラットフォーム
- Figma web app
- 主な対象ユーザー
- Designers and developers
- 提供状況
- Beta on Full seats
- ソースドメイン
- figma.com
Figma Motionの代替品
图像大厨imgcook
imgcookは、デザイン稿をフロントエンドコードに変換するデザイン-to-codeツールです。Sketch、Photoshop、VS Code、CLIに対応し、プラグインと開発者向けのワークフローを提供します。
Beautiful.ai
Beautiful.aiは、個人・チーム・企業向けのAIプレゼンテーションプラットフォームです。Smart Slides、共同編集、書き出し機能で、ブランドに沿った資料を効率よく作成できます。
SlideSpeak Onbrand
SlideSpeak Onbrandは、承認済みのブランド素材とスライドレイアウトをAIエージェントにリアルタイム提供し、Claude Code、Codex、CursorなどのMCPクライアントで資料をブランド準拠で作成できます。
Decktopus AI
Decktopus AIは、プロンプトや貼り付けテキスト、PDFからブランド一貫性のあるスライドを自動生成するWebベースのAIプレゼン作成ツールです。
Chronicle
Chronicleは、メモやドキュメント、既存デッキを洗練されたビジネス資料に変えるチーム向けAIプレゼンテーション作成ツール。AIスライド生成、ブランド管理、共同編集、PPT/PDF/公開Webサイトへの書き出しに対応。
Pixso
Pixsoは、ユーザーがワンクリックでデザイン草案とコードを生成できる次世代のAIネイティブUIデザインツールで、Figmaの国内代替品として機能します。