FigmaのSpecsとcode layers、Config Indiaでオープンベータに

Figmaは2026年10月15日、インドで初めて開いたConfigカンファレンスで、code layersと、Specsという新機能をオープンベータにしました。code layersは、動作するコードを、Figmaのキャンバス上のデザインの隣に置く機能です。Specsは、人とAIエージェントの両方が読める共有のMarkdownドキュメントを、チームに提供します。この2つによって、デザインからリリースされるコードまでの工程の、より多くの部分がFigmaの中に移ります。

Code layers：キャンバス上で動くコード

Figmaの発表によると、code layersを使うと、チームはコードで動くプロトタイプをキャンバス上で作り、共同で作業できます。すべてのプランで、オープンベータとして提供されています。

チームは、ゼロから始めることも、対応するプロトタイピング用のコードベースをGitHubやローカルフォルダーから取り込むこともできます。GitHubから取り込んだコードは、リポジトリとつながったままになります。FigmaのChrome拡張機能を使えば、稼働中のWebページをcode layerとして取り込めます。

デザイナーは、Figmaのエージェントへのプロンプト、コメントの追加、コードの直接編集によって、code layerを磨き上げられます。Extract designsというツールは、画面を編集可能なFigmaのフレームに戻します。変更はGitのブランチにプッシュでき、マージする前にプルリクエストでレビューできます。

Figmaによると、code layersはAIクレジットを消費します。有料プランでは、2026年11月4日までcode layersの作成と編集が無料です。TechCrunchによると、Figmaは6月に、code layersをプライベートベータとして初めて発表しました。

Specs：キャンバス上のMarkdown

Specsは、Markdownを入れる器です。Markdownは、見出しやリストを簡単な記号で表すプレーンテキストの形式です。specはキャンバス上に置かれ、複数の人が同時に編集できます。既存の.mdファイルをキャンバスにドラッグすると、specになります。

specには、テキストの横に、FigJamのボード、デザインのフレーム、その他のキャンバス上の要素を置けます。エージェントは、spec内のコメントに返信できます。specは、FigmaのMCPサーバーを通じて、コーディングエージェントに送ることもできます。MCP（Model Context Protocol）は、AIツールがほかのソフトウェアにつながるための標準的な方法です。

Specsは、すべての有料プランでオープンベータとして提供されています。Web、デスクトップ、モバイルで使えます。

エージェント向けのルールと、MCPパートナーの拡大

ほかのアップデートは、Figma自身のエージェントと外部のエージェントの両方に、チームのデザインルールを守らせることを狙っています。Figmaの最高経営責任者（CEO）であるDylan Field氏の投稿によると、これらは異なる段階で提供されます。

機能	内容	状況
Code layers	キャンバス上の、コードで動くプロトタイプ	オープンベータ、全プラン
Specs	キャンバス上の共有Markdownドキュメント	オープンベータ、有料プラン
Guidelines	エージェントが従うデザインルール	オープンベータ、有料プラン
Code sources	GitHubのリポジトリやnpmパッケージを取り込む	クローズドベータ、有料プラン
System mapとSystem check	デザインシステムを管理するためのツール	プレビュー
Payload in Figma	Figma Makeで作る、データと連携したWebサイト	全プラン、今後数週間で順次提供
Figma MCP	新たに20件のパートナー連携	提供中

Figmaによると、MCPパートナーにはOpenCode、Dia、Junie by JetBrains、Meta Museが含まれます。TechCrunchは、Grok BotとSarvamの名前も挙げています。Figmaのリリースノートによると、Figma自身のエージェントは10月6日に一般提供が始まりました。

TechCrunchによると、Payloadは、Figmaが昨年買収したコンテンツ管理システムです。Figmaは、Payloadのダウンロード数が過去12カ月で6倍に増えたとしています。

なぜインドなのか

TechCrunchによると、インドは米国以外でFigmaの最大の市場です。同メディアはさらに、ボンベイ証券取引所に上場する上位100社のうち40%がFigmaを使っていると伝えています。

Figmaの最高デザイン責任者であるLoredana Crisan氏は、TechCrunchに「今日では、かつての17倍の行数のコードが生み出されています」と語りました。Crisan氏は、そのコードの多くはリリースするためではなく、アイデアを探るために書かれていると主張しました。

開発者にとっての意味

Figmaでデザイナーと一緒に働くエンジニアにとっての意味は次のとおりです。

• プロトタイプが本物のコードで届くと考えましょう。 code layersはGitHubのリポジトリに置くことができ、変更をプルリクエストとして送れます。そのプルリクエストを誰がレビューするのか、デザイナーがどのブランチにプッシュしてよいのかを、今のうちに決めておきましょう。
• ルールは一度、書き出しておきましょう。 GuidelinesとSpecsは、エージェントにデザインルールの拠り所を文書の形で与えます。デザインシステムを持つチームは、そのルールをここにまとめておきましょう。そうすれば、Figmaのエージェントと外部のコーディングエージェントが同じパターンに従います。
• コーディングエージェントをつなぎましょう。 FigmaのMCPサーバーは、code layers、spec、ビジュアルアセットを扱えるようになりました。MCPに対応したコーディングエージェントをすでに使っているなら、スクリーンショットをもとに作る前に、specをエージェントに読み込ませて試しましょう。
• 11月4日以降は、クレジットの消費量に注意しましょう。 code layersはAIクレジットで動きます。有料プランの無料期間は、2026年11月4日で終わります。ベータ期間中に使用量を記録して、コストを見積もりましょう。