Figma Motionの使い方｜キーフレーム・イージング・書き出し

結論から書くと、Figma Motionは無料のスタータープランでも使え、下のツールバーの「Motion」に切り替えるとキャンバスの下にタイムラインが出ます。

キーフレームで位置・回転・大きさ・不透明度を動かし、イージングを選んで、MP4・WebM・GIF・SVG・Lottie・dotLottieで書き出せました。

無料で止められた60fpsの書き出しとDev Modeのコードは、有料プラン（教育プランで確認）で試し、どちらも使えました。

• 確認日：2026年11月1日（無料のスタータープラン）と11月2日（有料の教育プラン）。公式ヘルプと公式ブログの記載はこの日に読んだものです
• 見たもの：公式ブログ「Introducing Figma Motion」（2026年6月24日）、公式ヘルプ（英語版）のFigma Motionの記事6本
• 実機で確かめたこと：Figmaデスクトップアプリ126.10.13（日本語表示）、Windows 11 Pro、無料のスタータープランで、練習用のファイルに952×540のフレームを作り、キーフレーム・イージング・長さと再生・コンポーネントの継承・MP4とLottieの書き出しを試しました
• 有料プランで確かめたこと：教育プランのアカウントで、60fpsと30fpsのMP4、3xの大きさ、Dev ModeのCSS・React・JSONのコードを試しました
• 確かめていないこと：エージェント（AI）での動きの生成、効果音、アニメーションのスタイルを実際に当てること、GIF・WebM・SVG・dotLottieの書き出し、ライブラリへの公開、ブラウザー版、macOS

Figma Motionは2026年11月1日の時点でオープンベータで、画面の表示も「Motion ベータ版」でした。

画面の名前や制限は変わることがあるので、使う前に公式ヘルプも合わせて見てください。

最短の手順と早見表

四角形を1秒かけて右へ動かし、MP4で書き出すまでの最短の手順です。

1. デザインファイルを開き、下のツールバーの右側の切り替えで「Motion」（ベータ版）を押す
2. フレームツールでフレームを作り、その中に長方形を描く（タイムラインに長さ2000ミリ秒の目盛りが出る）
3. 長方形を選び、右パネルの「変換」の位置の右にある◇（キーフレームを追加）を押す
4. タイムラインの左上の現在時刻の欄に1000と打ち、右パネルの位置のXを変える（2つ目のキーフレームが付く）
5. タイムラインの左下の再生ボタンか、Spaceキーで動きを見る
6. フレームを選び、右パネルの「エクスポート」で「アニメーション」のタブを開き、形式をMP4にして「Frame 1をエクスポート」を押す

Figma Motionとプロトタイプのスマートアニメートの違い

Figmaで要素を動かす方法は、これまではプロトタイプのスマートアニメートが中心でした。

Figma Motionは、2026年6月24日の公式ブログ「Introducing Figma Motion」で発表された、キャンバスにタイムラインを足す機能です。

画面から画面へ移る動きを試したいならプロトタイプ、1つの部品の動きを作り込んで動画やLottieにしたいならFigma Motion、と使い分けます。

2画面をつないでスマートアニメートで動かす手順は、Figmaプロトタイプの作り方で順に追えます。

無料のスタータープランでできること・できないこと

公式ブログには、スタータープランでもMotionは使えるが書き出しに制限がある、と書かれています。

公式ヘルプと実機で分かったことを1つの表にしました。

左のエージェントの欄には「アニメーションボタンを作成」「モーションを学ぶ」などの案内が出ましたが、AIクレジットを使うので押していません。

クレジットの残りの見方はFigmaのAIクレジットとは、プランと席の違いはFigmaの料金プランとシートの違いにまとめています。

タイムラインを出す

Figma Motionは、デザインファイルの中の切り替えで使います。

1. デザインファイルを開く
2. 下のツールバーの右側にある4つのアイコンのうち、ツールチップが「Motion ベータ版」のものを押す
3. キャンバスの下にタイムラインが出て、右上の表示が「モーション ベータ版」に変わる

初めて切り替えたときは「アニメーションに音声を加えましょう」という効果音の案内が出たので、「了解」で閉じました。

フレームを1つ作ると、タイムラインの目盛りが0秒から2秒（2000ミリ秒）になりました。

公式ヘルプ「Use the Figma Motion timeline」でも、新しいアニメーションの長さの既定は2000ミリ秒です。

タイムラインの左上には、再生と時間の設定がまとまっています。

単位の「ミリ秒」は、押すと秒の表示に切り替えられると公式ヘルプに書かれています。

キーフレームを打つ（位置・回転・大きさ・不透明度）

