Figma Motionは、Figmaのデザインファイルの中にタイムラインを持たせ、キーフレームでアニメーションを作る機能です。2026年6月24日にオープンベータとして公開され、9月30日の更新でLottie書き出し・音声・テキストアニメーションが加わりました。無料のStarterプランでも使えますが、書き出しは1920×1080・30fpsまでに制限されます。
この記事では、Motionモードの開き方と閉じ方、キーフレームとイージングの操作、MP4・GIF・Lottieへの書き出し設定、Dev Modeでの受け渡しまでを、Figma公式ヘルプの記載に沿って順に説明します。
まとめ：Figma Motionの要点（2026年10月時点）
- ツールバーの切り替えを「Motion」にすると画面下にタイムラインが出る。編集権限（can edit）があれば全プランで使える。オープンベータのため、機能は今後も変わる。
- 動きはキーフレーム（2点以上）で作る。手で打つ、自動キーフレームで記録する、fade・move・scaleなどのプリセットを置く、Figmaエージェントに生成させる、の4通りがある。
- イージングはベジェ曲線7種（Linear・Ease in・Ease out・Ease in and out・Back系3種）とHold、スプリング4種（Gentle・Quick・Bouncy・Slow）から選び、独自の曲線も作れる。
- 書き出しはMP4・WebM・GIF・SVGに加え、9月30日からLottieとdotLottieに対応した。ただしシェーダー・動画・角度グラデーションはLottieで動かない。
- Dev ModeでのCSS・React・JSONのコードコピーは、有料プランのFullシートかDevシートが必要。アニメーションコンポーネントの公開とエージェントでの生成も有料プランのFullシートが条件になる。
Figma Motionとは｜デザインファイルにタイムラインを足す機能
Motionは、Design・Draw・Devと並ぶFigmaのモードの1つです。動きはコンポーネントや変数と同じファイルの中に置かれ、After Effectsなどの別ツールへ書き出して作り直す工程が要りません。
公開から9月30日の更新までの経緯
Figmaは2026年6月24日、公式ブログ「Introducing Figma Motion」でMotionを発表し、同日からオープンベータとして段階的に配信しました。その後の主な追加は次のとおりです。
| 時期 | 追加された機能 |
|---|---|
| 2026年6月24日 | タイムライン・キーフレーム・プリセット・エージェント・Dev Mode連携 |
| 2026年7月（ヘルプ公開） | モーションパスの編集、パストリム（線の描画アニメーション） |
| 2026年9月30日 | カスタムアニメーションスタイル、音声、テキストアニメーション、Lottie・dotLottie書き出し |
| 未提供 | 3D変形（製品ページで「近日公開予定」・待機リスト登録制） |
7月の2項目はリリースノートで提供日を確認できなかったため、Figmaヘルプセンターに手順記事が作成された日（モーションパス7月7日・パストリム7月24日）を目安として載せています。9月30日の更新内容はFigmaのリリースノートに「Motion adds custom styles, audio, text animations and Lottie export」として載っています。
プロトタイプのSmart Animateとの違い
Smart Animateは、プロトタイプで2つのフレームを行き来するときに、名前とレイヤー階層が対応するレイヤーの位置や大きさの差を補間する機能です。動きの単位は「画面Aから画面Bへの遷移」になります。Motionは1つのフレームの中で、時間軸に沿ってプロパティを変化させます。ローダーの回転、トーストの出現、ロゴのアニメーションのように、画面遷移を伴わない動きはMotionで作ります。
画面から画面への遷移にタイムラインを付ける機能は、Figma Motionの製品ページで「近日公開予定」とされており、2026年10月時点で遷移の演出はまだプロトタイプ側の担当です。
Figma Motionの使い方｜モードの切り替えからキーフレームまで
操作の大半は、画面下のタイムラインと右サイドバーで行います。キーフレームを打てるプロパティには、右サイドバーの入力欄の横にひし形のアイコンが出ます。
Motionモードの切り替えとタイムラインの非表示
ツールバーの切り替えで「Motion」を選ぶと、画面下にタイムラインが表示されます。Motionの選択肢が見当たらない場合は、そのファイルの編集権限があるかを確認します。タイムラインのヘルプによると、タイムラインはMotionモードの間しか表示されません。
Motionモードを解除するには、ツールバーの切り替えを「Design」に戻します。Motionモードのまま作業領域だけ広げたいときは、タイムライン右上の「Collapse timeline」で最小化するか、上端をドラッグして高さを縮めます。コンポーネントプロパティの変更やコンポーネントの作成はDesignモードでしかできないため、モードの行き来は頻繁に発生します。
タイムラインの操作部と初期値
タイムライン上部の操作部には、次の項目が並びます。
| 項目 | 働き |
|---|---|
| Play／Pause | 再生と停止（Spaceキーでも切り替え） |
| Auto-keyframe | 変更を自動でキーフレームとして記録 |
| Current time | 再生ヘッドの位置。数値入力でその時刻へ移動 |
| Duration | 全体の長さ。新規アニメーションは2000ミリ秒 |
| Time unit | 秒とミリ秒の表示切り替え |
| Playback | Loop（繰り返し）・Once（1回）・Ping-pong（往復） |
ズームはタイムライン右側のスライダーか、Macなら Command、Windowsなら Control を押しながらマウスホイールを回します。レイヤーごとのトラックをドラッグすると、そのオブジェクトに付けた動き全体の開始時刻を動かせます。
キーフレームを手で打つ手順
動きには最低2つのキーフレーム（開始の状態と終了の状態）が要ります。キーフレームのヘルプでは、正方形を500ミリ秒で180度回す例として、0ミリ秒に回転0、500ミリ秒に回転180のキーフレームを置く手順が示されています。
- 再生ヘッドを動きの開始位置に置く
- 動かしたいプロパティの横にある「Add keyframe」を押し、開始値を入れる
- 再生ヘッドを終了位置へ動かし、終了値を入れる（2つ目のキーフレームが自動で入る）
- 2つのキーフレームを結ぶ線をクリックし、Easingメニューで曲線を選ぶ
- Spaceキーで再生して確認する
キーフレーム同士の間隔が広いほど動きは遅くなります。キーフレームはShiftを押しながら再生ヘッドへドラッグすると吸着し、Deleteキーで削除できます。プロパティ名を選んでDeleteを押すと、そのプロパティのキーフレームがまとめて消えます。位置にキーフレームを打つと、キャンバス上に点線の軌跡（モーションパス）が出て、Command（Windowsは Control）を押しながらハンドルを引くと軌跡を曲線にできます。
自動キーフレームの記録とプリセットの適用
自動キーフレーム（Auto-keyframe）を有効にすると、タイムライン上部と再生ヘッドに赤いバーが出て、その間の変更がすべてキーフレームとして記録されます。ヘルプは、誤って別の値を触ると意図しないキーフレームが入ると注意しています。記録が終わったら必ずオフに戻してください。
キーフレームを打たずに動きを付けるなら、右サイドバーのAnimations欄の「＋」からプリセットを選びます。プリセットは再生ヘッドの位置から始まり、タイムライン上でドラッグして開始時刻と長さを変えられます。複数のプリセットを一度に当てる「composite animation style」もあり、9月30日からは自作の動きをアニメーションスタイルとして保存し、ライブラリへ公開できるようになりました。
Figmaエージェントによる生成手順と利用条件
ファイル左のナビゲーションにある「Agents」を開いて動きを言葉で指示すると、エージェントがタイムラインにキーフレームを置きます。結果はタイムライン上で手直しするか、追加のプロンプトで詰めます。FigmaのAIワークフローの解説は、プロンプトに入れる要素として、案の数・動かす要素・目的・質感・案ごとに変える値・固定する値の6つを挙げています。同記事の例を訳すと次のようになります。
「この積み上げ棒グラフに3通りの動きを作って。色付きの棒のグループを1つの形として動かし、軸・目盛線・ラベル・枠は動かさない。1案はきびきびとデータ寄り、1案はバウンドのある遊び心、1案は映画的でゆったり。イージングとずらし（stagger）は案ごとに変え、全体の長さは3案で揃えて。」
エージェントによる生成は有料プランのFullシートが必要です。ベータ機能のFAQによると、同FAQは、エージェントがベータの間はAIクレジットを消費せず、正式提供後は通常の消費が適用されると説明しています。リリースノートでは、Figmaエージェントは2026年10月6日に正式提供（ベータ終了）となりました。このため、10月6日以降はエージェントでの生成にAIクレジットが消費される前提で計画してください。生成されたキーフレームを手で直す操作がクレジットを消費することはありません。エージェントがFigmaファイルへ書き込む仕組みそのものは、use_figmaとは？Figma MCPでAIがキャンバスに書き込む仕組みと使い方・制限で扱っています。
Motionが表示されない・書き出せないときの確認点
- ツールバーにMotionが出ない：そのファイルの編集権限が必要。Figma for Governmentプランでは提供されていない。
- 書き出しの「Animated」タブが出ない：キャンバスに直接置いたトップレベルのフレームを選んでいるか確認する。動くレイヤーはフレームの中に入っている必要がある。
- インスタンスの動きを直せない：アニメーション付きインスタンスの長さとプロパティはメインコンポーネント側でしか編集できない。
- キーフレームが勝手に増える：自動キーフレームが有効のまま（タイムライン上部の赤いバー）になっている。
イージングとスプリングの選び方
キーフレーム間の線、またはプリセットの設定からEasingメニューを開いて選びます。Figmaのイージングのヘルプが挙げる種類と用途は次のとおりです。
| 種類 | 動き方 | 公式が挙げる用途 |
|---|---|---|
| Linear | 一定速度 | スピナー・進捗表示 |
| Ease in | ゆっくり始まり加速 | 画面から出ていく要素 |
| Ease out | 速く始まり減速 | 画面に入ってくる要素 |
| Ease in and out | 両端で減速 | 画面内での移動 |
| Back系3種 | 逆方向への溜め・行き過ぎ | 遊び心のある出入り |
| Hold | 即座に終了値へ跳ぶ | 段階的なシーケンス |
| Spring | Gentle・Quick・Bouncy・Slow | 弾む動き |
独自の曲線は「Custom bezier」を選び、制御点をドラッグするか cubic-bezier の4つの値を直接入力します。y座標が0〜1の範囲を超えると、Back系のような行き過ぎが生まれます。スプリングは「Custom spring」でBounceの値を調整します。曲線の4つの値の意味はベジェ曲線とは？仕組みをわかりやすく解説｜数式・Illustratorでの描き方・スプラインとの違いで詳しく説明しています。
キーフレーム間の既定は、Linearではなく自作扱いのベジェ曲線です。公式チュートリアルのローダー作例でも、自動キーフレームで打った回転に既定の曲線が付き、手でLinearへ変える手順が入っています。作例がLinearへ変える理由として挙げているのは、ループし続けるローダーは一定速度のほうが自然に見えるという点です。回転し続けるものは、曲線をLinearに変えてから確認してください。
公式チュートリアルの作例｜ローダー・線の描画・テキスト・音声
Figmaヘルプの「Motion design fundamentals」には、値まで指定された作例があります。初めて触るなら、この数値どおりに組むと操作を一通り体験できます。
一定速度で回るローダー（1400ミリ秒・Linear）
ローディングアニメーションの作例では、200×200のフレームに直径80・線幅14の円弧を置き、タイムラインの長さを既定の2000ミリ秒から1400ミリ秒に縮めます。自動キーフレームを有効にして再生ヘッドを1400ミリ秒へ動かし、回転に360を入れると、0ミリ秒に0度、1400ミリ秒に360度のキーフレームが自動で入ります。最後にキーフレーム間の曲線をLinearへ変えれば、途切れずに回り続けるローダーになります。
パストリムによるスピナーの伸縮設定
パストリムは、線のどこからどこまでを表示するかを0〜100%で動かす機能で、手書き風の描画やスピナーに使います。中央揃えの線（Center）にしか効きません。前述の作例では、円弧の開き（Sweep）を60%にして回転の終了値を-185度に変え、Path trim end を0ミリ秒で20%から750ミリ秒で100%へ、Path trim start を650ミリ秒で20%から1400ミリ秒で80%へ動かします。始点と終点を少しずらすことで、伸びながら縮む動きになります。
右サイドバーのプリセット「Path」でも同じ系統の動きを付けられますが、こちらは開いたパスに1つまでという制限があります。閉じた円のようなパスはキーフレームで組みます。
テキストアニメーションの適用単位と時間差設定
9月30日の更新で、テキストレイヤーに専用のアニメーションスタイルが付きました。Animations欄で「Text」を選び、動きの単位を文字・単語・行・段落から選びます。ずらし方はText stagger settingsで調整します。出現と退場の組み合わせ済みスタイルは「Text enter」「Text exit」から選べ、カーソルを重ねるとキャンバス上でプレビューされます。アニメーションを付けた後もテキストは編集できます。
音声トラックの追加・分割と動画書き出し
音声ファイルをフレームかタイムラインへドラッグすると、音声トラックが追加されます。対応形式はAAC・MPA・MP3・WAVです。再生ヘッドの位置でトラックを分割するショートカットは、Macが Option+K、Windowsが Alt+K です。音声はMP4とWebMで書き出すときに一緒に出力されます。
アニメーションコンポーネントと変数による動きの共通化
ボタンやトーストの動きを画面ごとに作り直すと、担当者ごとに値がばらつきます。Motionでは動きをコンポーネントと変数に持たせ、デザインシステムの一部として配れます。
アニメーションコンポーネントの作成と公開条件
アニメーションコンポーネントのヘルプによると、作り方は通常のコンポーネントと同じで、Designモードに戻ってから Option+Command+K（Windowsは Ctrl+Alt+K）で作成します。Motionモードではコンポーネントを作れません。インスタンスはタイムライン上に紫色のトラックで表示され、開始時刻はずらせますが、長さとプロパティはメインコンポーネント側で直します。
作成は全プランでできます。ライブラリへ公開してチームに配るには、有料プランのFullシートが必要です。
タイミング変数・イージング変数とモード
Figmaの変数には、ミリ秒の長さを持つTiming変数と、曲線やスプリングを持つEasing変数があります。Easing変数に「標準」「ゆっくり」のような複数のモードを持たせ、ページ単位でモードを切り替えると、その変数を参照するすべてのアニメーションが一度に変わります。Easing変数で共通化できるのは加減速や弾み方です。プリセットの所要時間や遅延を共通化する場合は、DurationやDelayにTiming変数を適用します。
書き出し｜MP4・WebM・GIF・SVG・Lottieの設定と制限
動きは、共有用のファイルとして書き出す方法と、Dev Modeでコードを渡す方法の2通りで外へ出せます。ここでは前者を扱います。
動画・GIF・SVGの書き出し手順と無料プランの上限
書き出しのヘルプの手順は次のとおりです。アニメーションを含むトップレベルのフレームには、レイヤー一覧でMotionのアイコンが付きます。
- トップレベルのフレームを選ぶ
- 右サイドバーのExport欄で「Animated」タブに切り替える
- 形式（MP4・WebM・GIF・SVG）、サイズ、フレームレートを選ぶ。MP4とWebMは画質、GIFはループの有無も選べる
- Exportを押し、新しいタブで開いたファイルをダウンロードする
1920×1080を超えるサイズと30fpsを超えるフレームレートでの書き出しは、有料プランだけで使えます。動画が粗く見える場合は、書き出しサイズと表示サイズ、元画像の解像度、MP4・WebMの画質設定を確認してください。
LottieとdotLottieで崩れる要素
Lottieは、アニメーションをJSONのデータとして持つ形式です。ベクター部分は拡大してもぼやけず、実装側で色や再生区間を制御できます。ただし、画像素材や画像として書き出された効果は、拡大時に粗くなることがあります。Figmaでは、Lottie（圧縮なしのJSON・1ファイル1アニメーション）とdotLottie（画像やフォントを同梱した圧縮形式・複数アニメーション可）の2種類を選べます。
一方で、ヘルプには次の非対応・一部対応が明記されています。
| 要素 | Lottieでの扱い |
|---|---|
| シェーダー | 非対応（動かない画像になる） |
| 動画 | 非対応（MP4・WebM・GIFで書き出す） |
| 角度グラデーション | 非対応（画像になる。線形か円形に置き換える） |
| ドロップシャドウ・ノイズ・ガラス | 一部対応（最初のフレームの見た目で固定） |
影やガラス効果を動かす前提のデザインは、Lottieにすると影だけ止まります。本番で使うLottieプレイヤーで再生して確かめてから実装に渡してください。LottieとRiveのどちらで実装するかの比較はRiveとLottieの違いを徹底比較｜ファイルサイズ・インタラクティブ性・Unity対応で選ぶにまとめています。
Dev ModeとMCPによる実装への受け渡し
開発者にファイルではなく値とコードを渡す場合は、Dev ModeとFigma MCPサーバーを使います。どちらも有料プランのFullシートかDevシートが必要です。
Dev Modeでコードをコピーする手順
開発への受け渡しのヘルプによると、アニメーションのあるフレームを選び、InspectパネルのMotionタブで「Show in timeline view」を押すと、読み取り専用のタイムラインとコードが並んで表示されます。コードの初期表示はCSSで、形式の切り替えでReactとJSONを選べます。公式ブログは、React向けとしてmotion.dev形式のコードにも触れています。motion.dev（旧Framer Motion）側の書き方はFramer Motion（現Motion）とは｜motion/reactの使い方とeasing・springの既定値【v13対応】で解説しています。
MCPサーバー経由のアニメーション情報の受け渡し
MotionはFigma MCPサーバーに対応しています。フレームのリンクをコーディングエージェントへ渡すと、MCPサーバーからキーフレーム・動きの種類・タイミング・イージング曲線が渡り、元の動きに近い実装をエージェントが書けます。対応クライアントやレート制限はFigma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】を参照してください。
実装前に足すべき「動きを減らす」設定
Figmaで決めた動きをそのままWebに載せると、OSで「視差効果を減らす」を有効にしている利用者にも同じ動きが再生されます。Webアクセシビリティの基準であるWCAG 2.2のうち、ここでは自動再生の停止と操作に伴うアニメーションに関する2つの達成基準を扱います。
- 2.2.2 Pause, Stop, Hide（レベルA）：自動で始まり、5秒を超えて続き、ほかのコンテンツと並んで表示される動きには、一時停止・停止・非表示にする手段が必要。ただし、その動きが活動に不可欠な場合は例外
- 2.3.3 Animation from Interactions（レベルAAA）：操作をきっかけに起こる動きは、機能や情報の伝達に必須でない限り無効にできること
PlaybackをLoopにした装飾アニメーションをページに常時表示すると、2.2.2の条件に当たります。停止ボタンなどを付けるか、自動再生が合計5秒以内に終了する設計にしてください。次のCSSは、動きを減らす設定に応じてトーストの出現アニメーションを無効にする例です。常時ループに必要な停止手段や再生時間の制限は、別途実装します（クラス名と値は例）。
.toast {
animation: toast-in 300ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* OSで動きを減らす設定をしている利用者には再生しない */
@media (prefers-reduced-motion: reduce) {
.toast { animation: none; }
}Figma側にこの設定を表す項目はないため、デザインレビューの段階で「減らす設定のときはどう見せるか」を決めておくと、実装側の判断がぶれません。
Figma Motionに寄せる仕事と、After Effects・プラグインに残す仕事
Motionはオープンベータで、ヘルプのMotion関連記事の冒頭には「機能が変わり、性能上の問題が起きる場合がある」と書かれています。すべての動きを移すのではなく、次の条件で線を引くのが安全です。
Motionに寄せるのは、コンポーネントに紐づくUIの動きです。ボタン・トースト・ローダー・テキストの出現のように、画面をまたいで同じ動きを使い回すものは、アニメーションコンポーネントと変数に載せればファイル間で値が揃い、Dev Modeでそのまま値を渡せます。
After Effectsに残すのは、同ツールの合成機能や既存の制作工程を必要とする仕事です。Motion側の書き出しにも制約があり、FigmaのLottie書き出しでは、シェーダーは静止画像になり、影やガラス効果は最初のフレームの見た目で固定されます。動画は非対応のため、MP4・WebMなどへの書き出しを検討します。After EffectsからLottieを書き出している既存の制作ラインがあるなら、新規のUI部品からMotionへ移すのが無理のない順序です。
FigmotionなどのサードパーティのアニメーションプラグインでFigma内の動きを作ってきた場合、2026年10月時点の公式ヘルプのMotion関連記事に、プラグインのデータをMotionへ移す手順はありません。過去の資産は、利用中のプラグインに移行機能があるかを確認し、移行できない動きの再制作工数を見積もってください。デザインと実装をまたぐUIの動きの設計から相談したい場合は、UI/UXデザインの支援でも承っています。
よくある質問
Figma Motionは無料プランでも使えますか？
使えます。編集権限のあるファイルなら、Starterを含む全プランで動きを作って書き出せます。ただし無料プランの書き出しは1920×1080・30fpsまでで、コンポーネントの公開・エージェント・Dev Modeでのコードコピーは有料プランの機能です。
作ったアニメーションをGIFや動画、Lottieで書き出せますか？
書き出せます。トップレベルのフレームを選び、Export欄の「Animated」タブでMP4・WebM・GIF・SVGを選びます。2026年9月30日からはLottieとdotLottieも選べますが、シェーダー・動画・角度グラデーションはLottieでは動きません。
Motionモードを解除してタイムラインを非表示にするには？
ツールバーの切り替えを「Design」に戻すと、Motionモードが解除されタイムラインも消えます。タイムラインはMotionモードの間しか表示されません。Motionモードのまま表示領域だけを広げたい場合は、タイムラインを「Collapse timeline」で最小化します。
Figma Motionで3Dのアニメーションは作れますか？
2026年10月時点では作れません。フレームやテキストをz軸で回転させる3D変形は、Figma Motionの製品ページで「近日公開予定」とされ、待機リストへの登録制です。公式ブログでは、提供後はCSSへの書き出しとMCP連携にも対応するとしています。
FigmotionなどのプラグインやAfter Effectsはもう不要ですか？
UI部品の短い動きはMotionに置き換えられます。After Effectsの合成機能や既存の制作工程が必要な仕事は残ります。Lottieへの対応可否は、制作ツールとは別に書き出し機能と再生環境で確認します。プラグインで作った過去の動きは、移行機能の有無をプラグインごとに確認し、対応していない場合は組み直します。
