Figmaのcode layersがオープンベータに（動くコードをキャンバスで並べて比べる。Specs・Payloadも登場、11月4日までの無料の範囲は？）

Figmaが10月15日、インドで開いたイベント「Config India 2026」で新しい機能をまとめて発表しました。中心は、動くコードをFigmaのキャンバスに置ける「code layers（コードレイヤー）」のオープンベータです。あわせて、決めたことをMarkdownで残す「Specs」、Figma Makeで作ったアプリに管理画面とデータベースを付ける「Payload」、外のAIツールからFigmaを動かすFigma MCPの強化も出ています。

この記事では、発表文とFigmaのヘルプに書かれている条件（使えるプラン・AIクレジット・提供の順番）を整理して、Webサイトやデザインの仕事でどこまで使えそうかを考えます。

「デザインを作る場所」だったFigmaに、コードと文章とデータまで入ってきた回です。全部いっぺんに使う必要はないので、仕事に近いところから見ていきます。

何が発表された？

Figmaのリリースノートと、CEOのDylan Field氏のブログ「Build by design」に、10月15日付けで次の発表が載りました。

Config India 2026で発表された4つの機能（code layers・Specs・Payload・Figma MCP）

code layers：動くコードで作ったプロトタイプを、デザインと同じキャンバスに置く。今日からオープンベータで、全プランに順番に広がる
Specs：文章の決めごと・デザイン・技術的な情報を1か所にまとめる、Markdownを土台にした新しい置き場所。有料プランでオープンベータ
Payload in Figma：Figma Makeで作るアプリに、データベース・ファイル置き場・ログイン・管理画面を付けて、Figmaがホスティングする。全プランへ順次
ガイドラインとコードソース：デザインライブラリに使い方の決まりを足す「ガイドライン」はオープンベータ、GitHubやnpmのコードを読み込ませる「コードソース」はクローズドベータ
Figma MCP：いつも使っているAIツールから、code layersを作る・Specsを読む／直す・画像を作る・公開済みのWeaveのワークフローを動かす。連携先が20増えた

ほかに、デザインシステムを1か所で管理する画面（変更や依存関係を追う「system map」、説明の抜けや状態の抜けを探す「system check」）も、プレビューとして紹介されています。

これまでと何が違う？

これまでFigmaは、見た目を作って、それをエンジニアに渡す場所でした。AIでコードを書くのが手軽になった今、デザイナーが自分で動くものを作ることは増えていますが、ブログでは「その作業は一人きりになりがちで、どう作ったかが見えにくい」と書かれています。code layersは、その動くプロトタイプをチームのキャンバスに戻すための機能です。

もう1つの違いは、AIに渡す前提（文脈）を置く場所をFigmaの中に作ったことです。10月6日にFigma agentが正式提供になったときに、ライブラリに使い方の決まりを置けるガイドラインが紹介されました（10月7日の記事）。そのガイドラインは今回オープンベータとして広がり始め、Specsは、決めごとを案件ごとの仕様書にまで広げる位置づけです。

何ができるようになった？

code layers：デザインの横で「動くもの」を比べる

ヘルプによると、code layersの作り方は5通りあります。空のcode layerを置いてエージェントに頼む（ツールバーの「Code」かキーボードのB）、デザインの枠を選んで「Build selection」でコードにする、GitHubのリポジトリを取り込む、手元のフォルダを読み込む、FigmaのChrome拡張でWebページのコードを取り込んで貼る、です。

置いたcode layerは「Play」で実際に触れます。複製して別の方向を頼めば、動く案を2つ3つ並べて見比べられます。コードエディタの「Edit」では、画面の部品を指して色や余白、文字をFigmaのプロパティ画面のように直せます。反対に、「Extract designs」で今の画面や操作の流れを、編集できるデザインのレイヤーに戻すこともできます。GitHubから取り込んだ場合は、ブランチを分けて試し、プルリクエストで元のリポジトリに戻せます。

Specs：決めたことを、デザインの隣に置く

Specsは、見出し・箇条書き・コードなどをMarkdownの書き方で入力できる文書で、.mdファイルをキャンバスにドラッグするだけでも作れます。中にFigJamのボードやデザインの枠を埋め込めるので、仕様書の文章と画面が別々の場所に散らばりにくくなります。エージェントはコメントを読んで返事もできます。

MCPにつないだコーディングエージェントは、「figma-spec」というスキルでSpecsを読んだり、作ったり、直したりできるとヘルプにあります。GitHubの情報から技術仕様を下書きする、といった使い方も紹介されています。

Payload：Makeのアプリを、運用できる形にする