フレームの中に描いた長方形（176×175、色2F80ED）に、4つの項目の動きを付けました。

1. 長方形を選び、現在時刻が0のまま、右パネルの位置・拡大縮小・回転・不透明度の右の◇をそれぞれ押す
2. 不透明度の欄に0と打つ（0秒の時点で見えない状態にする）
3. 現在時刻の欄に1000と打つ
4. 位置のXを600、回転を90、拡大縮小を150、不透明度を100にする

◇を押すと、タイムラインの長方形の下に「位置」「回転」「拡大縮小」「不透明度」の行ができ、0秒の所にキーフレームの印が付きます。

1つ目の◇を押した項目は、時刻を変えて値を打つだけで2つ目のキーフレームが付きました。

オートキーフレームはオフのままで、2つ目のために◇をもう1回押す必要はありませんでした。

位置を動かすと、キャンバスには動く道筋が点線で描かれます。

再生位置を500ミリ秒に置くと、それぞれの値は次のとおりでした。

どの項目も、ちょうど中間の値になっています。

右パネルで◇の付いている項目なら、同じ手順で動かせます。

今回の画面では、サイズのW・H、角の半径、塗りの色の欄にも◇がありました。

キーフレームを消すときは、印を押して選び、Deleteキーを押します（公式ヘルプ「Add, select, and delete keyframes」）。

イージングを選ぶ

イージングは、動き始めと止まり際の速さの変化です。

タイムラインで、2つのキーフレームの間の線を押すと、右パネルが「イージング」に変わります。

位置の線を押したときは「線形」で、値は0, 0, 1, 1でした。

上の一覧を開くと、プリセットとライブラリの2つのタブがあります。

• 長押し（次のキーフレームまで値を変えない）
• 線形
• イーズイン・イーズアウト・イーズイン/イーズアウト
• イーズインバック・イーズアウトバック・イーズイン/イーズアウトバック（行き過ぎてから戻る）
• カスタムベジエ

イーズアウトを選ぶと値は0, 0, 0.58, 1になり、500ミリ秒の時点のXは380.5から461.6に変わりました。

前半で大きく進み、後半でゆっくり止まる動きになったということです。

スプリングで弾ませる

イージングの欄の「スプリング」のタブを押すと、ばねのような動きに変わります。

スプリングのプリセットは、なめらか・速い・バウンス・遅い・カスタムスプリングの5つでした。

カスタムスプリング（数値0.25）では、500ミリ秒の時点のXが611.8で、終わりの600を一度超えていました。

「カーブ」のタブに戻すと、元のイーズアウトの値（カスタムベジエ0, 0, 0.58, 1）に戻りました。

項目によって最初のイージングが違った

最初に打った位置の線は線形でしたが、後から打った回転の線を押すと、カスタムベジエの0.5, 0, 0.5, 1（ゆっくり始まりゆっくり止まる形）でした。

どの条件で最初のイージングが決まるのかは、公式ヘルプにも書かれておらず、確かめられていません。

思った速さで動かないときは、キーフレームの間の線を押して、今のイージングを見てください。

長さと再生を変える

長さの欄を2000から1500に変えると、タイムラインの目盛りが1.5秒までになりました。

1秒の所に付けたキーフレームはそのままで、動きが終わった後の0.5秒は止まったままの時間になります。

再生の繰り返し方のアイコンは、押すたびに「一度再生」「ピンポン」と切り替わり、もう1回押すと元のループに戻りました。

ピンポンは、最後まで進んだら逆向きに戻る再生のことです。

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

要素を選んだときの右パネルの「アニメーション」の欄の4つの点のアイコンを押すと、用意された動きの一覧が開きます。

分類は、基本・Enter・サイクル・終了の4つでした。

基本には位置・スケール・回転・サイズ・不透明度、Enterにはバースト・イグナイト・スイープなどがあり、名前の右に高速・中・遅いの目安が付いています。

今回は一覧を見ただけで、要素に当ててはいません。

コンポーネントに動きを付けてインスタンスに継承させる

同じ動きを何か所でも使うなら、動きをコンポーネントに入れておきます。

1. フレームの外に長方形（211×105、色F2994A）を描き、右クリックの「コンポーネントを作成」でコンポーネントにする
2. レイヤーパネルでコンポーネントの中の長方形を選び、0ミリ秒で回転の◇を押す
3. 現在時刻を1000にして、回転を180にする
4. 左の「アセット」から、このファイル内で作ったコンポーネントをキャンバスへドラッグしてインスタンスを置く

メインコンポーネントのタイムラインの行は、青ではなく紫で表示されます。

