Figma「Config 2026」発表まとめ|Code Layers・Motion・AIシェーダーでデザインとコードが一つに

「Figmaがあれば、もうほかのツールはいらないのでは」——Config 2026の発表が流れてきたとき、そんな空気がデザイン界隈に広がりました。デザインの画面に、コードが書け、アニメーションが動き、AIがその場で効果を生み出す。これまで何枚ものソフトを行き来していた作業が、一枚のキャンバスに集まろうとしています。便利になるのは間違いなさそうです。ただ、ひとつの場所にすべてが集まるということは、私たちの作り方そのものが静かに変わるということでもあります。今回は、その6つの発表が実際に何を変えるのかを、落ち着いて見ていきます。


Figmaは2026年6月24日、サンフランシスコのMoscone Center Southで開催した「Config 2026」のOpening keynoteで6つの主要機能を発表した。会期は6月23〜25日で、キーノートはCEOのディラン・フィールドが主導した。発表されたのはCode Layers、Figma Motion、シェーダーフィルとエフェクト、ジェネレーティブ・プラグイン、Weaveツール、スキルとコネクターを備えたFigma agentである。

Code Layersのアーリーアクセスは7月に始まる。Figma Motionは6月24日から段階的に提供が始まり、Dev ModeでCSS、JSON、Reactをコピーでき、MP4、GIF、WebM、Animated SVGとして書き出せる。シェーダーはWebGPUを用いる。WeaveはFigmaが買収したWeavyが前身である。Figmaによると、2025年3月時点でFortune 500企業の95%がFigmaを使い、月間アクティブユーザーは1,300万人である。GoogleはI/O 2026でPicsを発表した。

From: 文献リンクEverything Figma Just Announced at Config 2026

【Config 2026の6大発表 一覧】

機能何ができるか提供状況・料金
Code Layersデザインレイヤーをワンクリックまたはプロンプトで動くコードに変換。ローカルコードベースのアップロードやGitHubリポジトリのクローン取り込みに対応。アーリーアクセスは7月開始(クローズドベータ/ウェイトリスト扱い)。
Figma Motionキャンバス上で直接アニメーション制作。タイムライン・キーフレーム・プリセットを備え、アニメーションをデザインシステムの一部として扱える。6月24日から段階的提供。全プランのオープンベータ。コンポーネント公開・エージェント生成・高解像度書き出しは有料プラン(Full seat)が必要。政府向けプランは対象外。
シェーダーフィル&エフェクトプロンプトや参照画像から、すりガラス・ハーフトーン・クロムなどの効果を生成・調整。WebGPUを用い、すべてパラメータ化され、モーションでキーフレーム化も可能。エージェント経由の生成は有料プラン(Full seat)でオープンベータ。教育・政府・Starterプランは対象外。
ジェネレーティブ・プラグインやりたいことを言葉で説明すると、Figmaエージェントがプラグインのコードを自動生成。アクセシビリティ監査やレイアウト生成などを作れる。Generative pluginsは有料プラン向けのオープンベータ。Figma製プラグインは全プランで利用可能。現時点ではAIクレジットを消費しないが、GA後は標準消費へ。Communityや組織への公開は今後予定。
Weaveツール複数のAIモデルをノードでつなぐ生成ワークフロー(旧Weavy)をキャンバス内で利用。スタイル転送など20以上のツールを搭載。Professional、Organization、EnterpriseプランのFull seat向けに6月24日から段階提供。Starter、Government、K-12 Educationは対象外。メインキャンバスへの完全統合はThe Vergeによれば年内予定。
Figma agent(アップデート版)スキル(自分の手順を再利用可能な指示として登録)とコネクター(Notion・Slack・GitHub・Atlassian等への接続)を追加。6月24日から段階提供中のオープンベータ。Professional、Organization、EnterpriseプランでAI機能が有効なFull seat向け。Education、Government、Starterは対象外。現在ベータでクレジットを消費しない(GA後に標準消費へ)。

【編集部解説】

innovaTopiaが今このニュースに注目するのは、Config 2026が「デザインツールの新機能発表」という枠を超えて、ソフトウェアが作られる現場そのものの再編を示しているからです。Figmaは「キャンバスこそが製品である」という思想を、具体的な機能として形にしてきました。

