Figma Motion.

Figma Motion（フィグマ モーション）

Figma Motionは、デザインとアニメーションを同一キャンバス上で統合する次世代のモーションデザインツールです。従来の外部ツールやプラグインを使った煩雑なワークフローを排除し、デザインファイル内で直接タイムラインを操作することで、チーム全体が最初のフレームから最終的な実装までシームレスにモーションを作成・管理できます。AIアシスタントによるガイダンスと開発者向けの完全なコード出力機能により、モーション設計のハードルを下げながら、表現の可能性を大きく広げます。

主な特徴

• 統合されたタイムライン: デザイン、ドロー、開発モードと並んで配置されたMotionモードにより、フレームを切り替えるだけでタイムラインが表示され、レイヤーのドラッグでタイミング調整、スクラブによるプレビュー、キーフレームの独立した設定が可能です
• アニメーションスタイル: フェード、移動、スケールなどのプリセットを適用し、タイムライン上で重ね合わせたりシーケンス化したりして、素早くアニメーションを構築できます
• アニメーテッドコンポーネント: コンポーネントにモーションを埋め込み、デザインシステム全体で一貫したアニメーションを再利用できます。塗りやタイポグラフィと同様に、コンポーネントがあらゆる画面やファイルにモーションを持ち運びます
• モーションバリアブル: イージング変数を作成し複数モードを定義してアニメーションに適用。ページレベルでモードを切り替えると、参照しているすべてのアニメーションが一括更新されます
• Figmaエージェント連携: 自然言語で動作を記述すると、コンポーネントやトークンを基盤にした実際のキーフレームをタイムライン上に自動構築。複数のプロンプトを同時実行でき、反復作業を効率化します
• シェーダーエフェクト対応: シェーダーが公開するすべてのプロパティをモーションタイムラインでキーフレーム化可能。スライダーや入力フィールドで制御できるものはすべて時間軸でアニメーションできます
• 多様なエクスポート: MP4、GIF、SVG、WEBMとして直接エクスポート可能。Dev ModeではCSS、JSON、React、motion.devのコードをコピーして開発者に完全な意図を伝えられます
• MCP互換性: アニメーションフレームへのリンクをコーディングエージェントと共有し、モーションコンテキストを完全に保持したまま実装に反映できます

活用シーン

• デザインシステムの構築: アトミックデザインにモーションを組み込み、コンポーネントライブラリとして公開することで、個人の作業からチーム全体の資産へと拡張できます
• プロトタイピング: 3Dトランスフォーム（近日公開）と組み合わせて、これまでFigmaでは不可能だった空間的なインタラクションを含む高度なプロトタイプを作成できます
• 開発者との連携: Dev ModeのMotionタブでタイムライン全体を検査可能にし、タイミング値、イージングカーブ、キーフレームを解釈なしで読み取り、意図した通りのモーションを実装できます
• モーション学習: アニメーション初心者がエージェントにガイダンスを求め、何が機能しているか、そうでないかのフィードバックを得ながら、モーションの感覚を素早く養成できます

対象ユーザー

UI/UXデザイナー、モーションデザイナー、プロダクトデザイナー、およびデザインシステムを管理するチーム向けです。特に外部ツールとのコンテキストスイッチを減らし、デザインから実装までのワークフローを一本化したい組織や、モーションを民主化して専門家に依存しない制作環境を構築したい企業に最適です。