これまで「静止画を整える場所」だったデザインツールが、ついに「時間」を扱い始めた。Figmaは2026年6月24日に開催した年次カンファレンス「Config 2026」で、デザインファイルの中で直接アニメーションを作れる新機能「Figma Motion」を発表し、同日からオープンベータとして提供を始めた。
ポイントは単なる「アニメ機能の追加」ではない。デザインとモーション、さらには動画・コードの制作工程が一つのキャンバス上で地続きになり始めたことにある。本記事では、Figma Motionが具体的に何をできるのかを整理したうえで、クリエイターやマーケターにとっての「モーション内製化」という観点から、その意味と注意点を読み解く。
キャンバスにタイムラインが来た──Figma Motionの基本
Figma Motionの核心は、デザイン画面にそのまま「タイムライン」が組み込まれた点にある。これまでアニメーションを作るには別のツールに素材を書き出して作業する必要があったが、その往復が不要になった。
操作はシンプルだ。レイヤーをドラッグしてタイミングを調整し、スクラブ（再生位置を前後に動かす操作）で任意の瞬間を確認できる。位置・スケール・回転・不透明度をそれぞれ独立してキーフレーム化でき、変更を加えると自動でキーフレームが打たれる「オートキーフレーミング」も備わっている。フェード・ムーブ・スケールといったプリセットも用意され、ゼロから組むことも、既存デザインに動きを重ねることもできる。専用ツールを開かずに、デザインしている画面のままタイミングを詰められるのが、これまでとの最大の違いだ。
もう一つ見逃せないのが、アニメーションがコンポーネントに統合される点だ。あるコンポーネントに付けた動きは、塗りやタイポグラフィと同じように、画面や共同編集者のファイルをまたいで継承される。チームでデザインシステムを運用している現場では、「動きの一貫性」をデザイン資産として管理できる意味は大きい。
AIエージェントが「動き」を生成する
Figma Motionが既存のアニメーションツールと一線を画すのは、AIエージェントによる生成機能を最初から組み込んでいる点だ。手でキーフレームを打つだけが選択肢ではない。
使い方は、作りたい動きを言葉で記述するだけ。するとFigmaのエージェントが、その指示をもとにタイムライン上に実際のキーフレームを生成する。公式の説明によれば、作りたい動きを言葉で記述すると、タイムライン上に実際のキーフレームが組み立てられるという。生成された動きはあくまで「出発点」であり、そこから人がタイミングや緩急を詰めていく前提だ。AIが土台を一気に用意し、人間が仕上げる——という分業は、近年のクリエイティブツール全体に共通する流れでもある（参考：Picsartのクリエイター収益化とAIエージェント）。
この「言葉から動きへ」という発想は、AIによる画像・動画生成が一般化した現在の制作環境と地続きだ。静止画の生成、動画の生成と進んできた波が、いよいよ「UIや要素の動き」という領域に届いたと捉えると、Figma Motionの位置づけが見えやすい（参考：Google Veoに見るAI動画生成の広がり）。
デザインとコードの距離が消える──書き出しとMCP対応
Figma Motionがプロダクト開発の現場で注目される最大の理由は、作った動きが「そのまま実装に渡せる」ことにある。デザイナーが作ったアニメーションを、エンジニアが目分量で再現する——という長年の摩擦を減らしにいく設計だ。
まず、ファイルから直接MP4・GIF・SVG・WebMを書き出せる。SNS用の短尺クリップやバナー素材を、デザイン環境のまま用意できるということだ。さらにDev Mode（開発者向けの検査モード）に切り替えると、タイムライン全体が検査可能になり、CSS・JSON・実装可能なReactやmotion.devのコードをパネルから直接コピーできる。
そして決定的なのが、Figma MotionがMCP（Model Context Protocol、AIエージェントに文脈情報を渡すための共通規格）に対応している点だ。これにより、アニメーション化されたフレームの情報をコーディングエージェントへ直接引き渡し、実装まで一気通貫でつなげられる。デザインツールがAIエージェント時代の制作パイプラインに組み込まれていく動きは、ここでも鮮明だ（参考：Claude Designが示すAIデザインツールの新時代）。なお、対応する書き出し形式は今後さらに追加される見込みだ。
なぜ今、デザインツールが「動き」を取り込むのか
Figma Motionの登場は、単独の機能追加というより、デザインツール全体が向かう大きな流れの一部として捉えると理解しやすい。背景には、二つの構造的な変化がある。
一つは、制作の主役が「静止画」から「動くもの」へ移っていることだ。SNSのフィードはショート動画が席巻し、Webサイトやアプリでも、要素がふわりと現れる・滑らかに切り替わるといったマイクロな動きが当たり前になった。動きの有無がそのまま体験の質を左右する時代に、静止画だけを扱うツールでは現場の要求に追いつけない。従来このモーション領域はAfter Effectsのような専門ツールが担ってきたが、習熟コストの高さがボトルネックになっていた。
もう一つは、AIの普及で「デザインから実装までの距離」を縮める競争が激化していることだ。デザイナーが意図した動きを、エンジニアが推測で再現し、微妙なズレを擦り合わせる——この往復は長年の摩擦点だった。Figmaが書き出しコードとMCP対応を前面に出すのは、その摩擦をAIエージェント込みで一掃しにいく狙いがある。デザイン・モーション・コードを一つの環境に束ねれば、ツール間の分断そのものを競争優位に変えられる。Config 2026全体を貫くのも、この「分断をなくす」という思想だ。
クリエイター・マーケターに起きること──モーション内製化の現実
では、発信を仕事にするクリエイターや、SNSを販路にするマーケターにとって、この変化は何を意味するのか。鍵になるのは「モーションの内製化」というキーワードだ。
これまで「動くクリエイティブ」を作るには、専用のモーションツールを扱える人材か、外部への発注が前提だった。Figma Motionは、すでにデザイン現場で広く使われているFigmaの中にその機能を置くことで、参入のハードルを一段下げる。バナーをほんの少し動かす、UIの遷移を見せる、SNS用に短い動きを付ける——といった日常的な需要を、デザインの延長線上でこなせるようになる可能性がある。動画広告クリエイティブの内製化が進む潮流とも噛み合う（参考：TikTok広告のAI動画生成）。
ただし、誰でも全機能を無料で使えるわけではない点には注意が要る。公式の案内によれば、Figma Motionは全プランでオープンベータとして触れるものの、Starter（無料）ユーザーが使えるのは限定的な機能と限定的な書き出しにとどまる。プリミティブな動きの一式や本格的な書き出し、デザインシステムとの統合、AIエージェントによるアニメ生成、高解像度の動画書き出しといった中核機能は、有料プランのFull seatが前提になるとされる。導入を検討するなら、自分やチームの用途がどのプラン帯に収まるかを見極めるところから始めたい。
Figma Motionは日本を含めグローバルで同時にオープンベータ提供されており、国内のデザイン・マーケティングチームも今すぐ試せる。一方で現時点はあくまでベータであり、仕様や対応形式は今後変わりうる。Config 2026では同時に、キャンバス上でコードを扱う「Code Layers」やカスタムAIプラグインも発表されており（参考：Config 2026 Recap、TechCrunch）、Figmaが「デザイン・モーション・コード」を一つの環境に束ねようとしている方向性は明確だ。動くクリエイティブが当たり前になる時代に向けて、まずは小さな動きから試してみる価値は十分にある。
本記事は、株式会社TORIHADAが運営するクリエイターエコノミー専門メディア「CREATORS POST」がお届けしました。SNS・インフルエンサーマーケティング・クリエイターエコノミー・AIの最新動向を発信しています。
この記事はAIを活用して書いています。
