Figma Specs・Code Layersとは？2026年10月の新機能と無料条件、実務での使い方
Figmaが2026年10月15日に発表したSpecsとCode Layersの更新は、LPやUIを作るときの「意図を書く・動かして確かめる・デザインへ戻して直す」という往復を考える材料になります。
今週の注目は、新しいSpecs、Code Layersのオープンベータ化、MCPの対応範囲の拡大です。この記事では、以前からある機能との違い、段階提供と無料期間の条件、制作で試す手順を整理します。Figma MakeへのPayload統合にも短く触れます。
情報確認：2026年10月16日。主に10月9〜15日の公式発表を対象としています。日付は公式ページの表記です。紹介する制作テストは未実施の提案で、実際のアカウント操作、制作時間、性能、修正回数の検証結果ではありません。
今回の新機能と、以前からある機能を分ける
「Figmaでコードを扱えるようになった」という説明だけでは、今回の更新点が曖昧になります。発表日と、使える人が広がる時期を分けて見ておきましょう。
- 2026年6月24日：Code Layersが発表され、クローズドベータへの段階提供が案内されました。動くコードをキャンバスに置くこと、デザインを抽出して修正を戻すことも、この時点で紹介されています。6月の公式発表
- 2026年10月15日：Code Layersがオープンベータへ移行。今後数週間をかけた段階提供のため、発表当日に全アカウントへ届いたという意味ではありません。Code Layersの提供案内
- 同じ10月15日：Specsを新たに発表。MCPにはSpecsやCode Layersを含む新しい作業範囲が加わり、Payloadを使うFigma Makeの更新も発表されました。10月15日の発表総覧
したがって、デザインとコードを往復する考え方そのものを「今週初めてできたこと」とは扱いません。今回は、文脈を置くSpecsが加わり、Code Layersを試せる範囲が広がる更新として読むと、実務への取り入れ方を考えやすくなります。
Figma Specsとは 意図と画面を一緒に扱う場所
Specsは、決定事項や必要な文脈をまとめるFigmaの機能です。独立したSpecファイルとして作るほか、Figma DesignやFigJamのキャンバス上にも置けます。Markdownファイルを取り込んだり、文章の中にFigmaのフレームや図を埋め込んだりできます。Specsの公式ガイド
制作で使うなら、完成後の説明書にするだけでなく、ラフの隣へ判断の理由を置く使い方が考えられます。たとえば次の項目です。
- 誰に、何を伝える画面か
- 閲覧後にしてほしい行動は何か
- 守る文言、ブランドのルール、参照するコンポーネント
- 今回決めることと、まだ決めていないこと
- 確認する人と、採用する条件
「目立つボタンにする」と書くだけでは、色を強くするのか、説明を短くするのかが決まりません。「相談できる内容を理解した人が、入力画面へ進める」と書けば、ボタンの周囲で何を説明すべきかも検討できます。
意図を具体化する、今週の二つの事例
木村屋總本店：10月15日にグッドデザイン賞受賞が発表されたリブランディングは、4月4日に始まった刷新です。創業時の活字を再構成したロゴ、明治の銀座に由来する煉瓦色、「おもたせ」を支える使いやすい包材へ展開しています。制作の仕様へ応用するなら、「この色を使う」に加えて、由来と使う場面まで書く。見た目を選ぶ理由を、別の媒体へ渡すための参考になります。刷新の公式紹介／10月15日の受賞発表
明治「KINOTAKE+」：10月13日に公開された動画サイトには、ホーム、カテゴリー、お気に入りなどの入口があります。明治の公開発表／公式サイト。10月14日の担当者取材では、後からブランドに関心を持った人にも過去の作品を届ける狙いが語られています。AdverTimes.の取材記事。この事例を制作の問いへ置き換えるなら、「公開後にも目的の作品を見つけ直せるか」。意図を先に書けば、カテゴリーやお気に入りを試作で確かめる理由になります。
この二つは、表現や導線の理由を考えるための事例です。Figmaの利用状況や導入効果を示すものではありません。
Code Layersで画面と動作を確かめる
Code Layerは、実行されるコードを持つインタラクティブな試作を、Figma Designのキャンバスに置くものです。見た目の案を並べるだけでなく、実際に操作して状態や流れを確認できます。6月の発表でも、複数案を並べることと、動くコードとデザインの間を行き来することが紹介されていました。Code Layersの初回紹介
静止画ではボタンの文言や配置を確認できます。動く試作では、その先の画面、読み込み中、入力内容が足りない場合など、時間の流れも確認の対象になります。どちらを作るかは、いま確かめたい疑問に合わせて選びます。
Extract designsで編集できるレイヤーへ取り出す
公式ガイドでは、Code Layerから現在の画面、選んだ要素、記録した一連の流れをデザインとして抽出する方法が案内されています。抽出後のレイヤーを修正し、Code Layerへ変更を戻せます。Extract designsの案内
実務では、抽出できたことに加えて、文字を編集できるか、レイアウトの調整方法が適切か、使いたいコンポーネントや変数との関係が保たれているかを確認しましょう。変更を戻したあとも、対象外の文言や別の状態を含めて見直す工程を残します。
Specsから試作とデザインへ戻る手順
ここからは、架空のデザイン事務所のLPを使う制作案です。実案件や操作済みの手順ではありません。「制作の相談をする」というCTAと、その先の入力画面だけを対象にします。
1．今回確かめる意図を書く
Specsへ「制作を頼むか迷っている担当者に、相談できる内容と相談後の流れを伝える」と記載します。CTAの役割は入力画面への移動、最初のクリックだけでは送信を確定しない、と決めます。説明文、CTA、遷移先の文言を同じ場所で確認できるようにします。
2．ひとつの流れを試作する
LP全体の再制作から始めず、CTAと入力画面の一往復を作ります。試作用のダミー情報を使い、外部へ実際の問い合わせを送信しない構成にします。入力前、入力不備、送信中、完了という状態を試す場合も、どこまでを今回作るか先に決めます。
3．確認したい状態をデザインへ取り出す
スマートフォン幅の入力画面など、見直したい状態をExtract designsで取り出す方法が候補になります。説明文とCTAの間隔、改行、入力欄の説明を編集し、変更をCode Layerへ戻して再確認します。利用画面に対象機能があることを確認してから進めてください。
4．変更理由と未確認項目をSpecsへ戻す
「長い説明を短くした」だけでなく、「相談前に必要な二つの情報を先に読めるようにした」と理由を残します。実際の送信処理、エラー時の復帰、キーボード操作など、試していないことは未確認と記載します。
この工程で期待するのは、画面の変更と判断の理由を一緒に追えることです。制作時間が何％減るか、修正が何回減るかは、実案件で記録しなければ分かりません。
MCPで外部のエージェントへ渡すときの注意
Figma MCPは、外部のAIエージェントがFigmaの情報や操作へアクセスするための接続方法です。今回初めて登場したものではありません。10月15日の更新では、SpecsやCode Layersに加え、画像生成やWeaveのワークフロー実行などへ対応が広がると発表されました。10月15日のMCP更新
Specsについては、対応するスキルを使うエージェントが読み取り・作成・更新を行えます。Specのリンクを渡すことで、文章だけでなく参照するフレームなども文脈として使う流れが紹介されています。SpecsとMCPの連携例
ただし、接続しただけですべての操作が同じ条件で使えるわけではありません。使うクライアント、リモート版かデスクトップ版か、シート、ファイルへの編集権限を確認します。Specsへの書き込みはリモートMCPと編集権限が必要です。Figma MCPの公式ガイド
また、Figma内のエージェントがSpecsのコメントに応答する説明と、外部MCP経由のコメント操作は分けて考えます。公式のMCPスキル案内では、Specsのコメントワークフローは今後の対応とされています。Figma skills for MCP
渡す前に決めたい三つのこと
- 参照する範囲：採用した画面と文言を指定し、不採用案と混同しないようにする
- 変更してよい範囲：CTA周辺だけなど、今回の修正対象を決める
- 確認する人：生成物を誰が確認し、どの状態なら次へ進むかを決める
クライアント名や非公開資料を渡す前には、利用規約、社内のAI利用方針、接続先のアクセス範囲も確認してください。試作には公開可能なダミーの文言を使うと、機能の確認と情報管理の判断を分けて進められます。
提供対象と無料期間の条件
機能の提供対象、操作できるシート、AIクレジットの扱いは別々の条件です。「オープンベータ」「全プラン」「無料」という言葉を、同じ意味で扱わないようにします。
Specsは段階提供中 直接の執筆とエージェント利用を分ける
10月15日の公式発表では、有料プランへのオープンベータの段階提供が案内されています。専用ガイドの対象はProfessional、Education、Organization、Enterpriseです。Starterについては、利用できると断定せず、アカウント内の表示と最新の専用ガイドを確認してください。文章を直接執筆・編集する操作はAIクレジット不要で、エージェントへ作成・編集を依頼する場合は消費対象です。Specsの対象・操作条件
Code Layersの期間限定無料は対象作業に限られる
Code LayersはStarterを含む全プランへの段階提供が案内されています。ただし、使える操作はシートや編集権限にも左右されます。対象プランの公式発表
有料プランでは、Code Layer内のコード生成・編集が2026年11月4日までAIクレジットを消費しないと案内されています。同じプロンプトに含まれていても、別のエージェント作業は消費対象です。期間終了後はCode Layersの作業も通常のAIクレジット対象になります。Code Layersの無料期間
MCP経由でコードのプロジェクトをCode Layerとして取り込む操作自体はFigma AIクレジットを使わず、作成にはFullシートが必要とされています。取り込んだあとのAI編集は、別途、無料期間やクレジットの条件を確認します。MCP取り込みの条件
画像生成やWeaveも、それぞれの条件を確認する
MCPで呼び出す画像生成はFigma AIクレジット、MCP経由のWeave実行はWeaveクレジットを使います。Figma Design内でWeaveツールを使う場合はFigma AIクレジットなので、実行する場所も確認が必要です。MCPの料金・利用条件FAQ／Figma AIクレジットの説明
外部のコーディングツールの契約も別に確認してください。AI作業の消費量は内容や文脈量で変わるため、「この指示なら必ず何クレジット」と固定して見積もらず、実行後の使用履歴も残します。
Payload統合で変わる範囲
同日のPayload統合では、Figma Makeでデータベース、ファイル保存、ユーザーログイン、管理画面などを用意する仕組みが案内されています。記事や商品情報を管理しながら動くWebサイトを作る際に関わる更新です。全プランを対象に、今後数週間かけて段階提供されます。Payload統合の公式発表
無料とされているのは、現在ベータ中のPayloadを使うMakeプロジェクトのホスティング基盤です。将来の料金体系は適用前に告知されるとしています。Makeの生成やあらゆる外部サービスまで無制限に無料という意味ではありません。
今回のようなCTAの小さな試作なら、最初から実データを保存する必要はありません。実際の入力を受け付ける段階で、取得する情報、保存先、閲覧できる人、削除方法、運用費用を別に確認しましょう。
最初に試す小さな制作テスト
最初の確認範囲は、ボタンの動作、スマートフォン表示、文字の編集に絞ります。以下は記入前の確認項目で、テスト結果ではありません。
- ボタンの動作：CTAの文言と遷移先が一致するか。押しただけで意図しない送信が起きないか。戻ったときにも操作を続けられるか。
- スマートフォン表示：同じ画面幅で、説明とCTAの順番、改行、横にはみ出す要素を確認する。幅を変えたら再確認する。
- 文字の編集：短い原稿と長い原稿を用意し、文言を編集したあとも、文字欠けや重なりがないか。抽出後と、Code Layerへ戻したあとを別々に見る。
例として、このテストでは幅390pxの表示を最初の条件にします。390pxはすべてのスマートフォンを代表する値ではなく、比較条件をそろえるための仮の値です。その後、案件の対象端末に合わせて追加確認します。
記録には「確認済み」「要修正」「未確認」を使い、対象画面、原稿、変更点、クレジット使用量を残します。画面上で確認できることと、実機・ブラウザ・本番環境で確認することを分けましょう。問い合わせ率などの成果は、この試作だけでは測れません。
よくある質問
Code Layersは2026年10月に初めて発表された機能ですか
初回発表は6月24日です。10月15日の更新点はオープンベータへの移行と段階提供の拡大です。抽出したデザインとコードを行き来する説明も、6月の発表に含まれています。
全プラン対象なら、すべてのシートで作成できますか
プランとシートは別条件です。たとえばMCPからCode Layerを作成する説明にはFullシートの条件があります。機能の対象プランだけでなく、シートと編集権限も確認してください。
Specsを使えば、AIが意図を間違えなくなりますか
そのような保証はありません。書かれていない前提や、互いに矛盾する指示が残る場合もあります。採用した条件を短く書き、生成物をその条件と照らし合わせる工程が必要です。
まだ新機能が表示されない場合は何から始めればよいですか
公式の段階提供状況を確認しながら、既存の文書やキャンバス上のメモで、目的、CTA、未決事項を先に整理できます。新機能を使う前にも、確認する問いは準備できます。
試作が動けば、そのまま本番公開してよいですか
本番公開の判断には、入力処理、アクセス制御、アクセシビリティ、利用する素材の権利、運用費用などの確認も必要です。小さな試作で確かめた範囲を記録し、未確認の範囲を埋めてから進めます。
まとめ 画面と判断理由を一緒に更新する
今週のFigmaから制作へ持ち帰りたいのは、意図を短く書き、必要な範囲を動かし、気づきをデザインと文章へ戻す順番です。
次のLPやUIでは、まず「誰に・何を・次にどうしてほしいか」を書き、ボタン一つの流れから確認してみてください。新機能を使う範囲、試す条件、費用の上限も先に決めておくと、何を確かめるための試作かが明確になります。
関連：画像制作で条件を先に決める考え方は、Midjourney Thinking Modeと、構図・文字・余白を確認する方法でも整理しています。
本文の画像5点は、説明用に制作したオリジナル概念図です。公式画面、公式ロゴの再現、実案件、実測比較を示すものではありません。提供状況や料金は変わる可能性があるため、利用時にはリンク先の最新情報とアカウント内の表示を確認してください。
