FigmaがMotionモードを発表——「Flashの再来だ」とデザイナーたちが歓喜したConfig 2026のすべて

「これ、Flashじゃないですか……」——そんな驚きの声が、6月24日の夜に日本のデザイン界で一斉に上がりました。

2026年6月23日から25日、サンフランシスコで開催されたFigma年次カンファレンス「Config 2026」。
8,000人以上が集まったその舞台で、Figmaがデザイナー待望の新機能「Figma Motion」を発表したのです。
デザインキャンバスの上でAfter Effectsのようなアニメーションが作れるようになった、というこの発表は、世界中のデザイナーに衝撃をもたらしました。

気になって詳しく調べてみたところ、これが想像をはるかに超えた話でした。

デザイン画面の中でアニメーションが完結する

Figma Motionは、Figmaに新設された4つ目のモードです（Design・Draw・Dev・Motion）。
これまでアニメーション制作のためにAfter EffectsやLottieなどの別ツールへ書き出す必要があったものが、Figmaのキャンバスを離れることなくタイムラインとキーフレームで直接アニメーションを作れるようになりました。

具体的にできることを整理すると、こうなります。

キーフレームアニメーション: 位置・スケール・回転・不透明度などを時間軸上で細かくコントロール
プリセット: フェード・移動・スケールなどの動きを一発で適用
AI生成: 「フェードインしながらスライドする動きを作って」と文章で指示するだけでAIがキーフレームを自動設定
Dev Modeとの連携: アニメーションのタイミング値をCSS・JSON・Reactコードとして直接コピー
エクスポート: MP4・WebM・アニメーションSVG・GIF形式に書き出せる

特に見逃せないのがデザインシステムとの統合です。
コンポーネントに一度アニメーションを設定すれば、そのモーションはすべての画面・すべての共同作業者のファイルへ自動的に伝播します。
開発者との受け渡しもDev Modeのインスペクト機能でスムーズに行えます。

CEO Dylan Field氏は基調講演でこう語ったと伝えられています——「ツールはアイデアの限界を設けてはならない」。
その言葉通り、これまで「デザインツールでできること」の壁を大きく押し広げた発表でした。

「FIGMA MOTION IS HERE」——公式もデザイナーもXで興奮爆発

発表の瞬間、Figma公式アカウントが投稿したのはシンプルな一文の繰り返し。
「FIGMA MOTION IS HERE」という3連の大文字投稿が2万件以上のいいねを集めました（日本語訳：「Figma Motionがここに来た！」——その興奮が文字の密度にそのまま表れています）。

FIGMA MOTION IS HERE
FIGMA MOTION IS HERE
FIGMA MOTION IS HERE

Live from Config 2026 pic.twitter.com/ut7OFVZKQS
— Figma (@figma) 2026年6月24日

続けて投稿された「Figma Motion: design AND animate in the same file（Figma Motion：同一ファイルでデザインとアニメーション制作の両方が完結する）」という説明ツイートも1,700件超のいいねを集め、世界中のデザイナーが一斉に反応しました。

Figma Motion: design AND animate in the same file

Live from Config 2026 pic.twitter.com/YsihAIgDlb
— Figma (@figma) 2026年6月24日

日本では木内翔大氏（SHIFT AI代表）がさっそくFigma Motionの概要をXで紹介。
「デザインキャンバス上で直接アニメーションを作成可能に」と解説したこの投稿も、国内のデザイナー・エンジニアコミュニティで広く拡散されました。

Figma、新機能「Figma Motion」を発表！

デザインキャンバス上で、直接アニメーションを作成可能に。

タイムラインやキーフレームを使い、位置・拡大縮小・回転・透明度などをFigma内で調整できます。

現在ベータ版を提供中。 pic.twitter.com/LOvg5Kpgt1 https://t.co/vCQvnqODJw

— 木内翔大＠SHIFT AI代表「日本をAI先進国に」𝕏 (@shota7180) 2026年6月25日

「Flashの時代を思い出す」「After Effectsを別で開く必要がなくなる」「デザインとモーションの境界線が消えた」——そういった声がXのタイムラインに溢れ、デザイン界全体がこの発表を歓迎する雰囲気になっていました。

AI機能が加速させる「コードもアニメーションも作れる」デザイン

Figma Motionだけでなく、今回のConfig 2026はAI機能満載の発表ラッシュでした。
注目を集めた発表をまとめると、以下の通りです。

Code Layers（コードレイヤー）
デザインレイヤーをクリックまたはプロンプト（文章指示）でインタラクティブなコードレイヤーに変換できる機能。
デザインとコードの双方向同期が実現し、「デザインを変更すれば自動でコードも更新」という世界に近づきます。

Shaders（シェーダー）
流体・グラデーション・背景エフェクトなどをFigma上で直接作成できるシェーダー機能。
AIエージェントがシェーダーの生成をサポートします。

Figma Agent
チームのコンテキスト（プロジェクト情報・ブランドガイドライン等）を理解した上で作業を支援するAIエージェント。
プラグインをプロンプトだけで作成することも可能になりました。

この流れを見ると、Figmaが目指しているのは「デザイナーだけのツール」ではなく、デザインからコード・アニメーション・AIまでをひとつのキャンバスに集約した「フルスタック開発環境」だということがわかります。

さらに深掘りしたい方へ

SocialReport編集部の考察

今回のFigma Motionの発表は、SNSマーケティング・コンテンツ制作の現場にも直接影響を与える変化だと感じています。

これまでブランドのSNS投稿用アニメーション素材を作るには、デザイナーがFigmaでビジュアルを作り、After Effectsで動きを付けて、動画エディターに渡してMP4に変換する……という複数工程が必要でした。
それが今後は、Figmaひとつで「デザイン→アニメーション→書き出し」まで完結する可能性が出てきました。

特にAI生成アニメーション機能が進化すれば、「このビジュアルに自然なフェードを付けて」という指示だけで動画素材が生成できるようになります。
SNSコンテンツの制作スピードが大幅に向上するだけでなく、これまでモーションデザインのスキルを持たなかった担当者でも動きのあるコンテンツを作れるようになるでしょう。

一方で注目したいのが「デザインシステムとモーションの統合」という側面です。
ブランドの動きのルール（フェードのイージング、スライドのタイミング等）をFigmaのデザインシステムに組み込めれば、SNS素材の「動きのブレ」を防ぐことができます。
複数人のチームで作業する際のモーションの一貫性確保という課題が、ツールレベルで解決されるかもしれません。

デザインとコード・モーションの境界が溶けていく中で、SNSマーケティングにかかわる制作ワークフローも数年以内に大きく変わるはずです。

まとめ

Figma Config 2026で発表されたMotionモードは、アニメーション制作をデザインツールの中に取り込むという長年の課題に対する一つの回答でした。
AI生成機能やCode Layersとの組み合わせで、デザインからコード・動きまでひとつのキャンバスで完結する「フルスタックデザイン環境」の実現がいよいよ現実に近づいています。