Figma コード レイヤーと Specs: その概要、仕組み、および停止場所2 min read

Figma コード レイヤーは実行中のコードをキャンバスに配置し、Figma Specs は Markdown もそこに配置します。どちらも 2026 年 10 月 15 日の Config India でオープン ベータ版に入ったため、設計ファイルにフレーム、動作するプロトタイプ、およびエージェントを構築する書面による計画を保持できるようになりました。

このガイドは、プロトタイプと仕様の作業を移行するかどうかを決定するデザイナー、PM、フロントエンド エンジニアを対象としています。Figma。各機能の内容、開始方法、AI クレジットにかかる費用、作業をどこで終了する必要があるかについて説明します。Figmaクロードのチームメイトのために、ChatGPTまたはCursor。

AI の時代では、デザインはコードです。 AI を使用してコードで直接設計するか、Figma 設計をコードに変換するには、次を使用します。 Anima Playground: 画面を記述するか、Figma デザインから開始して、プレビューおよび公開できる編集可能なアプリで反復を続けます。

AI を使用してコードで直接設計する

AI を使用したデザイン: 画面を記述したり、Figma デザインをコードに変換したりできます。

Figma は Config India 2026 で何を発表しましたか?

コードレイヤーとSpecsが見出しでしたが、それに付随する一連のエージェント機能が付属していました。現在の状況はこちらからFigmaのヘルプセンター:

どちらのベータ版も数週間かけて展開されるため、チームの他のメンバーの前または後に表示される可能性があります。

とは何ですかFigmaコードレイヤー?

コード層は、実際に実行されるコードを保持する層です。フレーム リンクとの相互作用を模倣するプロトタイプの代わりに、デザインの隣のキャンバス上に、コードでバックアップされた動作するプロトタイプが表示されます。チームメイトは、それをクリックしてコメントし、複製して別の方向を並べて試すことができます。

Figma では、次の 4 つの方法で開始できます。

• デザインからして。 フレームを選択し、Figma エージェントにフレームをコード レイヤに変換するよう依頼します。
• ライブ Web サイトから。 でページをキャプチャしますFigma Chrome拡張子を付けてキャンバスに貼り付けます。
• レポより。 サポートされている軽量のプロトタイピング コードベースを次からインポートします。GitHubまたはローカルフォルダー。あGitHubimport はそのリポジトリに接続されたままになります。
• ゼロから。 空のコード層を追加し、エージェントにビルドを促します。

コーディング ツールで作成したプロトタイプを、Figma MCP サーバー経由でキャンバスに取り込むこともできます。

編集は 3 つの方法で行われます。エージェントにプロンプ​​トを出したり、フレームに注釈を付けて変更箇所を示したり、コード エディタを開いて自分でコードを変更したりすることができます。コードよりも視覚的な詳細が重要な場合、 Extract designs 画面をコードレイヤーから編集可能な状態に戻しますFigmaフレーム。エンジニアがコードを使用できるようになったら、それをブランチにプッシュしてプル リクエストを開くことができます。

Figma Specsとは何ですか？

Figma は、Specs を「コンテキストのネイティブ ホーム」と呼びます。実際には、これは、Figma Design ファイルまたは FigJam ボードのキャンバス上に存在するか、独自の Spec ファイルとして存在する、共同作業用の Markdown ドキュメントです。

すぐに始めることができます。

1. ファイル ブラウザからスタンドアロン Spec を作成するか、次の場所に移動します。 figma.com/spec/new。
2. デザイン ファイルまたは FigJam ボード内で、ツールバーの Spec をクリックするか、 を押します。 D。
3. すでに持っている .md ファイル？それをキャンバスにドラッグすると仕様になります。
4. で書きますMarkdownあなたはすでに知っています: # 見出しについては、 - 弾丸の場合、 [] やるべきことのために、 > 引用符の場合は 3 つのバッククォート、コードの場合は 3 つのバッククォートです。タイプ / 画像の場合、Figma 埋め込みと分割器。

スペックを単なるスペック以上のものにするものMarkdownファイルはテキストの周囲にあるものです。フレームを埋め込むことができます。FigJamボードまたはキャンバスの任意のノードにアクセスできるため、要件とそこに記述されている設計は隣り合ったままになります。チームメイトはそれについてコメントし、Figmaエージェントはそれらのコメントを読んで返信できます。

Specs外で仕事もするFigma。に接続されているコーディング エージェントFigma MCPサーバーは、 figma-spec スキル。 1 つを渡すには、仕様リンクをコーディング エージェントのプロンプトにコピーすると、リンクされたフレーム、図、コード レイヤー、Code Connect スニペットが付属します。

なぜMarkdownハンドオフ形式になりました

