Figma Specs：Markdownの仕様書をデザインの隣に置き、リンク1つでコーディングエージェントに渡す

どんな問題を解決するか / いつ使うか

エージェントにスクショだけを渡すと、「ボタンは青で余白16px」は伝わっても、「このボタンは不正チェックが通った後にだけ出す」といった振る舞いの条件は伝わらない。手元の .md は個人のPCに閉じていて、どのデザインの話なのかとのつながりも切れやすい。Specsはテキストの意図とデザインを同じキャンバスに並べ、チームとエージェントの両方が読み書きできる「共有の文脈」にする。

やり方

1. Specを作る：Figma / FigJam でキーボードの D を押すか、ツールバーの Specs アイコン。既存の .md（PRD・技術仕様・DESIGN.md など）はキャンバスにドラッグ＆ドロップするだけで変換される。
2. デザインを埋め込む：フレーム、FigJamの図、任意のノードをSpecの中に埋め込み、文章とデザインを並べる（スクショや古いリンクの代わり）。
3. Figmaのエージェントと詰める：Specのコメントに返信させたり、「開いているコメント全部に修正案で返信して」と頼んだりできる。GitHubコネクタでコードベースから技術仕様の下書きを作らせることもできる。
4. コーディングエージェントに渡す：Specのリンクをコピーしてプロンプトに貼る。Figma MCPサーバー経由で、Markdown本文とリンク先のフレーム・図・コードレイヤー・Code Connectのスニペットまでまとめて読ませられる。
5. 実装中に書き戻す：実装中に仕様が変わったら、エージェントにMCPでSpecを更新させる（Figmaの開発者自身がSpecs機能をこの流れで作ったと紹介されている）。
6. コードレイヤーとの往復：Specからコードレイヤー（キャンバス上で動くコードの試作、同時期にオープンベータ）を作ったり、コードレイヤーの今の状態を Extract designs で編集できるデザインレイヤーに戻したりできる。

使いどころの例

• デザインシステムのコンポーネントの隣に、使い方の説明（いつ使うか・使わないか）をSpecで置き、エージェントにも読ませる。
• アイコンセットの隣に、ファイル名・カテゴリ・検索タグ・説明を一覧したSpecを置く（Intuitの例）。
• デザインレビューの付箋やコメントを、決まったことと未決の問いに分けてSpecにまとめ、次の検討の出発点にする。

注意点

• 有料プラン向けのオープンベータ（2026-10-15時点）。web・デスクトップ・モバイルで使える。
• 紹介した X の投稿者は、エージェントからMCPでSpecを書き換えるには有料の編集席が要る点、Figmaのリモート MCP の受け渡しサイズの上限が小さい点、Gitのリポジトリと内容がずれると開発者に無視されやすい点を懸念として挙げている（Figma公式の説明ではないので、使う前に確認する）。
• リポジトリの DESIGN.md / AGENTS.md を正本にしているなら、どちらを正にするかを先に決める。二重管理になると古い方をエージェントが読む。
• 関連：AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する、FigmaのAIエージェントで、既存画面から「読み込み中・空・エラー」などの抜けている状態を洗い出す

出典

• 投稿者: @ethanwalkerman（紹介と考察）
• 投稿: @ethanwalkerman · 2026-10-20
• 公式: Introducing Specs: Markdown as a medium（Figma Blog, 2026-10-15）
• 収集日: 2026-10-20（JST）