Figma Specsとは？できること・料金・使い方・Claude Codeとの連携を解説【2026年10月発表】

Figma Specs（スペック）は、Figmaのキャンバスにデザインと並べて置ける、Markdownで書く共同編集ドキュメントです。PRD（製品要求仕様書）や技術仕様、デザインのルールを書いておくと、人間のメンバーだけでなく、FigmaのエージェントやClaude Code・Codexなどの外部のコーディングエージェントもその内容を読んで作業します。

Figma Specsは2026年10月14日（米国時間）の「Config India 2026」で発表され、現在はオープンベータとして有料プランの利用者に順に提供されています。

この記事でわかること

• Figma Specsとは何か、なぜ作られたのか
• できること（キャンバスとのつながり、エージェント連携、MCP経由の外部連携）
• 対象プラン・料金・AIクレジットの消費
• 作り方5通りと、Claude Codeなど外部エージェントから使う流れ
• CLAUDE.md・Notionなど似た道具との違い
• セキュリティ・権限の注意点
• こんな人・チームにおすすめ／まだ急がなくてよい人

こんな方向けの記事です: Figmaを使っているデザイナー・PM・エンジニア、AIエージェントにデザインやコードを作らせていて「仕様の置き場所」に困っているチーム、Figmaの新機能を導入するか判断したい方

Figma Specsの要点

Figma Specsとは

出典: Figma 公式ブログ「Introducing Specs」

Figma Specsは、Figmaが「コンテキストのためのネイティブな置き場所」と位置づける新機能です。AIエージェントに渡す指示書や仕様書を、デザインファイルの中で書いて、チームで編集できるようにしたものと考えるとわかりやすいでしょう。

なぜ作られたのか

公式ブログ「Introducing Specs: Markdown as a Medium」によると、背景にはAIエージェントと働くようになって、コンテキストを渡す形式がMarkdownに落ち着いたことがあります。

ただFigmaは、Markdownのファイルは基本的に一人で使うもので個人のPCに置かれ、ファイル同士のリンクは切れやすく、元のデザインやプロジェクトとつながっていないことが多いと指摘しています。Specsは、こうしたMarkdownをキャンバスにつないだまま、複数人で編集できる場所として作られました。

TechCrunchは今回の発表を「FigmaのエージェントとサードパーティのエージェントがAIで作るときに、ブランドのデザインルールに従えるようにするもの」と報じています。同社の最高デザイン責任者Loredana Crisan氏は「コードは以前の17倍書かれているが、リリースは1.3倍しか増えていない」と述べ、何を作るべきかを決める情報の重要性を強調しています。

同じ名前の別のツールに注意

検索結果には、Figma公式機能のSpecsとは別のものも出てきます。

• Figma Communityのプラグイン「Specs - Prompt for Design to Code for Claude Code & Codex」
• specsplugin.com
• GitHubのOSS「Figma-specs」

これらは第三者が作ったプラグインやツールで、Figmaの公式機能Specsとは関係ありません。この記事で扱うのは、Figmaが2026年10月に発表した公式機能です。

Figma Specsでできること

Specsでできることは、Markdownで書く、キャンバスとつなぐ、Figmaエージェントに手伝わせる、外部のコーディングエージェントに読ませる、の4つに分けられます。

1. Markdownで仕様書を書く

エディタはMarkdownの記法をそのまま受け付けます。

ブロックのハンドルから「Turn into」を選ぶと、ブロックの種類を後から変えられます。右上のメニューから、スクロールするページ表示や全画面のエディタにも切り替えられます。

2. キャンバスのデザインとつなぐ

Specsのいちばんの特徴は、文書とデザインが同じ場所にあることです。

• FigJamのファイル、フレーム、キャンバス上の任意の要素をSpecの中に埋め込める
• キャンバスとSpecの間でドラッグして要素を出し入れできる。キャンバスから持ち込んだ要素はFigmaのプロパティを保つ
• Specをキャンバス上で複製し、メンバーがそれぞれ案を書いてから1つにまとめられる
• エンジニア向けに「Ready for dev」にしたフレームをSpecの横に置いておける
• Specをコードレイヤーにできる。逆にコードレイヤーは「Extract designs」で編集できるデザインに戻せる

共有、コメント、プレゼン中のスポットライトといった、Figmaのいつもの共同作業の機能もそのまま使えます。

3. Figmaエージェントに書かせる・直させる

Figmaエージェントは、Spec上でチームメイトのように振る舞います。公式が挙げている使い方は次のとおりです。

• Spec内のコメントを読んで返信する。開いているコメントすべてに、スレッドごとに修正案を返す
• Specを直接書き換える（例: 機能名を文書全体で変更する）
• FigJamのブレインストーミングのアイデアからPRDを膨らませる
• 選んだフレームからブリーフを作る、デザインレビューの議題を作る
• 画像の生成、コードレイヤーの作成、Weaveのワークフローの実行