まず一点、原文の記述を訂正しておきます。元記事は基調講演をCPOのユウキ・ヤマシタ氏が主導したと書いていますが、Config 2026のOpening keynoteを務めたのは共同創業者でCEOのディラン・フィールド氏です。公式アジェンダにもそう明記されています。ヤマシタ氏が製品詳細を解説した可能性はありますが、講演全体を率いたのはフィールド氏でした。innovaTopiaとしては、ここは正確に記しておきます。

今回の発表で最も本質的なのは、Figmaがコードやモーションを「あとから受け渡すもの」ではなく、色やフォントと同じ「素材」として扱い始めた点です。デザイナーが作った画面を、エンジニアが別環境で作り直す——この10年以上続いてきた分断を、Code Layersは一つのファイルの中に畳み込もうとしています。

ここで原文があまり踏み込んでいない論点を補います。Code Layersは、ローカルのコードベースをアップロードしたり、GitHubリポジトリをキャンバス上にクローンして取り込んだりできる点に核心があります。海外メディアは変更をコードベースへ戻して同期できると報じており、これが事実なら、AIコーディング環境であるCursorやReplit、さらにはモーション領域のAfter Effectsと機能領域が重なってきます。Figma自身が名指しで競合を宣言したわけではありませんが、市場では「Figmaが隣接ツールを吸収しにきた」という見方が広がっています。

何ができるようになるのか。Figma Motionによって、アニメーションがデザインシステムの一部になり得ます。タイミングやイージングを変数として扱い、アニメーション付きコンポーネントを整えることで、チーム全体でモーションの一貫性を保てる——運用次第ではありますが、そうした設計が可能になります。書き出しは、Dev ModeでCSS・JSON・Reactをコードとしてコピーでき、動画系はMP4・GIF・WebM・Animated SVGとしてエクスポートできます。さらにMCP経由でコーディングエージェントへ直接渡せるため、デザインファイルが「コーディングAIが読める構造化されたソース」へと変わっていきます。

ポジティブな側面は明快です。ツールを横断する手間が減り、個人や小規模チームでも、これまで専門ソフトを要した表現に手が届きます。一方で潜在的なリスクも見ておく必要があります。AI機能は正式提供時にクレジットを消費し、高度な機能は有料プランに限定されます。一つのプラットフォームへの依存が深まるほど、価格改定や仕様変更が制作現場を直撃する構造的な脆さも抱えることになります。なおWeaveツールはFigma Design上ですでに利用できますが、The Vergeは、メインキャンバスへの完全統合が年内に予定されていると報じています。

なお原文FAQの「Figma Motionは無料プランで使えない」という記述は、やや不正確です。正しくは、Motion自体は全プランのオープンベータで利用できますが、アニメーション付きコンポーネントの公開やエージェントによる生成、高解像度の動画書き出しが有料プラン(Full seat)を必要とします。加えて、政府向けのFigma for Governmentプランでは利用できず、エージェントが生成したモーションを手動で編集する分にはクレジットを消費しません。読者が試す際の判断に関わる点なので、補足しておきます。

規制と長期の視点も触れておきましょう。Figmaは2022年に発表されたAdobeによる約200億ドルの買収案を、欧州委員会および英国CMAの規制審査で承認取得の道筋が立たないとして2023年12月に破談とし、その後2025年7月に自力でIPOを果たしました。市場拡大を独占ではなく内製の機能拡張で進める今回の路線は、その歴史と地続きです。IPO後のFigma株は大きく変動しており、市場ではAIコーディングツールとの競合可能性も論点の一つになっています。FigmaにとってConfig 2026は「AI時代に自らが主役であり続けられるか」を投資家にも示す場でした。

innovaTopiaの読み筋としては、今回の発表は流行への便乗ではなく、「デザインキャンバスは最終的に何になり得るのか」という問いへの本気の回答だと捉えています。発表された機能がベータを抜けて実務に耐えるかどうか——本当の評価が下るのは、ここからの数カ月です。

【用語解説】