置いたインスタンスを選んで再生位置を500ミリ秒にすると、中の長方形は90°回っていて、メインに付けた動きがそのまま入っていました。

1000ミリ秒では180°で、メインと同じ値です。

インスタンス側では動きを変えられなかった

インスタンスの中の長方形を選ぶと、右パネルの◇は押しても反応しませんでした。

回転の欄に45と打つとキャンバスでは一瞬45°になりましたが、再生位置を動かすと元の動きに戻り、上書きとしては残りませんでした。

公式ヘルプ「Create and use animated components」にも、同じ説明があります。

長さと動きの項目はメインコンポーネントでしか変えられず、インスタンスはタイムライン上で位置をずらせるだけです。

インスタンスごとに動きを変えたいときは、メインコンポーネントを直すか、別のコンポーネントにします。

公式ヘルプでは、コンポーネントはデザインモードで作ると書かれていますが、今回はMotionのまま右クリックで作れました。

コンポーネントそのものの作り方はFigmaのアセット・コンポーネントの使い方、インスタンスを切り離す操作はFigmaのデタッチとはで説明しています。

動画・GIF・Lottieで書き出す

書き出しは、キャンバスに直接置いた最上位のフレームを選んで行います。

1. 動きの入ったフレーム（最上位のもの）を選ぶ
2. 右パネルの一番下の「エクスポート」で「アニメーション」のタブを押す
3. 形式・サイズ・クオリティ・フレームレートを選ぶ
4. 「Frame 1をエクスポート」を押す（名前の部分は選んだフレームの名前になる）

形式の一覧には、MP4・WebM・GIF・SVG・Lottie・dotLottieの6つがありました。

MP4の初期値は、サイズ1x、クオリティ高、フレームレート30fpsで、下に「サイズ 952×540」「ファイルサイズ 〜869 KB」の目安が出ていました。

フレームレートの一覧は60・30・25・24・12fpsで、無料のスタータープランで60fpsを選ぶと「プロフェッショナルにアップグレード」の案内が出ました。

案内の文面は、高解像度で書き出すにはプロフェッショナルプランへのアップグレードが要る、というものです。

公式ヘルプ「Export animations from Figma」でも、1920×1080を超える大きさか30fpsを超える書き出しは有料プランのみとされています。

MP4を書き出した結果

30fpsに戻して書き出すと、「動画のエクスポート」という新しいタブが開き、進み具合が％で出ました。

1.5秒の動画でも、保存の窓が出るまでに約1分半かかりました。

保存したファイルを調べると、次のとおりでした。

MP4は画面の目安の869KBより小さく、約85KBでした。

0秒の画は真っ白（不透明度0%）で、0.5秒の画では45°回った半透明の四角形が中央付近にありました。

フレームの外に置いたコンポーネントとインスタンスは、Frame 1の書き出しには入りません。

Lottieの中身

Lottieを選ぶと、サイズやフレームレートの欄は消え、ボタンを押すとすぐに保存の窓が出ました。

書き出したJSONの冒頭は次のとおりです（一部を抜き出し）。

{"v":"5.7.0","meta":{"g":"Figma"},"fr":60,"ip":0,"op":90,
 "w":952,"h":540,"nm":"Frame 1","assets":[],
 "layers":[{"ty":4,"nm":"Rectangle 1", ... }]}

frが60、opが90なので、60fpsで90フレーム、つまり1.5秒です。

動画では30fpsまでの制限がありましたが、Lottieは無料のプランでも60fpsの値で出ていました。

位置と大きさは1フレームごとの値に展開され、回転と不透明度はキーフレーム2つと曲線の形のまま入っていました。

回転は、右パネルの90°に対して-90と符号が逆の値で入っています。

Lottieの再生ソフトでの見え方は、今回は確かめていません。

公式ヘルプには、シェーダーと角度のグラデーションは平らな画像になり、動画はLottieに入らない、と書かれています。

CSS・JSON・Reactのコードは Dev Mode の機能

公式ヘルプ「Hand off animations to development」によると、コードはDev Modeで取り出します。

インスペクトの「Motion」のタブで、CSS・React・JSONのコードをコピーできる仕組みです。

対象は有料プランのフル席かDev席です。

無料のスタータープランで下のツールバーの右端のコードのアイコンを押すと、「アップグレードしてDev Modeで作業する」の案内が出て、開けませんでした。

有料プランに切り替えて取り出したコードの中身は、次の節にまとめました。

Dev ModeでできることはFigmaのDev Modeの使い方、AIのエージェントに動きを読ませるMCPサーバーはFigmaのMCPサーバーの使い方にあります。