コネクターを使うと外部の情報も取り込めます。GitHubコネクターはコードベースの情報を技術仕様に、Hexコネクターは利用データなどの分析結果をSpecのコメントとして持ち込みます。

4. Claude Code・Codexなどの外部エージェントに読ませる

Figma MCPサーバーにつないだコーディングエージェントは、figma-specスキルを使って、単体のSpecやキャンバスに埋め込んだSpecを読んだり、作ったり、更新したりできます。

公式ブログが示している流れは次のとおりです。

1. Specのリンクをコピーして、コーディングエージェントのプロンプトに貼る
2. エージェントがMCPサーバー経由で、Specの本文と、そこにリンクされたMarkdown・フレーム・図・コードレイヤー・Code Connectのスニペットを読む
3. その内容をもとに本番のコードを書く

エージェントがSpecを書き換えるときは該当箇所だけを直すため、ほかの箇所に付いたコメントはそのまま残ります。SpecからLinearのissueやGitHubのリポジトリへ情報を出す使い方も紹介されています。

MCP（Model Context Protocol）の仕組みそのものは、MCPとは？仕組み・できること・対応ツールを解説で詳しく整理しています。

公式が紹介している使い方の例

Figma社内では、Specs自体の開発にもSpecを使っていると紹介されています。

Figma Specsの強み

Specsの強みは、仕様・デザイン・エージェントを1か所でつなげられることです。

仕様とデザインがずれにくい

これまでPRDはNotionやGoogleドキュメント、デザインはFigma、AIへの指示はリポジトリのMarkdown、と置き場所が分かれがちでした。Specsでは文書の中にフレームや図をそのまま埋め込めるため、「どの画面の話か」が文書から外れません。

人とAIが同じ文書を読む

人がレビューした仕様を、そのままFigmaエージェントや外部のコーディングエージェントに渡せます。AI用に別の指示書を書き直す手間が減ります。

チームで編集できるMarkdown

個人のPCに置いたMarkdownと違い、共有・コメント・同時編集ができます。.mdファイルをキャンバスにドラッグすればSpecになるので、手元の資料からの移行もしやすい設計です。

外部ツールに開かれている

Figma MCPサーバーの対応クライアントには、Claude Code、Claude Desktop、Codex、Cursor、Gemini CLI、Kiro、VS Code、Warpなどが並んでいます（Figmaヘルプの対応表より）。Config India 2026ではMCPサーバーの連携先が20以上増えたことも発表されました。

Figma Specsの弱み・制約

導入前に確認しておきたい制約として、現時点では次のものがあります。

Specsに書いたルールでAIの出力を一定の方向に寄せることはできますが、「Specsを書けばAIがデザインルールを必ず守る」わけではありません。TechCrunchも、AIの出力が決定的でないことを前提に「より予測しやすい結果に導く道具」として紹介しています。

Figma Specsの料金・対象プラン

出典: Figma 公式サイト（料金）

Specs単体の追加料金はありません。 対象となる有料プランに入っていれば使えます。ただし、エージェントに作業させるとFigmaのAIクレジットを消費します。

対象プラン

公式ページの間で対象プランの書き方に少し差があります（Guideでは Professional・Education・Organization・Enterprise、What's newのFAQではGovernmentも記載）。現時点では次のように理解しておくのが無難です。

• 使える: Professional・Organization・Enterprise、Education
• 使えない: Starter（無料プラン）
• 未確定: Government（一部のページにのみ記載）

料金ページでは「Figma Specs (Beta)」が有料シートで利用できるとされ、FAQではDevシート・Collabシートにも含まれると説明されています。

Figmaのプラン料金（2026年10月15日時点）

公式料金ページは、日本語ページも含めて米ドル表記です。いずれも1シートあたりの月額です。

日本円での請求額は為替と税で変わります。正確な金額は契約画面で確認してください。

AIクレジットの消費

クレジットの扱いで押さえておきたい点は次のとおりです。

• 自分でSpecを書く・編集するだけならクレジットは消費しない（公式ガイドに明記）
• エージェントにSpecを作らせる・直させると消費する。消費量はタスクとコンテキストの量で変わる
• プロンプトごとの消費量は、エージェントの「レシート」にカーソルを合わせると確認できる
• クレジットは毎月リセットされ、繰り越し・譲渡はできない。AIの操作を取り消してもクレジットは戻らない
• 足りなくなったら、AIクレジットのサブスクリプションか従量課金で追加購入できる（価格は公式ヘルプで確認を）
• 非公開ベータ中のFigJamエージェントでSpecを作る場合、現時点ではクレジットを消費しない

同時発表のコードレイヤーは11月4日まで無料

