Figma AIは、あなたが与える指示の質によってその性能が決まります。曖昧なプロンプトでは汎用的なレイアウトしか生成されず、一から作り直すことになります。具体的なプロンプト — 画面タイプ、セクション、コンポーネント、フレームサイズ、スペーシングを含む — を使用すれば、一度で70〜85%の本番レベルの出力を得ることができます。この15のテンプレートは、Figmaの2026年AIスタック向けに構造化されています：Design Agent、Figma Make、Skills、そして無料機能（オートレイアウト、レイヤー名変更、コンテンツ置換）でクレジットを消費しません。
任意のテンプレートをコピーし、角括弧内のプレースホルダーをあなたの製品に置き換え、より厳密な制約が必要であれば無料のPrompt Optimizerを通して実行してください。エージェント指示を作成する際にChatGPT、Claude、Gemini内でワンクリック最適化を行うには、TresPromptがICCSSE形式の構造をサイドバーに追加します。
重要なポイント
効果的なFigma AIプロンプトは4つのことを明記します：構築する画面、使用する公開済みコンポーネント、フレームサイズ、スペーシングルール。否定的制約（「名前のないフレームを使用しない」「lorem ipsumは使わない」）を追加すると、エージェントは推測を止めます。Skillsはこれらのパターンを記録するため、毎回入力し直す必要がありません。
Design Agentテンプレート（キャンバス上の画面）
1
モバイル設定ページ
モバイル設定ページ（390×844）を作成してください：
1. アカウント — アバター、名前、メール、編集ボタン
2. 通知 — メール、プッシュ、SMSのトグル
3. 外観 — ダークモードトグル、フォントサイズセレクタ
4. セキュリティ — パスワード変更、2FAトグル
5. フッター — 破壊的ログアウトボタン、アプリバージョンテキスト
公開済みコンポーネントのみを使用してください。オートレイアウト：16pxアイテム間隔、セクション間32px。グループラベルにはSection Headerコンポーネントを使用。
2
ダッシュボード概要（デスクトップ）
デスクトップ分析ダッシュボード（1440×900）を作成してください：
- トップナビ：ロゴ、検索、ユーザーメニュー
- 左サイドバー：5つのナビアイテム、「概要」にアクティブ状態
- メイン：4つのKPIカードを一列に、下に線グラフ、最近のアクティビティテーブル（5行）
カラーとスペーシングにはデザインシステム変数を使用してください。KPIにはCardコンポーネント。アクティビティにはTableコンポーネント。「Series 1」のようなプレースホルダーチャートデータラベルは使用しないでください。
3
オンボーディングフロー（3フレーム）
3つのモバイルオンボーディング画面（390×844）を左から右に作成してください：
1. ウェルカム — 見出し、サブコピー、プライマリCTA「開始する」
2. 権限 — 通知+位置情報のトグル付きリスト
3. 成功 — チェックマークイラスト領域、「設定完了」CTA
Primary ButtonとSecondary Buttonコンポーネントを使用してください。1/3、2/3、3/3を示すプログレスインジケーター。すべてのフレームで一貫した24px水平パディング。
4
空状態 + エラー状態
2つのモバイルフレーム（390×844）を作成してください：
フレームA — 検索結果なし：アイコン領域、見出し「結果なし」、本文コピー、セカンダリ「フィルタークリア」ボタン
フレームB — エラー：警告アイコン、「問題が発生しました」、プライマリ「再試行」、ターシャリ「サポートに連絡」
利用可能であればEmpty StateとAlertコンポーネントを使用してください。中央揃えコンテンツ、テキストブロック最大幅280px。
5
アクセシブル設定（エージェント + a11y）
アクセシビリティ要件付きのモバイル設定ページ（390×844）を作成してください：
- インタラクティブ要素は最小44×44pxタッチターゲット
- テキストコントラスト最小4.5:1（デザインシステムテキストカラーを使用）
- 見出し階層H1 → H2、レベルスキップなし
- トグルには可視テキストラベル（アイコンのみではない）
- エラー状態は色とテキストを使用（色のみではない）
公開済みコンポーネントを使用してください。オートレイアウト16px / 32pxスペーシング。
📬 これが役立っていますか？
週に1つの実用的なAIインサイト。購読時に無料プロンプトパックも提供。
無料購読 →
Figma Makeテンプレート（プロトタイプ / コード）
6
マーケティングランディング（Make）
このFigmaフレームから単一ページマーケティングサイトを構築してください：
- ヒーロー：見出し、サブヘッド、メール取得 + CTA
- アイコン付き3つの機能列
- ソーシャルプルーフロゴ行
- リンク付きフッター
選択されたフレームのスペーシングと色に合わせてください。モバイルレスポンシブ。フレームノートで指定されない限り外部ライブラリは使用しないでください。
7
インタラクティブプロトタイプ（Make）
フレーム[フレーム名をリスト]からクリック可能なプロトタイプを作成してください：
- 「サインアップ」をクリックすると登録フォームフレームに移動
- 送信で成功トースト状態を表示
- 「戻る」で前の画面に戻る
ファイルのコンポーネントを使用してください。プライマリボタンのホバー状態を保持。デザインファイルにない新しい画面は追加しないでください。
Skillsテンプレート（再利用可能エージェント指示）
これらをSkills markdownファイルとして保存すると、エージェントが毎回チーム規約に従います。
8
Skill: /settings-page
設定画面を作成する際：
- 常にSection Header + グループリストパターンを使用
- アプリバージョン（キャプションスタイル）と破壊的ログアウト付きフッターを含める
- ユーザーがデスクトップを指定しない限りモバイルデフォルト390×844
- ブール設定にはToggleコンポーネントを使用、カスタムチェックボックスは使用しない
- スペーシング：グループ内16px、グループ間32px、画面パディング24px
9
Skill: /data-table
テーブルを作成する際：
- Table/HeaderとTable/Rowコンポーネントを使用
- ユーザーが要求した場合のみソートアイコン列を含める
- タッチ用に行の高さ最小48px
- 長いテキストは省略記号で省略、セル内で2行以上の折り返しは行わない
- 行数がゼロの場合はテーブル下に空状態
無料機能（ゼロクレジット）
10
コンテンツ置換（一括）
選択されたフレーム内のすべてのlorem ipsumを現実的な[B2B SaaS / eコマース / ヘルスケア]コピーに置き換えてください。名前：多様で信頼できるもの。住所：US形式。製品名：架空だが専門的。レイアウトが崩れないよう文字数をプレースホルダーと同程度に保ってください。
11
レイヤー名変更（ハンドオフ準備）
このページのすべてのレイヤーをパターン[Section]/[Component]/[State]を使用して名前変更してください
例：Settings/NotificationRow/Default
ロックされた背景フレームは名前変更しないでください。非表示レイヤーはスキップしてください。
MCP + コードハンドオフプロンプト（Claude Code / Cursor）
12
FigmaフレームからReact
MCP経由で選択されたFigmaフレームを読み取ってください。[Tailwind / 弊社のShadcnライブラリ]を使用してReactコンポーネントを生成してください：
- ファイル内のデザイントークンからスペーシングと色に合わせる
- セマンティックHTML（nav、main、section）を使用
- 768pxと1024pxでレスポンシブブレークポイントを含める
- ユーザーデータ用の型付きpropsでSettingsPage.tsxとしてエクスポート
16進値をハードコードしないでください — Figma変数からトークン名を使用してください。
探索 & 比較テンプレート
13
3つのレイアウト方向
デスクトップ1440×900で[画面タイプ]の3つの異なるレイアウトアプローチを生成してください：
A — サイドバーナビゲーション
B — トップタブナビゲーション
C — カードベースハブ
3つすべてで同じコンテンツ。公開済みコンポーネントを使用。フレームを80pxの間隔で横に並べて配置。各フレームに小さなキャプションテキストで「Direction A/B/C」とラベル付け。
14
デザインシステム監査プロンプト
選択されたページを確認して以下をリストアップしてください：
- 公開ライブラリにないコンポーネント（「分離」としてフラグ）
- 変数を使用していない色
- テキストスタイルを使用していないテキスト
- 4/8/16/24/32でないオートレイアウトギャップ
フレームノートにチェックリストとして出力してください。自動修正はしないでください — 報告のみ。
15
調整パス（2回目のプロンプト）
生成されたフレームに対して、これらの修正のみを適用してください：
1. セクション間の垂直スペーシングを32pxに増加
2. プライマリボタンをButton/Primary/Largeバリアントに変更
3. メールフィールド下にヘルパーテキストを追加：「メールアドレスは決して共有しません」
4. リスト行のすべてのアイコンを24×24に整列
レイアウトを再構築しないでください。新しいセクションは追加しないでください。
テンプレートの連携方法
本番ワークフロー：テンプレート13（探索）→ 方向選択 → テンプレート1または2（フル画面）→ テンプレート15（調整）→ テンプレート11（名前変更）→ テンプレート12（MCPからコード）。各ステップでは、エージェントを混乱させる巨大な指示ではなく、焦点を絞ったプロンプトを使用します。
完全なFigma AIエコシステム（Agent、Make、MCP、Skills、Sites）については、完全な2026年ガイドをご覧ください。ステップバイステップのエージェント設定については、Design Agentの使用方法をご覧ください。クレジット予算については、Figma AIクレジット解説をご覧ください。
よくある質問
これらは無料のFigmaプランで動作しますか？
テンプレート10-11（コンテンツ置換、名前変更）は無料プランで動作します。Design AgentとMakeには有料プランとベータアクセスが必要です。MCPはあなたの席でDev Mode / MCPを有効にできる任意のプランで動作します。
テンプレート全体を貼り付けるべきか、短縮すべきですか？
完全なテンプレートから始めてください。エージェントが無視する行が分かったら短縮してください。短いプロンプトは、あなたのデザインシステムが実際に必要とする制約を知った後でのみ機能します。
MakeとDesign Agentで同じプロンプトを使用できますか？
いいえ — Makeはビルド/プロトタイプ言語を期待し、クレジットの消費方法が異なります。キャンバスレイヤーにはDesign Agentテンプレート、インタラクティブ出力にはMakeテンプレートを使用してください。混在させると混乱した結果が生じます。
プロンプトをSkillsとして保存するにはどうすればよいですか？
テンプレート8-9をチームのSkillsライブラリのSkill markdownファイルにコピーしてください。エージェントパネルで/skill-nameで呼び出します。コンポーネント名が変更されたらSkillsを更新してください — Skillsガイドをご覧ください。
開示：この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示方針をご覧ください。