Figma Motionとは｜2026年新搭載タイムラインでUIアニメーションを作る方法

Figma Motionは、2026年6月24日のConfig 2026で発表され、同日にオープンベータとして公開されたアニメーション機能です。Design・Draw・Devと並ぶ新しい「Motion」モードがキャンバスに加わり、タイムラインとキーフレームで動きを直接組めるようになりました。これまでFigmaで動きを付けるには、プロトタイプ機能やSmart Animate、外部のAfter Effects、サードパーティのMotionプラグインに分かれて頼る場面が多くありました。この記事では、新しいMotionモードの使い方、従来手法との違い、ボタンやスクロールなど用途別の作り分け、CSS・React・GIFへの書き出しまでを順に整理します。

まとめ：Figma Motionの要点と従来プロトタイプ・プラグインとの使い分け

Figma Motionは、キャンバス上のタイムラインでUIアニメーションを作る新しいモードです。2026年6月24日にオープンベータで公開され、Starter（無料）でも書き出し制限つきで使えます。position・scale・rotation・opacityを別々にキーフレーム化でき、fade・move・scaleのプリセットやFigmaエージェントで動きの叩き台も作れます。

Smart Animateは「フレーム間の画面遷移」を再現する機能で、Motionは「1つのフレーム内の時間軸アニメーション」を作る機能です。両者は役割が違います。サードパーティのMotionプラグインやFigmotionは、ネイティブのMotionモードと比べると書き出し品質やデザインシステム連携で差が出ます。

作った動きはDev ModeでCSS・JSON・Reactとしてコードコピーでき、MP4・WebM・Animated SVG・GIFで書き出せます。MCPに対応するため、アニメーションをコーディングエージェントへ直接渡せる点も新しい部分です。ただし、数十秒の映像表現や凝ったキャラクターアニメーションは、現時点でもAfter Effects＋Lottieのほうが向きます。Motionが適する仕事と、従来手法を残すべき仕事を見極めることが、導入で失敗しない分かれ目になります。

Figma Motionとは｜Config 2026で加わったキャンバス上の新Motionモード

まず、Figma Motionが何で、Figmaのどこに位置づくのかを押さえます。発表の経緯と、従来の制作フローがどう変わるのかを具体的に見ていきます。

2026年6月24日Config 2026で発表され即日提供開始した経緯と概要

Figma Motionは、2026年6月24日のConfig 2026で、code layers・shaders・generative plugins・Weaveツールと同時に発表されました。これらのうちcode layersは7月からの早期アクセス開始ですが、Motionは発表と同じ日にオープンベータとして使えるようになっています。提供時期が機能ごとに異なるため、混同しないよう注意してください。発表当日から、誰でもオープンベータとして触れられる状態になっています。

Design・Draw・Devに並ぶ4つ目のモードとしての位置づけ

Motionは、Design・Draw・Devに続く4つ目のモードです。任意のフレームをMotionモードに切り替えると、デザインの隣にタイムラインが現れます。特徴的なのが時間軸コメント。「この0.3秒地点が速い」といった指摘を、具体的な瞬間に紐づけられます。レビューは言葉の往復から、再生位置を指した会話へ変わります。

外部ツール不要でキャンバス内に完結したUIモーション制作範囲

Motionの動きは、コンポーネントや変数、チームと同じファイルの中に置かれます。これまでAfter Effectsや別プラグインへ書き出して作っていたUIモーションが、デザインと同じ場所で完結します。なお、3D transformsは発表時点では順番待ちリスト登録制で、全ユーザーへの開放は段階的です。

Smart Animate・プラグイン・After EffectsとMotionの違いと使い分け基準

「Figma アニメーション」で検索すると、上位記事の多くはプロトタイプ機能やSmart Animate、プラグインの解説です。これらとMotionは何が違うのか。混同しやすい4つの手法を、用途の境界で整理します。

Smart Animateとの違い｜画面遷移かタイムライン制作かの境界

Smart Animateは、プロトタイプのトランジションの一種です。2つのフレーム間で名前と階層が一致するレイヤーを検知し、位置・拡大縮小・不透明度・回転などの差分を自動で補間します。つまり「画面Aから画面Bへ移るときの動き」を作る機能です。一方のMotionは、1つのフレームの中で時間軸に沿って動きを組み立てます。ログイン画面からホーム画面への遷移はSmart Animate、アイコンが回転し続けるローダー単体はMotion、という切り分けが実務の目安になります。

Motionプラグイン・Figmotionと比べた優位点と非互換の注意