Specsと一緒によく使うことになるコードレイヤーも、今回オープンベータになりました。有料プランでは2026年11月4日まで、コードレイヤーの作成・編集タスクがクレジットを消費しません。 同じプロンプトでエージェントが行うほかの作業はクレジットを消費し、11月5日以降はコードレイヤーも通常どおり消費します。

Specsとコードレイヤーをまとめて試すなら、この期間が始めやすいタイミングです。

Figma Specsの使い方

出典: Figma 公式サイト（MCPカタログ）

Specsの作り方は5通りあります。目的に合わせて選べます。

基本の流れ

実際のチームでの使い方は、たとえば次のようになります。

1. PMがFigJamのブレストを「Summarize AI」でSpecにまとめる
2. Figmaエージェントに、そのSpecからPRDの下書きを作らせる
3. デザイナーとエンジニアがコメントで指摘し、エージェントにコメントへの修正案を返させる
4. デザインのフレームをSpecに埋め込み、画面と仕様を並べる
5. エンジニアがSpecのリンクをClaude CodeやCodexに渡し、実装させる

Specの閲覧には閲覧権限、編集には編集権限が必要です。

Claude Codeなどの外部エージェントから使う

外部のコーディングエージェントからSpecを使うには、次の3つがそろっている必要があります。

1. リモートのFigma MCPサーバー（https://mcp.figma.com/mcp）に接続していること
2. エージェントがfigma-specスキルを使えること
3. Specに書き込む場合は、そのファイルの編集権限があること

接続できたら、SpecのリンクをClaude Codeなどのプロンプトに貼り、「このSpecに沿って実装して」と頼みます。エージェントはSpecと、そこにつながるフレーム・図・コードレイヤーを読んでから作業します。

Claude CodeにMCPサーバーを追加する手順はClaude Code MCP連携ガイドを参考にしてください。Claude Code・Cursorそのものの特徴はClaude Codeとは、Cursorとはで整理しています。各クライアントの最新の対応状況はFigmaのMCPカタログで確認できます。

MCPでキャンバス（下書き以外）に書き込むにはフルシートが必要です。キャンバスへの書き込みはベータ中は無料で、将来は使った量に応じた課金になる予定と案内されています。

似た道具との違い

Specsとよく比べられるのは、リポジトリに置くCLAUDE.md・AGENTS.md、NotionやConfluenceの仕様書、Figmaのライブラリのガイドラインです。違いは「どこに置くか」と「デザインとつながっているか」です。

※ Specs以外の列は一般的な性質で、各ツールの設定や連携によって変わります。

どれか1つに置き換えるものではありません。たとえば次のように使い分けると整理しやすくなります。

• リポジトリ全体のルール（言語、テスト、コミットの規則）はCLAUDE.mdやAGENTS.mdに置く
• 機能ごとの仕様と画面はSpecsに置き、デザインと並べてレビューする
• ブランドやコンポーネントのルールはライブラリのガイドラインに置く
• 社内全体の文書はNotionやConfluenceに残す

ライブラリのガイドライン（公開ライブラリにエージェント向けのルールを付ける機能）も、同じConfig India 2026でProfessional・Organization・Enterprise向けのオープンベータとして発表されています。

Figma以外のAIデザインツールも含めて比べたい方は、AIデザインツールおすすめ比較を、AnthropicのデザインツールについてはClaude Designの解説（Claude Designとは）をご覧ください。

セキュリティ・権限の注意点

Specは、AIエージェントに渡す指示書そのものです。MCPで外部のエージェントにつなぐと、未発表の製品情報や社内の仕様がそのエージェントに渡ることになります。業務で使うなら、次の点を先に決めておくと安心です。

権限を決める

• Specの閲覧には閲覧権限、編集には編集権限が要る。MCP経由で書き込むにもリモートサーバーと編集権限が必要
• どのメンバーが、どのコーディングエージェントで、どのファイルにMCP接続してよいかを決めておく
• MCPサーバーとFigmaエージェントは、ユーザーがアップロードしたフォントにもアクセスできる

AI機能を止めたいとき

• Enterpriseでは、組織の管理者だけがAI機能のオン・オフを切り替えられる。ワークスペース単位でも設定できる
• Professional・Organizationでは、ベータ中に無効になっていた場合に管理者が有効にできる。一度有効にするとオンのままになる
• AIをオフにした組織・ワークスペースでも、メンバーは自分の下書きや、AIがオンの別のワークスペースではAIを使える点に注意

学習へのデータ利用（既定の設定がプランで違う）

Professionalで業務の仕様を書くなら、まず学習利用の設定を確認しておきましょう。オフにしてもAI機能は使えます。現時点では、Specs専用のセキュリティ文書は公式に見当たりません。

AIエージェントを業務で使うときの全般的なリスクは、AIエージェントとはでも整理しています。

自社の開発の流れに組み込むとき