有料プランで60fpsとDev Modeを試した結果

2026年11月2日に、同じFigmaデスクトップアプリを有料の教育プランのアカウントに切り替えました。

画面のプラン名の表示は「エデュケーション」で、無料では止められた2つをここで試しています。

作ったのは前の節と同じ952×540のフレームで、長さは2000ミリ秒です。

0〜1000ミリ秒の間に、位置（X 147→600）・回転（0→90°）・不透明度（0→100）のキーフレームを付けました。

60fpsで書き出すと30fpsの約2倍の大きさ

有料プランでは、フレームレートの一覧で60fpsを選んでもアップグレードの案内は出ませんでした。

画面の目安のファイルサイズは、30fpsの「〜1.1 MB」から60fpsの「〜1.5 MB」に変わりました。

サイズの欄に3xと打つと、大きさは2856×1620、目安は「〜17 MB」になり、これも案内なしで選べました。

3xでの書き出しはしていません。

1xのまま60fpsと30fpsで1本ずつ書き出し、保存したファイルを調べた結果です。

60fpsはフレームの数が約2倍になり、ファイルの大きさも約1.9倍になりました。

どちらも画面の目安（1.1MBと1.5MB）よりずっと小さく、動きの少ない図形なら目安は大きめに出ると考えてよさそうです。

書き出しの待ち時間は30fpsでも約2分あるので、何本も作るときは先に30fpsで見え方を確かめ、最後の1本だけ60fpsにすると待ち時間を減らせます。

Dev Modeのモーション欄で出たコード

有料プランでツールバーの右端のコードのアイコンを押すと、案内は出ずにDev Modeに切り替わりました。

動きを付けた長方形を選ぶと、右のインスペクトの下に「モーション」の欄が出て、「コード」の右の一覧でCSS・React・JSONを切り替えられました。

同じ欄の「リスト」は灰色で、押しても表示は変わりませんでした。

CSSでは、スタイルとキーフレームの2つの欄に分かれて出ました（コピーのボタンで取り出し、キーフレームの最後の行は途中の行と同じ値なので省いています）。

@property --rotate-transform { syntax: '<angle>'; initial-value: 0rad; inherits: false; }

transform: rotate(var(--rotate-transform, 0rad));

animation:
  kf_1_3_opacity_0 2s linear,
  kf_1_3_rotate_0 2s linear,
  kf_1_3_translate_0 2s linear;
animation-iteration-count: infinite;

@keyframes kf_1_3_opacity_0 {
  0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; }
  50% { opacity: 1; }
}
@keyframes kf_1_3_rotate_0 {
  0% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --rotate-transform: 0rad; }
  50% { --rotate-transform: -1.571rad; }
}
@keyframes kf_1_3_translate_0 {
  0% { translate: 0px 0px; }
  50% { translate: 453px 0px; }
}

読み取れることは次の4つです。

• 位置は元の場所からの差のtranslateで出る（600−147＝453px）
• 回転はラジアンで、右パネルの90°が-1.571rad（−90°）と符号が逆になる
• 1000ミリ秒で止まった後の後半は、途中（50%）と最後が同じ値のキーフレームとして入る
• 再生方法がループのままなので、animation-iteration-count: infiniteが付く

イージングは、回転と不透明度にはcubic-bezier(0.5, 0, 0.5, 1)が付き、位置には付かずlinearのままでした。

どちらもタイムラインでイージングを変えていない初期値なので、項目によって初期値が違うことになります。

Reactを選ぶと、Motion（旧Framer Motion）のmotion.divの書き方で出ました。

<motion.div
  initial={{
    opacity: 0,
    rotate: 0,
    x: 0,
  }}
  animate={{
    opacity: [0, 1, 1],
    rotate: [0, -90, -90],
    x: [0, 453, 453],
  }}
  transition={{
    opacity: { duration: 2, times: [0, 0.5, 1], ease: [[0.5, 0, 0.5, 1], "linear"], repeat: Infinity },
    rotate: { duration: 2, times: [0, 0.5, 1], ease: [[0.5, 0, 0.5, 1], "linear"], repeat: Infinity },
    x: { duration: 2, times: [0, 0.5, 1], ease: "linear", repeat: Infinity },
  }}
/>

JSONは、項目ごとのキーフレームの時刻（ミリ秒）と値、次のキーフレームまでのイージングが並ぶ形でした（位置Xの部分を抜き出し）。