Code Layers(コードレイヤー)
任意のデザインレイヤーを、ワンクリックまたはプロンプトで、実際に動くコードへ変換できるFigmaの新機能。ローカルのコードベースのアップロードや、GitHubリポジトリのクローン取り込みに対応する。アーリーアクセスは2026年7月開始のクローズドベータ。

Figma Motion(フィグマ・モーション)
キャンバス上で直接アニメーションを制作できる新機能。タイムライン、キーフレーム、プリセットを備える。アニメーションをデザインシステムの一部として扱える点が特徴で、Dev Modeでタイミングやイージングをコードとして読み出せる。

シェーダー(Shader)
画面上の見た目を計算で生成する処理のこと。元々Figmaの描画を裏側で支えてきた技術だが、今回はプロンプトや参照画像から、すりガラスやハーフトーンなどの効果を生成・調整できるようになった。WebGPUを用いる。

WebGPU
ブラウザがPCのGPU(画像処理装置)を高速に利用するための新しい技術仕様。これにより、重い視覚効果もブラウザ上でなめらかに動かせる。

ジェネレーティブ・プラグイン(Generative Plugins)
やりたいことを言葉で説明すると、Figma agentがプラグインのコードを自動生成する機能。アクセシビリティ監査やレイアウト生成など、従来は外部プラグインに頼っていた作業をプロンプトで作り出せる。将来的にはCommunityや組織への公開も予定されている。

Weave(旧称 Weavy)
複数のAIモデルを線でつないで画像・動画・モーションを生成する、ノードベースの制作環境。1回のプロンプトで終わらせず、出力を分岐・再合成して作り込める点が強み。2024年にテルアビブで創業し、2025年10月にFigmaが買収した(買収額は非公表だが、複数の報道では2億ドル超とされる)。

Figma agent(フィグマ・エージェント)
デザインキャンバスを理解して作業を補助するAIエージェント。自分の手順を再利用可能な「スキル」として登録でき、Notion・Slack・GitHubなどへ接続する「コネクター」を備える。現在はベータで、クレジットを消費しない。

MCP(Model Context Protocol)
AIモデルに外部の文脈やツールを渡すための共通規格。Figma MotionがMCP対応であるため、アニメーションの情報をコーディングAIへそのまま受け渡せる。

Dev Mode(デブモード)
デザインを開発者向けの情報(コードや仕様)として読み解くためのFigmaのモード。今回、モーションのタイムラインもここで検査できるようになった。

Cursor / Replit
いずれもAIを中核に据えたコーディング環境。Code LayersがGitHub連携を備えたことで、Figmaがこれらと機能領域で重なり始めている。

Fortune 500 / Forbes Global 2000
それぞれ、米経済誌が選ぶ全米売上上位500社、世界の主要企業2000社のリスト。企業の普及度を示す指標として用いられる。

【参考リンク】

Figma 公式ブログ|Config 2026 Recap(外部)
Config 2026の全発表をFigma自身がまとめた公式記事。機能を「素材」と位置づける思想が読める。

Figma Learn|What’s new from Config 2026(外部)
各機能の提供状況・対応プラン・クレジット消費の有無を確認できるヘルプセンター記事。

Figma(公式サイト)(外部)
ブラウザ上で動く共同編集型のデザインプラットフォーム公式サイト。料金や製品ラインを確認できる。

Figma Weave(公式サイト)(外部)
複数のAIモデルをノードでつなぐ生成ワークフローの公式ページ。買収後もFigma Weaveとして提供。

Figma 公式ブログ|Introducing Figma Weave(外部)
Weavy買収の経緯と狙いを説明した公式発表。テルアビブ創業の背景やチーム構成も記載。

Config 2026(イベント公式サイト)(外部)
開催概要(2026年6月23〜25日/サンフランシスコ)やセッション情報を掲載する公式サイト。

【参考動画】

【参考記事】

Config 2026: New Materials, New Tools and a More Expressive Canvas(Figma 公式ブログ)(外部)
発表内容の一次情報。基調講演の主導者がCEOディラン・フィールド氏であることを裏付け、訂正の根拠とした。

What’s new from Config 2026(Figma Learn)(外部)
Motionの提供形態・書き出し形式・有料条件・政府向け除外・クレジット消費を確認。本記事の精度修正に使用した。