Specsを業務で使うと、「Specに仕様を書く→エージェントがコードを書く→人がレビューする」という流れがチームの標準になっていきます。社内の業務システムや既存のプロダクトにAIを組み込むところまで考えるなら、どの業務から始め、どのデータをAIに渡すかを先に決めておくのが近道です。進め方は既存システムにAIを組み込む方法にまとめています。

Config India 2026で同時に発表された機能

Specsは単独の発表ではなく、「エージェントがFigmaでどう働くかを決める」一連の発表の1つです。

デザインからコードまでをAIで一気に作る流れに興味がある方は、バイブコーディングとはもあわせて読むと全体像をつかみやすくなります。

Figma Specsはこんな人・チームにおすすめ

おすすめな人・チーム

• Figmaの有料プランを使っていて、PRDや仕様がNotion・Googleドキュメント・Slackに散らばっている
• Claude Code・Codex・Cursorなどで実装していて、デザインの意図をエージェントにうまく伝えられていない
• デザインシステムのルールを、人とAIの両方に守らせたい
• FigJamでのブレストやレビューの結果を、そのまま仕様書にしたい
• コードレイヤーとあわせて、デザインから実装までの流れを試したい（11月4日までが試しやすい）

まだ急がなくてよい人・チーム

• 無料のStarterプランで使っている（Specsは使えない）
• 仕様書をNotionやConfluenceで管理する運用がすでに固まっていて、AIエージェントにデザインを読ませる予定がない
• 社内のルールで外部のAIエージェントへの仕様の持ち出しが認められていない
• ベータ版の機能を業務の中心に置きたくない（仕様や料金が変わる可能性がある）
• AIクレジットの消費を細かく管理できる体制がまだない

利用シーン別の判断の目安

よくある質問

Q. Figma Specsは日本語で書けますか？

A. Specsは汎用のMarkdownエディタなので日本語の文章を書くこと自体はできると考えられますが、日本語での利用についての公式の記載は現時点で見当たりません。日本語で書いたSpecをエージェントがどこまで正確に読むかは、使うエージェントやモデルによって変わります。

Q. Specsが画面に表示されません。

A. オープンベータは数週間かけて段階的に展開されており、同じ組織の中でも使えるようになる時期がずれることがあります。有料プランなのに表示されない場合について、公式は時間をおいて再確認するよう案内しています。Enterpriseでは、管理者がAI機能をオフにしていないかも確認してください。

Q. Specを作るだけでAIクレジットは減りますか？

A. 減りません。自分で書いたり編集したりするだけならクレジットは消費せず、エージェントに作成・編集を頼んだときに消費します。

Q. Figma Communityの「Specs」プラグインと同じものですか？

A. 別のものです。「Specs - Prompt for Design to Code for Claude Code & Codex」などのプラグインは第三者が作ったもので、Figmaの公式機能Specsとは関係ありません。

Q. ChatGPTやClaudeのチャット画面からSpecを読めますか？

A. Figma MCPサーバーに対応したクライアントであれば読めます。対応表にはClaude DesktopやClaude Code、Codexなどが載っています。チャットアプリで使えるかどうかは、そのアプリがMCPのリモートサーバーに対応しているかで決まります。

Q. ベータ終了後は有料になりますか？

A. 正式版の時期と、ベータ終了後の料金は発表されていません。MCPでのキャンバス書き込みについては、将来は使った量に応じた課金になる予定と案内されています。

まとめ

Figma Specsは、Figmaのキャンバスにデザインと並べて置ける、Markdownの共同編集ドキュメントです。PRDや技術仕様、デザインのルールを1か所にまとめ、人とFigmaエージェント、MCP経由のClaude Code・Codexなどが同じ内容を読んで作業できるようにします。

• 有料プラン（Professional・Organization・Enterprise）とEducationで使える。Starterでは使えない
• Specs単体の追加料金はなし。エージェントに作業させるとAIクレジットを消費する
• 作り方はSpecファイル、Dキー、.mdのドラッグ、Summarize AI、エージェントへの依頼の5通り
• 外部エージェントからはリモートMCPサーバーとfigma-specスキルで読み書きする
• オープンベータで段階展開中。学習利用の設定とMCP接続の権限は先に決めておく

コードレイヤーの作成・編集が無料になる2026年11月4日までは、SpecsとコードレイヤーをAIクレジットを抑えて試しやすい期間です。ベータ中は仕様や対象プランが変わる可能性があるため、導入前に公式のGuide to Specs in Figmaと料金ページを確認してください。

参考情報（公式・報道）

• Introducing Specs: Markdown as a Medium（Figma公式ブログ）
• What's new from Config India 2026（Figmaヘルプセンター）
• How Figma AI credits work（Figmaヘルプセンター）
• Figma announces new features to define how agents work on its platform（TechCrunch）