Figma Motionとは──タイムラインがキャンバスに来て、Lottie書き出しにも対応した新機能

デザインツールFigmaでモーション（アニメーション）を作るには、これまで別のツールに移る必要があった。Figmaが2026年6月24日の年次カンファレンス「Config 2026」で発表した「Figma Motion」は、この前提を変える機能だ。公式ブログとサードパーティのLottieFiles公式ドキュメントの記述から、何ができるようになったのかを確認する。

何が発表されたか

Figma共同創業者兼CEOのDylan Field氏が執筆した公式ブログ記事（2026年6月24日付）によれば、Figma Designに「タイムライン」が追加され、キーフレーム・プリセットなどを使ってモーションを一から組み立てられるようになった。既存のデザインにモーションを重ねることも、Figma agent（Figmaの AIエージェント機能）に土台となる動きを生成させることもできる。

ブログはこう説明している。

"Because motion is built on Figma's platform, it can now be a foundational element of your design systems. You can animate a component once, and that motion travels across every screen and every collaborator's file, the same way fills and typography do."

モーションがFigmaのプラットフォーム上に構築されているため、デザインシステムの基礎要素になれるという。コンポーネントを1回アニメーション化すれば、その動きは塗りやタイポグラフィと同じように、すべての画面・すべての共同編集者のファイルに伝播する。

Dev Modeでコードとして読める

Figma Motionのもう一つの特徴は、Dev Mode（開発者向けの閲覧モード）との統合だ。

"When the file is ready for development, switch to Dev Mode and open the Motion tab. The full timeline is visible and inspectable. Every timing value, easing curve, and keyframe is readable without any interpretation needed from the developer. They can copy animation code directly from the panel in CSS, JSON, or framework-ready React and motion.dev."

Dev Modeに切り替えると、タイムライン全体が閲覧・検査可能になり、あらゆるタイミング値・イージングカーブ・キーフレームが解釈不要でそのまま読める。CSS・JSON・React（フレームワーク対応済み）のいずれかの形式で、アニメーションのコードを直接コピーできる。

さらに、モーションはMCP（Model Context Protocol）に対応しており、アニメーション化されたフレームをコーディングエージェントに直接渡して実装させることもできるという。書き出し形式としてはMP4・WebM・Animated SVG・GIFに対応し、ブログは「さらに多くの形式・書き出しタイプの提供に取り組んでいる」としている。

Lottie書き出し：LottieFiles公式ドキュメントの対応表

Figma Motion自体はFigma公式機能だが、Lottie形式（Webやアプリで軽量に再生できるアニメーション形式）への書き出しは、サードパーティ製の「LottieFiles」プラグイン経由で提供されている。LottieFiles公式ドキュメントの説明によれば、この「Figma Motion export」機能は「選択したFigmaフレーム内のタイムラインキーフレームを読み取り、Lottieアニメーションに変換する」もので、1つのフレーム内でFigma Motionを使ってレイヤーをアニメーション化した場合に使う（複数フレームやプロトタイプ接続で構築されたアニメーションには、別のFigma to Lottie手法を使う）。

ドキュメントには機能ごとの対応レベルが3段階（✅対応・🟡差異ありで対応・❌非対応）で整理されている。主な項目は次の通り。

ドキュメントは「最も予測可能な結果を得るには、位置・不透明度・サイズ・角丸・線の太さ・ソリッドカラーをアニメーション化するのが安全」と推奨し、グラデーションは静的に保つ、背景ぼかしでなくレイヤーぼかしを使う、テキストの中身のアニメーションは避ける、といった実践的なガイドラインを示している。

発表本編のブログで確認できた追加の機能

Config 2026のリキャップ記事とは別に、Figma Motion単体の発表記事「Introducing Figma Motion: Your canvas now has a timeline」（2026年6月24日付、著者はプロダクトマネージャーのDavid Hornsby氏）をcurlで直接取得すると、リキャップ記事には無い機能の詳細が確認できた。

• モーション変数（Motion variables）: イージングなどの値を変数として定義し、複数の「モード」を持たせられる。ページ単位でモードを切り替えると、その変数を参照しているすべてのアニメーションが一括で更新される（原文: "Switch the mode at the page level, and every animation referencing that variable updates at once."）
• アニメーション化されたコンポーネント: コンポーネントに一度アニメーションを設定すると、塗りやタイポグラフィと同じように、そのコンポーネントを使うすべての画面・共同編集者のファイルに伝播する
• シェーダーエフェクトのキーフレーム化: 「スライダーや入力欄で操作できるものはすべて、時間経過とともにキーフレームでアニメーション化できるようになった」（原文: "anything you can control with a slider or input field, you can now animate with keyframes over time"）
• 3D変形（3D Transforms）は「近日公開」: フレーム・ベクター・テキストをZ軸方向に回転できる機能で、この記事の確認時点ではウェイトリスト登録制（"Join the waitlist"という表記のみで、一般提供の開始日は本文に記載なし）

