仕様書はNotionにある。デザインはFigmaで作る。この当たり前の「分断」が、FigmaのAIエージェントスキルを使うと、実はつながる。2026年6月のConfig 2026で公式発表されたFigmaの「AIスキル」機能は、Notionのページをコンテキスト情報としてFigmaのAIエージェントに渡し、PRD（製品要件定義書）の内容からUIコンポーネントを生成・調整する全工程を可能にする。この記事では、Notionに書いた1本の仕様書がどうFigmaのキャンバス上でUIになるのか、公式発表をもとに全工程を追う。なお、早期アクセスの申込みは2026年7月開始予定（公式発表時点）のため、現時点では一般公開前の機能であることをあらかじめ断っておく。
図解
flowchart TD
A["Notionに仕様書\n（PRD）を書く"] --> B["FigmaでAIスキルを登録\n（NotionページURLを指定）"]
B --> C["AIエージェントを起動\n（Figmaキャンバスから）"]
C --> D["エージェントがNotionを読む\n（内容をコンテキストに変換）"]
D --> E["Figmaキャンバス上で\nUI操作を実行"]
E --> F["コンポーネント生成・\nスタイル適用・レイアウト調整"]
F --> G["デザイナーが確認・\n手動で微調整"]
そもそも「FigmaのAIスキル」とは——エージェントに渡す「文脈」の仕組み
FigmaにおけるAIスキル（Skills）とは、FigmaのAIエージェントが参照できる「外部情報の接続先」を指す。ブラウザ拡張やAPIキーとは異なり、AIエージェントが作業するたびに自動でそのページの内容を読み込み、コンテキスト（作業の文脈）として使えるようにする仕組みだ。
2026年6月のConfig 2026では、Notion・GitHub・Excelの3つが最初の対応スキルとして発表された（Figma公式ブログ：Config 2026 Recap）。
つまり、Notionをスキルとして登録すると、Figmaのエージェントが「どんなプロダクトを作るのか」「コンポーネントの仕様はどうなっているか」をNotionのPRDから読み取って、キャンバス上の操作に反映できるようになる。
特筆すべき点は「デザイナーがコードを書かなくていい」という設計思想だ。FigmaのGUI（グラフィカルな画面操作）の中でスキルを設定し、エージェントに指示を出すだけで、外部ドキュメントを参照したUI生成が動く。
NotionのPRDが「起点」になる理由
通常、デザイナーはNotionに書かれた仕様書を読んでからFigmaで手動で作り始める。このプロセスで発生しやすい問題は2つある。
- 仕様の取りこぼし：長いPRDの中の一文（「エラー状態のUIも必要」など）を見落とす
- 仕様変更の反映漏れ：Notionが更新されてもFigmaに反映されないまま議論が進む
FigmaのAIスキルは、Notionページとの接続を維持するため、エージェントが毎回Notionの最新状態を参照した上でFigmaを操作する。これにより、「NotionにあってFigmaにない情報」が減り、両者の分断を縮める設計になっている。
全工程を追う：仕様書1本からUIが生まれるまで
ここからは、Figma公式発表のデモ・ドキュメントをもとに、NotionのPRDからFigmaのUIコンポーネントが生まれるまでの流れを工程順に追う。
工程1：Notionに「AIが読める仕様書」を用意する
Notionのページは通常のテキストで構わない。ただし、AIエージェントが正確に読み取りやすい仕様書には、いくつかの書き方のコツがある。
有効な書き方の例：
- コンポーネント名を明記する（例：「プライマリボタン・セカンダリボタン・テキストリンクの3種」）
- 状態（State）を列挙する（例：「デフォルト・ホバー・押下・非活性・エラーの5状態」）
- 色やサイズはFigmaのバリアブル名と一致させると連携の精度が上がる（例：「Primary/500」「spacing-4」）
注意点：公式発表の時点では、Notionのデータベース（テーブル・ボード）形式とシンプルなページ形式のどちらがより精度高く読み取られるかは「現時点では詳細仕様が公開されておらず確認できない」状態だ。テキストページで書いた仕様書から始めるのが安全な出発点となる。
工程2：FigmaでAIスキルにNotionページを登録する
Figmaのキャンバス上でAIパネルを開き、「スキル」のセクションからNotionを選択してページURLを貼り付けるのが、公式デモで示されている手順だ。
このとき重要なのがアクセス権限の設定。FigmaのAIエージェントがNotionページを読めるようにするには、対象のNotionページが「リンクを知っている人が閲覧できる」状態になっているか、Figmaが認証済みNotionアカウントとして接続されている必要がある（公式発表内容より）。
チームで使う場合、Notionのゲスト招待設定やワークスペースの公開設定によって読み取り可否が変わる可能性がある。初回設定時に権限エラーが出た場合、まずNotionページの共有設定を確認するのが先決だ。
スキル登録の大まかな流れ（公式発表ベース）：
- Figmaキャンバスを開き、AIパネルに移動する
- 「スキルを追加」からNotionを選択する
- 対象のNotionページのURLを入力する
- Notionのアクセス認証を済ませる（初回のみ）
- スキルの登録を確定する
工程3：AIエージェントに指示を出してPRDを渡す
スキルが登録された状態でAIエージェントに指示を出すと、エージェントは自動的に登録されたNotionページを参照した上で作業を開始する。指示文の書き方は日本語でも英語でも動作するとされているが（公式デモより）、現時点では英語指示の方が精度が安定している可能性が高いため、重要な指示は英語でも試してみることを推奨する。
指示の書き方例：
「NotionページのPRDを読んで、セクション"コンポーネント定義"に書いてある
プライマリボタンをFigmaに作成して。5状態（default/hover/pressed/disabled/error）
すべて含めて。」エージェントがNotionを読んだ後にキャンバス上で作業を開始するまでに、数秒〜十数秒の処理時間がかかる（公式デモ映像より）。
工程4：エージェントが生成・変更できる出力の種類
公式発表の内容から、現時点でエージェントが実行できる主な操作は以下のとおりだと案内されている：
| 操作の種類 | 具体的な内容 |
|---|---|
| コンポーネントの新規生成 | 仕様書の記述に基づいてFigmaコンポーネントを作成する |
| バリアント（状態）の追加 | デフォルト・ホバーなどの状態バリアントを自動で構成する |
| スタイルの適用 | 既存のFigmaスタイル・バリアブルを参照してコンポーネントに適用する |
| レイアウトの調整 | Auto Layoutを使った余白・整列の設定 |
一方で、複雑なインタラクション定義やプロトタイプのフロー生成は、現時点の公式デモでは明示されていない。生成後の細かな見た目の調整は手動で行う前提で使うのが現実的だ。
工程5：生成物を確認して手動で仕上げる
エージェントが生成したコンポーネントは、通常のFigmaコンポーネントとして扱えるため、そのまま手動で編集できる。推奨の確認ポイントは以下のとおり：
- 仕様との差分チェック：Notionの仕様書と生成結果を見比べ、取りこぼしがないか確認する
- ネーミングの統一：自動生成のコンポーネント名がチームの命名規則に合っているか調整する
- デザイントークンの確認：バリアブルの参照が正しく設定されているか確認する
エンジニア向けCLI連携との違い——1段落でスッキリ整理
既存の技術ブログ（Zennなど）で紹介されている「Cursor/Claude Code経由でNotionのPRD URLを渡してFigmaを操作する」手法は、CLIとAPIキーを使うエンジニア向けの連携方法だ。コードが書けるエンジニアがターミナル操作でFigma APIを叩く前提のため、デザイナーやPMが単独で動かすには敷居が高い。今回紹介しているFigmaのAIスキルを使う方法は、FigmaのGUI内だけで完結するGUI操作ベースの手順であり、コマンドラインの知識がなくても動かせる点が決定的に異なる。「自分でコードを書けるかどうか」が使い分けの基準と考えるとわかりやすい。
できないこと・現時点の制限
正直なところ、FigmaのAIスキル（Notion連携を含む）は2026年6月現在、早期アクセスの申込み段階（公式発表では7月申込み開始予定）にある。公式発表とデモ映像をもとにした情報であるため、以下のとおり「公式で確認できた範囲」と「現時点では不明な点」を分けて示す。
公式発表で確認できていること：
- Notion・GitHub・Excelとのスキル接続機能が発表されたこと
- FigmaのGUI内でスキルを登録・使用する設計であること
- Config 2026（2026年6月23〜25日）で公式にアナウンスされたこと（出典：Figma公式ブログ）
現時点では確認できていないこと・詰まりやすい点：
- 日本語のNotionページに対する読み取り精度（英語ページとの差異）
- Notionのデータベース型ページに対応しているかどうかの詳細
- Figmaの対応プラン（どのプランからスキルが使えるか）
- 早期アクセス申込み後の実際の待機時間
最新情報は Figma公式ブログ（Config 2026 Recap） と Figma Communityのスキルページ を定期的に確認するのが確実だ。
このワークフローが「向くチーム」と「向かないチーム」
向くケース：
- デザイナー1〜3人の小チームで仕様書からすばやくプロトタイプを作りたい
- Notionで製品仕様をすでに管理しており、FigmaとNotionを行き来する手間を減らしたい
- エンジニアへの依頼なしでデザインの初稿を作りたい場面がある
向かないケース：
- Figmaのファイル構成が複雑で、既存のコンポーネントライブラリへの「差し替え」が発生するプロジェクト（生成物との競合リスクがある）
- Notionではなく独自のドキュメント管理ツールを使っているチーム
- インタラクションやアニメーション定義まで自動化したい場合（現時点では非対応と考えるのが妥当）
まとめ：まず今できる次の一手
FigmaのAIスキルとNotionの連携は、「仕様書とデザインファイルの分断を解消する」という実務上のニーズに正面から答える機能だ。デザイナーやPMがコードを書かずにこの連携を使えるようになる点は、既存のCLI連携記事には書かれていない視点であり、そこが最大の差別化ポイントになる。
ただし2026年6月現在は早期アクセス前であり、一般公開はまだ先だ。今すぐできる「次の一手」は以下のとおり：
- Figmaの早期アクセス申込みをウォッチする（7月申込み開始予定）：Figma公式ブログ
- Notionの仕様書を「AI読み取り向け」に整理しておく：コンポーネント名・状態・トークン名を明示する書き方に今から慣れておくと、早期アクセス開始後にすぐ動かせる
- FigmaのコミュニティスキルページをCheck：figma.com/community/skills に最新の対応スキル一覧が掲載される予定