Payloadは、オープンソースのCMS（文章や画像を管理する仕組み）で、開発チームは2025年にFigmaに加わりました。Figma Makeでアプリを頼むと、データベース・ファイル置き場・ログイン・管理画面までまとめて作られます。公開後は、URLの最後に/adminを付けると管理画面に入れて、マーケティング担当がプロンプトを使わずに文章や画像を直せます。外部サービスのAPIキーは、チャットに貼らず、Makeの設定画面に入れて非公開で保存する形です。

code layers・Specs・Payload・ガイドラインの、使えるプランとAIクレジットの条件

仕事ではどう使えそう？

サイトリニューアルの「今」と「案」を並べる

Chrome拡張で今のWebページをcode layerとして取り込み、その横にエージェントで作った改善案を並べる使い方です。静止画のカンプでは伝わりにくい、メニューの開き方やフォームの動きを、打ち合わせの場で実際に触ってもらえます。

「AとB、どっちがいい？」を動く形で出す

code layerを複製して、ボタンの位置や説明の順番だけを変えた案を並べられます。ブログで紹介されている事例でも、関係者の合意を取るために、静止画の画面より動くプロトタイプを見せる使い方が多く書かれています。

案件の決めごとをSpecsにまとめる

お客様から聞いたターゲット、使ってよい言葉、ページの構成案をSpecsに書いて、デザインのすぐ横に置いておく使い方です。手元のMarkdownで作った下書きも、ドラッグでそのまま持ち込めます。エージェントに頼まず自分で書く分には、AIクレジットは使いません。

お知らせ更新の多い小さなサイトの試作

イベント情報やお知らせを担当者が自分で直したい、という小さなサイトなら、PayloadでMakeのアプリに管理画面を付けて、更新の流れを試作できます。お客様に「この画面で更新できます」と見せるところまでを、早い段階で確かめられます。

KAKERUならこう使う／使わない

KAKERUなら、リニューアルの提案で、今のページと改善案をcode layersで並べて見せる使い方は試してみたいところです。11月4日までは、有料プランならcode layersの中の生成と編集にAIクレジットを使わないので、この期間に「どこまで提案資料の代わりになるか」を確かめる価値があります。

一方で、お客様の本番サイトや、問い合わせフォームの個人情報をPayloadに置くことは、今はしません。ホスティングはベータで料金が未発表、データの置き場所は現時点で米国東部、GitHubや手元での開発もまだ対応していないためです。また、code layersで作ったコードは「確かめるための試作」として扱い、本番に使う前にはエンジニアが中身を確認します。

動く案を並べて見せられるのは、提案の場ではかなり強いと思います。ただ「動いた」と「納品できる」は別なので、そこの線引きはこれまでどおり人が決めます。

誰が使える？

code layers：Starter・Professional・Education・Organization・Enterprise。Figma Designファイルの編集権限が必要。数週間かけて順番に届き、使えるようになるとツールバーに「Code」のアイコンが出る
Specs：Professional・Education・Organization・Enterprise。Web・デスクトップ・スマホで、数週間かけて順番に届く
Payload：Figma Makeが使えるプラン（Starterから）。全アカウントへ数週間かけて順番に
ガイドライン・コードソース：有料プラン（ガイドラインはオープンベータ、コードソースはクローズドベータから）
日本での扱い：地域の制限は書かれていません。画面の日本語名は、発表時点では確認できませんでした

注意点

無料なのは11月4日まで、しかも「code layersの中の生成と編集」だけ。同じ依頼の中でもエージェントのほかの作業はAIクレジットを使い、11月5日以降はcode layersの作業もすべて消費します
MCPでコーディングツールの作品をcode layerとして取り込むにはFullシートが必要で、取り込みに10分以上かかることがあります。そのままでは動かないプロジェクトもあるとヘルプに書かれています
Payloadのホスティング料金は未発表（ベータ中は無料、料金は始まる前に発表）。データはいまは米国東部に置かれ、日本から使うと応答が遅くなることがあります
Specsでエージェントを使うとAIクレジットを消費します。消費量は頼む内容で変わり、プロンプトごとに確認できます
code layersを止めたい場合、管理者はAI機能をまとめてオフにする形になり、ほかのAI機能もいっしょに止まります

11月4日までの無料期間は「試すための期間」と割り切って、お客様の案件に入れるかどうかはその後に決めるのがいいと思います。

まとめ

Config India 2026でFigmaは、code layersで動くコードをキャンバスに置き、Specsで決めたことをデザインの隣に残し、PayloadでMakeのアプリに管理画面とデータベースを付けるところまで広げました。どれも数週間かけて順番に届くベータで、使えるプランとAIクレジットの条件は機能ごとに違います。

AIに任せられるのは、動く案のたたき台づくりや、仕様書の下書きです。どの案を選ぶか、本番に出してよいか、お客様のデータをどこに置くかは人が決めます。まずは11月4日までに、code layersで今のページと改善案を並べてみるところから始めるのが手軽です。