Atlassianのシニアプロダクトデザイナー、Alexandra Pereira氏のコメントも本文に引用されている。

"Being able to generate within guardrails really matters for enterprise systems. It allows for consistency, accessibility, and implementation quality as much as speed."

（訳）「ガードレール内で生成できることは、エンタープライズ向けシステムにとって本当に重要だ。一貫性・アクセシビリティ・実装品質を、速度と同じくらい担保できる」

同社のリードモーションデザイナー、Maxwell Hathaway氏は「キャンバス上にキーフレームがあることで、アトミックデザインがアトミックモーションデザインになった」（原文: "Atomic design is now atomic motion design because I have keyframes on the canvas."）とコメントしている。ただしこれらはFigma社が自社ブログに掲載した顧客の声であり、第三者による独立した検証コメントではない。

Config 2026で同時に発表された他の機能

同じブログ記事では、Figma Motionと並んで複数の新機能が発表されている。

• コードレイヤー（Code layers）：デザインレイヤーをワンクリック（またはプロンプト）でインタラクティブなコードレイヤーに変換できる機能。2026年7月からfigma.com/config-betasでウェイトリスト経由の早期アクセスが開始予定
• シェーダーの塗り・エフェクト：説明文または参照画像からFigma agentがシェーダーを生成
• ジェネレーティブプラグイン：ローカル開発環境やプラグインAPIの知識なしに、欲しいツールの挙動・コントロール・パラメータを説明するだけで独自ツールを作成できる
• Figma Weaveツール：モデルを接続し、アセットを変換し、出力を洗練させるノードベースのキャンバスがFigmaキャンバス上でも使えるように

公式ヘルプセンターで確認できた提供状況

ブログ記事2本とは別に、Figma公式ヘルプセンターの「Explore Figma Motion」ページ（2026年8月31日にcurlで取得）を確認すると、この記事の他のFigma記事で扱ってきた「3D変換」「FigJam/Slidesへのエージェント拡張」とは違い、Figma Motionは既に開放的な提供段階にあることが分かる。ページ冒頭には次の記載がある。

"Figma Motion is currently in open beta. Features may change and you may experience performance issues as we continue to improve Figma Motion."

（Figma Motionは現在オープンベータ版です。機能は変更される可能性があり、Figma Motionの改善を続ける中でパフォーマンスの問題が発生することがあります）

同ページの「Before you Start」欄には、利用条件として「Available on any plan」「Anyone with can edit access to a file can use Figma Motion」（どのプランでも利用可能・ファイルへの編集権限があれば誰でも使える）と明記されている。つまりFigma Motionは、待機リスト経由の早期アクセス制ではなく、対象ユーザーには既に開かれたオープンベータとして提供されている。

ヘルプセンターの記述には、公式ブログの説明とわずかに食い違う箇所もあった。ブログ本編は「CSS・JSON・React」の3形式でコードをコピーできると説明していたが、ヘルプセンターは「Developers can scrub through and inspect animations at full fidelity using the read-only timeline, then copy animation code directly into CSS, JSON, or motion.dev」と、3つ目の形式を「React」ではなく「motion.dev」（JavaScriptのアニメーションライブラリ）としている。どちらが最新の正確な仕様かは、この記事で確認した範囲では判断できない。ヘルプセンターにはこのほか、変更を自動的にキーフレーム化する「auto-keyframe」機能や、タイムライン上の特定の瞬間にコメントを紐づけられる「タイムスタンプ付きコメント」機能への言及もあり、公式ブログ2本には出てこない実装上の詳細だった。

位置づけ：AIコーディングとデザインの接続点として

Figma Motionは、AIコーディングエージェントに渡すためのデザイン情報（タイミング値・イージングカーブなど）を、解釈の余地なく機械可読な形で提供する、という点で、デザイントークンをAIコーディングに渡すという文脈とも重なる。MCP対応により、アニメーション化されたフレームをそのままコーディングエージェントへの入力として使える設計は、MCP（Model Context Protocol）とはで扱っている「AIとツールをつなぐ共通規格」という考え方の応用例の一つといえる。

Lottie書き出しはFigma公式でなくサードパーティ機能

• 本記事はFigma公式ブログ1本と、サードパーティであるLottieFiles公式ドキュメント1本を一次資料としている。Figma Motion自体の詳細な技術仕様（内部データ形式、パフォーマンス特性）についての一次資料は確認できていない。
• Lottie書き出し機能はFigma自体が提供する公式機能ではなく、LottieFiles社が提供するサードパーティプラグインを経由したものである点に注意してほしい。対応表はLottieFiles側のドキュメントに準拠しており、Figma公式が保証する仕様ではない。
• Figma Motionの提供状況（全ユーザーへの一般提供か、一部プランのみか）についての詳細は、本記事のソースからは確認できなかった。
• ブログ記事の日付は2026年6月24日であり、2026年8月27日時点までの間に機能がアップデートされている可能性がある。LottieFilesドキュメントのページ自体は「Last updated: August 25, 2026」と表示されており、比較的最近まで更新が続いている。