Webサイトのボタンが少し動く、読み込み中のマークがくるっと回る、SNSの短い動画で文字が1文字ずつ出てくる。こうした「小さな動き」は、デザインの段階で決めても、実際に動くものにするまでに手間がかかりがちです。デザイナーが動画で見本を作り、エンジニアがそれを見ながら作り直す、という往復もよくあります。
2026年9月30日、Figmaはリリースノートで「Motion adds custom styles, audio, text animations and Lottie export」を公開しました。デザインファイルの中でアニメーションを作れるFigma Motionに、アニメーションのスタイル、音声、文字のアニメーション、Lottie（ロッティー）形式での書き出しが加わった、というお知らせです。
この記事では、Figmaのリリースノートとヘルプで確認できたことだけを使って、何が増えたのか、誰が使えるのか、仕事でどう使い分けるとよいのかを整理します。
何が発表された？
Figma Release Notes（2026年9月30日）の要点です。
- アニメーションのスタイル：イージング（動きの速さの変化）や長さなどをスタイルとして保存し、ほかのデザインにも当てられる。複数のスタイルを組み合わせて1つの型として保存でき、ライブラリに公開してチームのファイルで共有できる
- 音声：音声ファイルをタイムラインにドラッグで追加。キーフレームに合わせて切る・分ける・位置を動かすことができ、MP4とWebMでは音も一緒に書き出せる
- 文字のアニメーション：1つのテキストの中で、1文字ずつ・単語ごと・行ごとに動きを付けられる。動きを付けたあとも、文字はそのまま編集できる
- Lottieでの書き出し：アニメーションをLottieまたはdotLottieのファイルとして書き出せる
- エージェントからも使える：アニメーションのスタイルは、Figmaのエージェントや、MCP・Skills経由のコーディングエージェントからも自動で当てられる
リリースノートには、Figma Motionは現在オープンベータ（誰でも試せる試験提供）だとも書かれています。
これまでと何が違う？
Figma Motionは、2026年のConfig（Figmaの年次イベント）で発表され、ヘルプによると2026年6月24日から順次提供が始まりました。デザインファイルのツールバーで「Motion」に切り替えると、画面の下にタイムラインが出て、キーフレームやプリセットで動きを付けられる仕組みです。
これまでの書き出し形式は、ヘルプのよくある質問によるとMP4・GIF・WebM・動くSVGでした。同じ質問の中で「今後Lottieを含む形式を追加する」と案内されていたものが、今回のアップデートで加わった形です。
もうひとつの違いは、動きを「使い回せる部品」にできることです。色や文字と同じように、動き方もスタイルとして保存してライブラリで共有できるようになりました。ヘルプの「スタイルの作成と編集」には、スタイルの種類にアニメーション（位置・拡大縮小・回転・サイズ・不透明度・パス）が並んでいます。
何ができるようになった？
今回の4つの追加を、図にまとめました。
Lottieは「動きをデータのまま渡す」形式
ヘルプでは、LottieをJSONを使った軽いアニメーションの形式と説明しています。Web・パソコン・スマートフォンのアプリで使え、図形のデータなので拡大しても荒れず、ほかの形式よりファイルがかなり小さくなる、とされています。
動画と違って一つひとつの要素がデータとして残るので、開発する側が色を変える、再生の速さを変える、操作に合わせて一部だけ再生する、読み込みの進み具合に合わせてバーを動かす、といったこともできると案内されています。
LottieとdotLottieの違い
書き出せるのは2種類です。Lottieは圧縮なしのJSONファイルで、1つのファイルに入る動きは1つだけ。dotLottieは、動きと一緒に画像やフォントもまとめた圧縮ファイルで、複数の動きを1つのファイルに入れられます。
開発への渡し方も用意されている
有料プランのFullシートかDevシートがあれば、Dev Modeで動きをタイムライン（見るだけ）で確認し、CSS・React・JSONのコードとしてコピーできます。FigmaのMCPサーバーにも対応していて、キーフレーム・動きの種類・タイミング・イージングといった情報を、コーディングエージェントに渡せると案内されています。
仕事ではどう使えそう？
ここからは、公式情報をもとにした、KAKERUデザインとしての見立てです。
Webサイトの小さな動きを、Lottieで渡す
ボタンを押したときの反応、読み込み中の表示、アイコンの切り替えなど、Webサイトの小さな動きはLottieの得意分野です。デザインの段階でFigma Motionで動きを作り、Lottieで書き出して開発側に渡せば、「動画を見ながら作り直す」往復を減らせます。
SNSの短い動画に、音を合わせる
新商品の告知やお知らせのように、Figmaで作ったバナーをそのまま少し動かして投稿したい場面があります。音をタイムラインに入れて、キーフレームに合わせて切ったり動かしたりできるので、短い動画ならFigmaの中で音合わせまで進められます。
キャッチコピーを、1文字ずつ見せる
文字のアニメーションは、1文字・単語・行の単位で動きを付けられます。動きを付けたあとも文字を編集できるので、「キャッチコピーを差し替えたい」という修正が入っても、動きを作り直さずに済みます。
会社の「動き方」をそろえる
アニメーションのスタイルをライブラリに公開すれば、チームの全員が同じイージングと長さを使えます。色やフォントのルールと同じように、「この会社のボタンはこう動く」というルールを部品にしておける、ということです。
KAKERUならこう使う／使わない
KAKERUとして線を引くなら、Figma Motionで作るのは「Webやバナーの小さな動き」です。ボタン・アイコン・読み込み表示のような数秒の動きを作り、Lottieで渡す。動きのルールはスタイルにしておく。ここはデザインファイルの中で完結させたほうが、修正の行き来が少なくなります。
反対に、ナレーション入りの説明動画や、長い動画の編集はFigmaでは作りません。音声を入れられるようになったとはいえ、今回の機能はキーフレームに合わせて音を置く使い方です。音の作り込みが必要な動画は、動画編集の道具に任せます。また、Lottieを書き出したら、そのまま本番に入れずに、使う環境で必ず再生を確かめます。これは公式も勧めている手順です。Figmaのエージェントに動きを作らせた場合も、最後にタイムラインで確認して出してよいかを決めるのは人です。
動きのスタイルを、MCPやSkills経由でコーディングエージェントが当てられる、というのは気になる一文です。KAKERUで使っているClaudeとの組み合わせで、どこまでつながるのかは試してみたいところです。
誰が使える？
ヘルプに書かれている条件は次のとおりです。
- プラン：オープンベータの間はすべてのプランで使える。ファイルの編集権限（can edit）が必要
- 有料プランのFullシートが必要なもの：アニメーション付きコンポーネントの公開、Figmaのエージェントでの生成、高解像度の動画書き出し
- 書き出しの上限：1920×1080を超えるサイズや、30fpsを超える書き出しは有料プランのみ
- AIクレジット：Figma Motion自体は、AIクレジットを直接は使わない。Figmaのエージェントで動きを作る場合、エージェントがベータの間は消費しないが、正式提供後は通常どおり消費する。手で直す分は消費しない
- 対象外：Figma for Government のプランでは使えない
Figmaの日本語版リリースノートには、10月1日の確認時点でこのお知らせはまだ載っていませんでした。この記事は英語版のリリースノートとヘルプをもとにしています。
注意点
Lottieで再現できない表現がある
ヘルプには、Lottieで書き出すときの制限が表になっています。シェーダーと角度のグラデーション（angular gradient）は動かない画像として書き出され、動画は非対応です。ドロップシャドウ・ノイズ・ガラスの効果は一部対応で、アニメーションの途中で変化せず、1コマ目の見た目のまま書き出されます。角度のグラデーションは、線形か円形のグラデーションに置き換えると図形のまま書き出せる、と案内されています。
重い動きは、再生する側の負担になる
Lottieは、あらかじめ作った映像を流すのではなく、再生するたびにその場で描く仕組みです。ヘルプでは、複雑な動きや画像などを多く使った動きは、表示の速さに影響する場合があると注意しています。
まだベータで、ヘルプの一部は更新前
Figma Motionはオープンベータで、機能が変わる場合や動作が重くなる場合がある、とヘルプに書かれています。また10月1日の確認時点では、ヘルプの一部に「音声の追加はもうすぐ」「文字のアニメーションのスタイルはもうすぐ」という、9月30日のリリースノートより前の記載が残っていました。自分のアカウントで使えるかは、画面で確かめるのが確実です。
まとめ
- 2026年9月30日、Figma Motionにアニメーションのスタイル・音声・文字のアニメーション・Lottieの書き出しが加わった
- Lottieは動きをデータのまま渡せる軽い形式。dotLottieは画像やフォントもまとめて渡せる
- オープンベータの間はすべてのプランで使えるが、高解像度の書き出しやエージェントでの生成などは有料プランのFullシートが必要
- シェーダー・角度のグラデーション・動画はLottieでは再現できない。本番で使うプレーヤーで試してから使う
- Webやバナーの小さな動きはFigmaの中で作って渡す。音の作り込みが必要な動画と、最後の確認は人と専用の道具で
まずは、Webサイトでいつも使っているボタンかアイコンを1つ選んで、動きを付けてLottieで書き出すところから始められます。
参考・情報源
- Figma Release Notes「Motion adds custom styles, audio, text animations and Lottie export」（2026年9月30日）
https://www.figma.com/release-notes/
※今回追加された4つの機能・オープンベータであること - Figmaヘルプ「Explore Figma Motion」
https://help.figma.com/hc/en-us/articles/41274629073303-Explore-Figma-Motion
※Figma Motionの入り方・タイムライン・エージェント・Dev Mode・MCP - Figmaヘルプ「Export animations from Figma」
https://help.figma.com/hc/en-us/articles/41307983648407-Export-animations-from-Figma
※書き出し形式・Lottieの説明と制限・有料プランの条件 - Figmaヘルプ「What Figma features are in beta?」
https://help.figma.com/hc/en-us/articles/4406787442711-What-Figma-features-are-in-beta
※提供開始日・対象プラン・AIクレジット・これまでの書き出し形式 - Figmaヘルプ「Hand off animations to development」
https://help.figma.com/hc/en-us/articles/41296356954263-Hand-off-animations-to-development
※Dev Modeでのコードのコピー・MCPで渡せる情報 - Figmaヘルプ「Create and edit styles」
https://help.figma.com/hc/en-us/articles/360038746534-Create-and-edit-styles
※アニメーションのスタイルの種類
確認日：2026年10月1日。機能や提供状況は変わることがあります。最新の情報は公式ページでご確認ください。
ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。
動きの指示がデザインファイルの中で完結していくのは、作る側にも頼む側にもうれしい変化です。「この動き、どう伝える？」を言葉や見本の動画で補う手間が減るからです。