Motionモードが登場する前は、コミュニティの「Motion」プラグインやFigmotionが同じ役割を担っていました。ネイティブのMotionモードは、Dev Modeでのコードコピーやデザインシステム連携で一歩進んでいます。下表で主な違いを比較します。

注意点として、プラグインやFigmotionで作った既存のアニメーションは、Motionモードへ自動で移行されません。乗り換える場合はタイムライン上で組み直す前提で計画してください。

After Effects・Lottie運用と比較した受け渡しコストの差

After Effectsで作ったアニメーションは、Lottie（JSON）に書き出して実装へ渡すのが一般的でした。デザインツールと制作ツールが分かれるぶん、修正のたびに往復が生じます。MotionはDev Modeから直接コードを取り出せる構造で、中間工程を省けるのが利点です。ただし長尺の映像やパーティクル表現など表現の天井が要る仕事では、今もAfter Effects＋Lottieが扱いやすい場面が残ります。

Motionモードの使い方｜タイムライン・キーフレーム・プリセットの基本操作

ここからは、実際にMotionで動きを作る基本操作です。タイムラインの開き方から、キーフレーム、プリセット、エージェント生成までを手順で押さえます。

Motionモードへの切り替えとタイムライン表示までの基本ステップ

動きを付けたいフレームを選び、Motionモードに切り替えるところから始めます。基本の流れは次のとおりです。

1. 動かしたいレイヤーを含むフレームを選択する
2. モード切替からMotionを選び、タイムラインを表示する
3. レイヤーをドラッグして開始・終了のタイミングを調整する
4. 再生ヘッドをスクラブして、任意の瞬間の見た目を確認する

タイムラインはデザインの隣に出るため、動きを見ながら同じ画面で値を直せます。

position・scale・rotation・opacityの個別キーフレーム化

Motionでは、position（位置）・scale（拡大縮小）・rotation（回転）・opacity（不透明度）を、それぞれ独立してキーフレーム化できます。たとえば不透明度だけを0から1へ変えつつ、位置は固定したままにする、といった指定が可能です。自動キーフレーム（auto keyframing）をオンにすると、再生ヘッドを動かしている間に加えた変更が自動で記録されます。キーフレームを1つずつ手で打つ手間を省けるのが利点です。

自動キーフレームとfade・move・scaleプリセットの使い方

素早く動きを付けたいときは、fade・move・scaleのプリセット（animation styles）が起点になります。レイヤーを選ぶとプリセットのパネルが現れ、選ぶだけで標準的な動きが入る仕組みです。複数のプリセットをタイムライン上に重ねれば同時再生、横にずらして並べれば順番に再生されます。まずプリセットで形を作り、細部をキーフレームで詰める進め方が無駄になりません。

Figmaエージェントに動きの叩き台を生成させるプロンプト手順

動きの当たりが付かないときは、Figmaエージェントにプロンプトを渡して叩き台を作らせる方法があります。「フェードインしてから下からスライドアップ」のように動きを言葉で指示すると、タイムライン上に初期状態が生成されます。生成された動きをそのまま使うのではなく、タイミングやイージングを手で微調整するのが前提です。このエージェント機能は有料プランで使えます。なお、AIエージェントがFigmaファイルへ直接書き込む仕組みは、AIがFigmaに直接書き込めるuse_figmaでも整理しています。

ボタン・ホバー・ループ・スクロールを例にしたUIアニメーションの作り分け

基本操作を踏まえ、実務でよく作るUIアニメーションを具体例で見ていきます。所要時間やイージングの目安を添えて、用途別に作り分けます。

ボタン・ホバーの状態変化を表すキーフレーム設定と所要時間の目安

ボタンのホバー演出は、opacityとscale、必要に応じてpositionを少しだけ動かすのが基本です。所要時間は200〜300ミリ秒、イージングはease outが自然に見えます。動かしすぎると操作が重く感じるため、scaleは1.0から1.03程度が上品な範囲。モーダルやドロワーなど開閉のあるUIにも、同じ考え方を当てはめられます。各コンポーネントの役割の違いはモーダル・ダイアログ・ドロワーの違いで整理できます。

ローディング・回転で使う無限ループアニメーションの組み方

ローディングアイコンのような無限ループは、rotationを0度から360度まで変化させて作ります。回転は一定速度で回したいので、イージングはlinear（線形）を選びます。所要時間は800〜1200ミリ秒が目安。ループ再生にすると滑らかに回り続けます。スピナーやプログレス表示は、このループ1つを使い回すのが管理しやすい組み方です。