Figma 自身の発表記事には、それがはっきりと書かれています。Markdown は、エージェントとコンテキストを共有するための事実上のフォーマットになりました。すべてのコーディング エージェントがそれを読み取ります。ほとんどの製品チームはすでに計画、PRD、エージェントの指示を .md ファイル。

私の解釈では、Specs は Figma で、エージェントへのハンドオフがテキストであることを受け入れ、そのテキストをマルチプレイヤーにしていると考えられます。地元の人 AGENTS.md またはPRD形式のせいで失敗したことはありません。編集が失敗したのは、編集者が 1 人だけで、デザインから逸脱し、エージェントがどのバージョンを使用したかを誰も確認できなかったためです。

Figma の内部では、Specs がそれを修正します。未解決の問題は、その外側で何が起こるかということです。埋め込み、コメント、ライブ デザイン参照は Figma の機能であり、エージェントは Figma MCP カタログにリストされているクライアントを通じてこれらの機能にアクセスします。エンジニア、PM の ChatGPT、マーケティング チームのクロードがすべて同じプランを必要とする場合でも、共有コピーをどこに置くかを決定する必要があります。

実践的なワークフロー: からPRDコード層へ プルリクエストへ

ここでは、Figma で今日文書化されている内容のみを使用して、2 つの機能が実際の機能にどのように組み合わされるかを示します。

1. PRD をキャンバスにドラッグします。 あなたの既存の .md ファイルが仕様になります。何も書き換えられることはなく、手動で編集しても AI クレジットは使用されません。
2. それについて話しているフレームを埋め込みます。 使用する / PRD で説明されているフローを追加します。レビュー担当者は要件と画面を一緒に見ることができます。
3. キーフレームをコードレイヤーに変換します。 それらを選択し、エージェントに指示を出します。すでにプロトタイプ リポジトリがある場合は、それを次からインポートします。GitHubその代わり。
4. 1 か所でレビューします。 仕様とコード層に関するコメントを収集します。人々が同じスレッドに参加している間、Figma エージェントに、公開中の各コメントに修正案を返信するよう依頼してください。
5. 仕様を手放す。 スペック リンクを、Figma MCP サーバーに接続されている Codex、Claude Code、または Cursor に貼り付けます。エージェントは、Markdown とリンクされたデザイン コンテキストを取得します。
6. プロトタイプコードを出荷します。 コード層の変更をブランチにプッシュし、プル リクエストを開くと、エンジニアがマージ前にレビューできるようになります。

出力は、コーディング エージェントが読み取ることができる仕様と、チームが実際にクリックスルーした動作するプロトタイプです。生成されたコードを他のコードと同様にテストします。実行されるプロトタイプは、実稼働対応のコードと同じではありません。

次のステップが、Figma デザインを実行できるコードに変換する場合、またはプロンプトからコードでデザインする場合、それが Anima Playground の仕事です。

コードレイヤーとSpecsの価格はいくらですか?

• コードレイヤーは AI クレジットを使用します。 有料プランでは、コード レイヤー内の生成と編集は 2026 年 11 月 4 日まで無料です。同じプロンプト内の他のエージェントの作業には引き続きクレジットが使用され、11 月 4 日以降はすべてのコード レイヤー タスクがクレジットを使用します。
• Specsは自由に書き込めます。 自分で仕様を入力および編集しても、クレジットは使用されません。仕様のあるエージェントを使用すると、そのようになります。各プロンプトの後でレシートにマウスを移動すると、その金額が表示されます。
• Payload とガイドラインによりコストが追加されます。 Figma は、どちらもエージェントにより多くのコンテキストとより多くの作業を提供するため、同じプロンプトでより多くのクレジットを使用できることに注意しています。

制限を回避する計画を立てる前に確認すべき制限

• ロールアウト。 どちらの機能もオープン ベータ版であり、数週間にわたって展開されます。 Figma Design ツールバーでコード アイコンを探し、ファイル ブラウザで Spec オプションを探します。
• 計画。 Specsは有料プランが必要です。スターター ユーザーはコード レイヤーを取得しますが、Specs は取得しません。どちらも作成するには編集権限が必要です。
• オプトアウトする。 コードレイヤーをオフにできるのはエンタープライズ管理者だけであり、すべてのコードレイヤーをオフにすることによってのみ可能です。FigmaAI機能。
• リポジトリのサイズ。 GitHub インポートは、完全な運用アプリではなく、軽量のプロトタイピング コードベース用です。
• システムコードを設計します。 コード ソースを介して実際のコンポーネント コードを接続することはまだクローズド ベータ版であるため、コード レイヤーはまだ実稼働コンポーネントを使用していない可能性があります。