Agenda & Schedule(Config 2026 公式)(外部)
会期6月23〜25日、Opening keynoteを6月24日にCEOディラン・フィールドが務めると明記。日付と人物の確認に使用。

Adobe and Figma Mutually Agree to Terminate Merger Agreement(Adobe Newsroom)(外部)
約200億ドルの買収案が2023年12月に破談した公式発表。欧州委員会と英国CMAの審査が理由と確認した。

Figma acquires AI design startup Weavy for reported $200M+(SiliconANGLE)(外部)
Weavy買収を報じ、金額は非公表ながら報道ベースで2億ドル超とする。買収額の表現修正に使用した。

Figma now has AI motion graphics and shader tools(The Verge)(外部)
Code Layersのコード同期やWeaveの年内完全統合などを報道。機能の補足と競合分析の参考に使用。

【関連記事】

アニメーションはもう「専門家の仕事」ではない? Figma Motionが変えるチーム制作の構造
本記事で触れたFigma Motionだけを単独で深掘りした記事。アニメーションがデザインシステムの一部になる構造変化を詳述しているので、Motionの実務的なインパクトを知りたい方はあわせて読むと理解が立体的になります。

Figma、デザインAIエージェントをキャンバスに統合 — チームメイトとして並走するベータ提供開始
今回のCode Layersやシェーダー生成を担うFigmaエージェントの前身となる、2026年5月のエージェント統合を報じた記事。「エージェントがキャンバスに入った」流れを押さえると、Config 2026の位置づけが鮮明になります。

FigmaがIPO上場で企業価値193億ドル – CEO「AI超知能は差し迫った脅威ではない」と発言
本記事の編集部解説で触れた2025年7月のIPO(FIG・33ドル)を詳報した記事。Figmaが置かれた事業・市場の文脈を、株価や競合の観点から補完できます。

【編集部後記】

ひとつのキャンバスにコードもモーションもAIも集まる——その光景は、たしかにわくわくします。開きっぱなしのアプリが減り、誰かに頼まなければできなかったことが、自分の手の中で動き出す。その手応えは、触ってみた人ほど強く感じるはずです。

ただ、便利さの裏側で、少しだけ立ち止まって考えたいこともあります。これまで別々のツールに分かれていたのは、不便だったからというより、それぞれの領域に専門の知恵が積み重なっていたからでもありました。モーションにはモーションの、コードにはコードの作法がある。それが一枚のキャンバスにまとまるとき、間口は広がる一方で、「なぜこう作るのか」を考える機会は、むしろ減ってしまうかもしれません。

もうひとつ気になるのは、ひとつの場所に頼るほど、その場所の都合に左右されやすくなることです。クレジットの消費や有料プランの線引きは、今後の運用しだいで変わっていきます。今は無料で試せるものが、明日も同じとは限らない。新しいワークフローを組むときには、その前提が動くことも頭の片隅に置いておきたいところです。

それでも、今回の発表が示しているのは、デザインの道具がまだ完成形ではない、ということなのだと思います。色やフォントと同じように、コードや動きを「素材」として扱う。その発想が本当に根づくのか、それとも数年後に別の形へ変わっているのか。答えはまだ誰にも分かりません。だからこそ、今この瞬間に何が起きているのかを、自分の目と手で確かめておく価値がある。皆さんがこの機能を触ってみて何を感じたか、いつかどこかで聞いてみたい気持ちでいます。

Googleで優先するソースとして追加するボタン
投稿者アバター
山本 達也
『デジタルの窓口』代表。名前の通り、テクノロジーに関するあらゆる相談の”最初の窓口”になることが私の役割です。未来技術がもたらす「期待」と、情報セキュリティという「不安」の両方に寄り添い、誰もが安心して新しい一歩を踏み出せるような道しるべを発信します。 ブロックチェーンやスペーステクノロジーといったワクワクする未来の話から、サイバー攻撃から身を守る実践的な知識まで、幅広くカバー。ハイブリッド異業種交流会『クロストーク』のファウンダーとしての顔も持つ。未来を語り合う場を創っていきたいです。