スクロール連動・フェードイン・モーダル開閉など表示演出の作り分け

要素の登場演出は、opacityを0から1へ変えるフェードインと、positionを下や横からずらして戻すスライドインの組み合わせが定番です。フェードインは300〜400ミリ秒、移動量は16〜24ピクセル程度が読みやすい範囲です。モーダルの開閉は、背景のオーバーレイをフェードさせつつ本体をscaleで少し拡大すると自然に見えます。演出の種類ごとに値の目安を決めておくと、画面間で動きの粒度が揃います。

アニメーションコンポーネントとモーション変数によるモーションのシステム化

1画面ずつ動きを作るだけでなく、Motionは動きをデザインシステムの一部として持てます。スプリントごとに動きを作り直す無駄を避けるための仕組みを見ていきます。

アニメーションコンポーネントで動きを全画面へ伝播させる仕組み

コンポーネントに一度動きを付けると、その動きはfillやtypographyと同じように、全画面と全コラボレーターのファイルへ伝播します。たとえばトーストの表示アニメーションをコンポーネント側に持たせれば、どの画面で使っても同じ動きが再現される仕組みです。動きが人やファイルごとにバラつく問題を、コンポーネント単位で解消できます。なお、この完全なデザインシステム連携は有料プランの範囲です。

モーション変数とモード切替でイージングを一括管理する設計

モーション変数（motion variables）を使うと、イージングを変数として定義し、複数のモードを持たせられます。たとえば「標準」「ゆっくり」のモードを作っておき、ページ単位でモードを切り替える運用が可能です。すると、その変数を参照するすべてのアニメーションが一度に更新されます。色やテキストの変数と同じ考え方を、動きにも広げられるわけです。ブランドや製品ごとに動きの質感を切り替えたいときに効きます。

デザインシステムへ組み込むアトミックモーションの設計指針

動きを「一度定義し、どこでも適用する」状態にするのが、アトミックモーションの狙いです。ここで避けたいのが、最初から全アニメーションを変数化して管理が複雑になるパターン。まずは出現頻度の高いボタン・トースト・モーダルの3種を変数とコンポーネントに落とし込み、再利用が定着してから対象を広げる順序が現実的です。最初に作り込みすぎないことが、運用を続けられる設計につながります。

Dev Modeとコード書き出し｜CSS・JSON・Reactで実装へ繋ぐ開発連携

デザイナーが作った動きを、開発へどう渡すか。MotionはDev Modeとコード書き出し、MCP連携で実装側と繋がります。

Dev Modeで可読化されるタイミング値とイージングカーブの確認

Dev Modeに切り替えると、タイムライン全体が検査可能な状態で表示されます。すべてのタイミング値、イージングカーブ、キーフレームが、解釈を挟まずそのまま読める状態です。開発者が「この動きは何ミリ秒で、どのカーブか」を推測する必要はありません。デザイナーが承認した動きと、実装が参照する値が一致するため、認識のずれが起きにくくなります。

CSS・JSON・React・MP4・GIFなど書き出し対応形式の整理

Motionの出力は、実装用のコードと、共有用の動画・画像に分かれます。用途で選び分けてください。

• コードコピー：CSS、JSON、フレームワーク向けのReact
• 動画：MP4、WebM
• 画像・ベクター：Animated SVG、GIF

Web実装ならCSSやReact、軽量な共有ならGIF、というように出力先で形式を切り替えます。デザインからコードへの直接変換は、別フレームワークでも進行中。Figma to Qt 1.0が実現するQMLコード直接生成のように、承認済みデザインをそのまま実装へ渡す事例が増えています。Figmaも、対応形式を今後さらに増やすとしています。

MCP対応でアニメーションをコーディングエージェントへ渡す連携

MotionはMCP（Model Context Protocol）に対応しています。アニメーション付きのフレームを、そのままコーディングエージェントへ渡して実装させられる仕組みです。デザイン段階の動きと、エージェントが生成するコードの間にある翻訳作業を減らせます。手作業でコードを起こす工程を省きつつ、デザイナーの意図を保ったまま実装へ橋渡しできる点が、従来の受け渡しとの違いです。

Figma Motionを使うべき場面と、プロトタイプ・外部ツールが適する場面

最後に、Motionをどこで使い、どこで使わないかを条件付きで言い切ります。新機能だからと全部を寄せると、かえって工数が増えます。

Motionが適する場面｜再利用前提のデザインシステム内UIモーション