Figma が停止する場所、および Anima と AgentGrid.io が適合する場所

チーム全体が Figma で作業している場合、コード レイヤーと Specs が強力なデフォルトになります。プロトタイプ、計画、およびコメントは同じファイル内にあり、Figma のエージェントと MCP クライアントはそれらを操作できます。

2 つの一般的な状況は依然としてこのファイルには含まれていません。

アイデアは別の場所から始まりました。 Claude Design プロトタイプ、ChatGPT によって生成された HTML ページ、または学習したいライブ サイト。 Figma の MCP サーバーには、 html_to_figma エージェントが生成した HTML 用のツール。 Figma 内の AI デザイン エージェントである Anima の Buddy も変わります HTML、クロード アーティファクト、画像、URL を編集可能な Figma レイヤーに追加これは、デザイン システムでこれらのレイヤー上でデザインを継続したい場合に便利です。

結果はFigmaを残す必要があります。 仕様またはプロトタイプは、Figma チーム以外の人によってレビューされたり、複数のベンダーのエージェントによって編集されたり、ライブ リンクとして公開されたりする必要があります。それが、Anima によって構築された AgentGrid.io の役割です。 AgentGrid.io 上の Markdown アーティファクトは、ユーザーおよび接続されているエージェント (Claude、ChatGPT、Cursor、Grok Bot など) が編集できるライブの自動保存ドキュメントであり、各変更はバージョン履歴の名前によって関連付けられます。 HTML アーティファクトは、コメントを付けたり、承認されたらパブリック URL に公開したりできる実行中のページです。 1 つの Figma フレームをアプリ アーティファクトとして AgentGrid.io にインポートすることもできます。このインポートは一方向であるため、その後の Figma 編集は同期されません。

両者は同じ工程を担うものではありません。Figma はデザインキャンバスを担います。AgentGrid.io は、作業がツールやチームをまたぐときに Markdown と HTML の成果物を置く場所です。

AgentGrid.io をお試しください チーム内のすべてのエージェントが編集および公開できる仕様またはプロトタイプを保持します。

それぞれのツールを使用するときは、

• 使用Figmaコードレイヤー 関係者が設計の横にある動作するプロトタイプをクリックして、方向性を並べて比較する必要がある場合。
• 使用Figma Specs プランがフレームの横に存在し、Figma MCP サーバーを介してコーディング エージェントによって読み取られる必要がある場合。
• 使用する Anima Playground AI を使用してコードで直接デザインしたり、Figma デザインをプレビューして公開できる編集可能なアプリに変換したりする場合。
• 使用する Buddy 開始点がFigmaの外側にあり、キャンバス上に編集可能なレイヤーが必要な場合。 Figma でのビルドとブラウザー ビルダーでのビルドの詳細な比較については、を参照してください。 Figma Make vs Anima Playground。
• 使用AgentGrid.io 仕様またはプロトタイプをツール間で担当者やエージェントが編集し、コメントを付けてレビューし、ライブ リンクとして公開する必要がある場合。

よくある質問

コードレイヤーとは何ですかFigma?

コード層は、Figma実際の実行コードを保持するキャンバス。選択したフレームから、ライブ Web サイトを作成できます。Figma Chrome拡張子、GitHubプロトタイピング リポジトリ、または空のプロンプトをクリックしてコメントし、複製して方向を比較します。

Figma Specs は Markdown だけですか?

Specs はテキストに Markdown を使用しており、任意の .md ファイルをキャンバスにドラッグして作成できます。そのテキストに Figma 機能、つまり埋め込みフレームと FigJam ボード、コメント、およびそれらのコメントを読んで返信できるエージェントが追加されます。

するFigmaコードレイヤーには AI クレジットがかかりますか?

はい。有料プランでは、コード レイヤー内の生成と編集は 2026 年 11 月 4 日まで無料です。同じプロンプト内の他のエージェントの作業には引き続きクレジットが使用され、11 月 4 日以降はすべてのコード レイヤー タスクが AI クレジットを使用します。

Claude Code、Codex、または Cursor は、Figma Spec を読み取ることができますか?

はい、Figma MCP サーバーに接続されている場合は可能です。コーディング エージェントは、figma-spec スキルを使用して仕様の読み取り、作成、更新を行うことができ、仕様のリンクをプロンプトに貼り付けて、リンクされた設計コンテキストを渡すことができます。

Specs を含む Figma プランはどれですか?

Specs は、Figma の Config India 記事によると、プロフェッショナル、組織、エンタープライズ、教育、さらに政府向けの有料プランでオープン ベータ版です。無料のスターター プランには含まれていません。コード レイヤーは、Starter を含むすべてのプランに展開されています。