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
【編集部解説】
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の動きは、「デザインとコードと動きが、ひとつの場所に集まっていく」という大きな流れの一場面なのかもしれません。あなたが普段使っているツールも、近い将来こうした統合の波に触れていくはずです。もしお時間があれば、Figma Motionのような「今すぐ試せる機能」を実際に触ってみると、記事で読むのとはまた違う手応えがあると思います。
皆さんは、ひとつのツールに機能が集まっていく流れを、便利だと感じますか。それとも少し立ち止まりたくなりますか。よければ感想を聞かせてください。