Motionが最も効くのは、コンポーネント化して繰り返し使うUIモーションです。ボタンのホバー、トーストの表示、アコーディオンの開閉、ローダーの回転などが該当します。これらはコンポーネントとモーション変数に載せれば、画面をまたいで動きが揃い、Dev Modeでそのまま実装へ渡せます。反復するUIの動きは、Motionに集約して問題ありません。

Motionを避けるべき場面｜複雑な映像表現と既存AEワークフロー

一方で、数十秒に及ぶ映像、パーティクル、3Dリグを使うキャラクターアニメーションは、オープンベータ時点のMotionでは表現が足りません。これらは無理にMotionへ寄せず、After Effects＋Lottieの運用を続けるのが妥当です。よくある失敗が、既存のアニメーション資産をすべてMotionへ移管しようとして、組み直しに想定外の工数を取られるケースです。動きの種類で線を引き、移すものと残すものを分けてください。

プロトタイプと混同しやすい注意点とアニメーションが動かない原因

「アニメーションが動かない」と感じるとき、原因の多くはモードとプランの取り違えです。プロトタイプタブを見ているのにMotionの動きを探していないか、Motionモードに切り替えているかを確認します。Starter（無料）では書き出しに制限があるため、出力できないのが仕様の場合もあります。再生ヘッドを動かさずに静止画で見ている、というプレビュー操作の見落としも典型例です。モード・プラン・プレビューの3点を順に確認すると、原因の切り分けが進みます。

よくある質問

Figma Motionについて、検索でよく見られる5つの質問に回答します。

Figma Motionは無料プランでも使えますか？

使えます。Figma Motionは2026年6月24日からのオープンベータで、Starter（無料）でも書き出しに制限はあるものの動き自体は作れます。Full seatのユーザーなら、すべてのプランでモーションの基本機能と書き出しが利用可能。一方、アニメーションコンポーネントやモーション変数によるデザインシステムへの完全な組み込み、Figmaエージェントによるモーション生成は有料プランの機能です。まず無料で試し、システム化や書き出しの要件が出た段階で有料プランを検討する順序が無駄になりません。

Figma MotionとプロトタイプのSmart Animateはどう違いますか？

対象とする動きが違います。Smart Animateはプロトタイプの機能で、2つのフレーム間で一致するレイヤーを検知し、画面遷移時の動きを自動補間する仕組みです。Motionは1つのフレーム内で、タイムラインとキーフレームを使って時間軸の動きを組み立てます。画面から画面への遷移はSmart Animate、要素単体の継続的な動きはMotion。この切り分けを覚えておくと迷いません。両者は排他ではなく、遷移はプロトタイプ、画面内の演出はMotion、と併用もできます。

作ったアニメーションをGIFや動画として書き出せますか？

書き出せます。動画はMP4とWebM、画像・ベクターはGIFとAnimated SVGに対応しています。実装向けには、CSS・JSON・フレームワーク向けReactのコードをDev Modeから直接コピー可能。社内やクライアントへの共有はGIFやMP4、Web実装はCSSやReact、と出力先で形式を選び分けてください。なお、Starter（無料）では書き出しに制限があり、対応形式は今後さらに追加される予定です。

アニメーションが動かない・再生されないときの原因は？

多くは、モードとプラン、プレビュー操作の確認漏れです。プロトタイプタブを見ていてMotionモードに切り替えていない、というモードの取り違えが最も多い原因です。次に、Starter（無料）では書き出しに制限があるため、出力できないのが仕様の場合があります。再生ヘッドをスクラブしていない、プレビューを再生していない、という操作の見落としも起こりがちです。モード・プラン・プレビューの順に確認すると、原因を切り分けられます。

従来のMotionプラグインやFigmotionはもう不要になりますか？

多くの用途はネイティブのMotionモードで代替できますが、すべてが不要になるわけではありません。Dev Modeでのコードコピーやデザインシステム連携は、ネイティブのMotionが優位です。一方で、Lottie（JSON）への書き出しを前提にした既存の実装フローや、プラグインで作り込んだ過去の資産がある場合は、すぐには移行できません。プラグインで作ったアニメーションはMotionモードへ自動移行されないため、新規はMotion、既存資産は段階的に判断、という方針が現実的です。

関連記事

• Figma MCP Serverとは？概要と基本機能を徹底解説：MotionのMCP連携と合わせて、Figmaと開発をつなぐサーバー側の仕組みを把握できます。
• Galileo AIから進化したGoogle Stitchの全体像：FigmaエクスポートやUI生成など、デザインからコードへ向かう他ツールの動きと比較できます。