{
  "version": 1,
  "playbackStyle": "loop",
  "nodes": [
    {
      "node": "1:3",
      "timelineDurationMs": 2000,
      "fields": [
        {
          "field": "motionTranslationX@-1:-1",
          "keyframes": [
            { "timeMs": 0, "value": 59 },
            { "timeMs": 1000, "value": 512, "easingToNext": { "hold": true } },
            { "timeMs": 2000, "value": 512 }
          ]
        },
        ...（motionRotation・motionTranslationY・opacity も同じ形で続く）
      ]
    }
  ]
}

JSONの位置Xは59→512で、右パネルに出ていた147→600とは数字が違いますが、差の453は同じです。

回転の値は-1.5707963705062866（ラジアン）で、CSSと同じく符号が逆でした。

モーション欄の「アニメーション」の右のアイコンを押すと、読み取り専用のタイムラインが開き、キーフレームの位置とコードを並べて見られました。

このタイムラインではキーフレームを動かせないので、開発の担当者に見せるときは編集される心配がありません。

よくあるつまずきと対処

エクスポートにアニメーションのタブが出ない

アニメーションとして書き出せるのは、キャンバスに直接置いた最上位のフレームだけです。

フレームの中の長方形を選んでいると、右パネルのエクスポートは静止画のほうになります。

レイヤーパネルで一番外側のフレームを選び直すか、キャンバスのフレームの名前を押してください。

デザインモードに戻ると動きが見えない

ツールバーをデザインに戻すとタイムラインは消え、キャンバスには動かす前の値の状態が表示されました。

付けたキーフレームは消えていないので、Motionに切り替えれば元どおり見られます。

インスタンスの動きが変えられない

上の節のとおり、インスタンス側では動きの項目を変えられません。

メインコンポーネント（レイヤーパネルで紫の4つのひし形のアイコン）を選んで直すと、インスタンスにも反映されると公式ヘルプにあります。

数字を打ったら別の値が変わった

Figmaでは、欄を選べていない状態で数字キーを押すと、選んでいる要素の不透明度が変わります。

Motionでは不透明度もキーフレームの対象なので、知らないうちにキーフレームが増えることがあります。

数値は、欄が青い枠で選ばれているのを見てから打つと防げました。

書き出しが終わらない

MP4は新しいタブで描き出してから保存する仕組みで、今回の1.5秒の動画でも約1分半かかりました。

％の表示が進んでいるうちは、タブを閉じずに待ってください。

ファイルが重いと全体の動作も遅くなるので、Figmaが重いときのメモリー使用率の見方も参考になります。

公式ヘルプと画面で違っていた所

• 公式ブログにはLottieの名前が無いが、公式ヘルプと画面の形式の一覧にはLottieとdotLottieがあった
• 公式ヘルプでは、動きを付けたコンポーネントはデザインモードで作るとあるが、Motionのまま右クリックの「コンポーネントを作成」で作れた
• 公式ヘルプでは、書き出したファイルは新しいタブの「ダウンロード」で受け取るとあるが、デスクトップアプリではMP4は新しいタブの後に保存の窓が自動で出て、Lottieはタブを開かずに保存の窓が出た
• 動画は30fpsまでの制限があったが、Lottieは60fpsの値で書き出された
• 公式ヘルプの「Motion tab」は、日本語の画面ではタブではなく、インスペクトの下の「モーション」の欄だった
• 公式ヘルプの「Show in timeline view」は、日本語の画面では「モーションタイムラインを開く」のボタンと、モーション欄のアイコンだった

まとめ

• Figma Motionは下のツールバーの切り替えで開き、無料のスタータープランでも使える（2026年11月1日時点はオープンベータ）
• ◇でキーフレームを打ち、時刻を変えて値を打つと2つ目のキーフレームが付く
• キーフレームの間の線を押すと、線形・イーズ・バック・カスタムベジエ・スプリングからイージングを選べる
• 動きはコンポーネントからインスタンスに継承され、インスタンス側では変えられない
• 書き出しはMP4・WebM・GIF・SVG・Lottie・dotLottieで、無料のプランの動画は30fpsまで（有料プランの60fpsはファイルが約1.9倍）
• CSS・JSON・Reactのコードは有料のDev Modeの機能で、ReactはMotionのmotion.divの形で出る
• 画面遷移の動きはプロトタイプのスマートアニメート、部品の動きを動画やLottieにするならFigma Motion

次の一歩は、今あるボタンかロゴのコンポーネントに不透明度と位置のキーフレームを2つずつ付けて、30fpsのMP4で書き出してみることです。

参考：Introducing Figma Motion、Explore Figma Motion、Use the Figma Motion timeline、Add, select, and delete keyframes、Create and use animated components、Export animations from Figma、Hand off animations to development（いずれも2026年11月1日に確認。書き出しとDev Modeの2本は11月2日にも読み直しました）