Figma Make を使いこなす実践テクニック

Figma が提供する AI デザイン機能「Figma Make」を実務で活用するための実践的なコツをまとめる。1000 回以上のプロンプト作成を通じて見つかった知見や、効率的なワークフローを紹介する。

Figma Make とは

Figma Make は、Figma に統合された AI 搭載のデザイン生成ツール。テキストプロンプトからUIデザインを自動生成でき、AutoLayout 付きの構造化されたデザインを高速に作成できる。

実践テクニック

1. Context 設計を明確にする

AI に指示を出す前に、以下を明確にしておくことが重要:

• ユーザーペルソナ: 対象ユーザーの年齢層、IT リテラシーなど
• 実行アクション: 何をデザインするのか具体的に
• 制約条件: ブランドカラー、フォント指定、アニメーション仕様など

例: 「40代のITリテラシーが低いユーザー向けの、
シンプルで直感的なダッシュボード画面を作成してください。
フォントはNoto Sans JP、メインカラーは#2563EB」

2. 「大枠 → ピンポイント」の2段階アプローチ

一度に完璧を目指すのではなく、2段階で進める:

第1段階（大枠）: 初期プロンプトで全体構造を作る

• 対象画面の詳細説明
• 必要な機能リスト
• デザインテイスト（既知のサービス名で参照すると有効）

第2段階（ピンポイント）: ファイル名やクラス名を指定して細部を修正

3. デザインシステムを活用する

既存のテンプレートやサンプルをインポートして効率化する:

• 既存のデザインをキャンバスに置いて「これっぽく作って」と指示
• Guidelines.md にデザインシステムとコーディングルールを記載
• 「〇〇画面の△△表と同様の UI で」と既存 UI を参照指示

4. Figma Design との往復ワークフロー

Figma Make 単体で完結させるのではなく、通常の Figma Design と組み合わせる:

1. Figma Make でデザインを生成
2. コピーして Figma Design にペースト
3. Design で手動修正して期待通りに調整
4. 修正版を再度 Figma Make に取り込んで再実行

このサイクルを回すことで、レイヤー構造が整理され、より高品質なコード生成が実現する。

5. ファイル構造の事前設計と分割

大規模なデザインでは、ファイルが肥大化してタイムエラーや動作遅延が発生する:

• ページ、項目、ダイアログごとにファイルを手動分割
• 内容が多くなる見込みがあれば事前に分割を指示
• Auto Fix 機能を活用して内容を維持しながら調整

例: 「〇〇ファイルのコードが多いため、
内容を変えずに分割してください」

6. AI 命名機能（rename_layer）の活用

レイヤー名を AI で自動生成する rename_layer 機能を使うことで、構造が明確になり、後の修正指示も通りやすくなる。

7. モデルの使い分け

• 軽量モデル: 素早い壁打ちやラフなプロトタイプに
• Claude Opus: 高品質で精密なデザイン生成に
• Gemini 3 Pro: 2025年11月に導入された新しい選択肢

Figma Make の強みと課題

強み

• AutoLayout 付きの構造化デザインを高速に生成
• 複雑なアニメーション表現が可能
• 試行錯誤のコストが低い（プロンプト修正で即再生成）

課題と対策

まとめ

Figma Make は「ざっくりとした UI を、構造化された状態で高速に作る」ことに強みがある。完璧なデザインを一発で生成するツールではなく、反復的なワークフロー（生成 → 手動修正 → 再取り込み）の中で活用することが成功の鍵となる。

プロンプト設計では、Context の明確化と「大枠 → ピンポイント」の2段階アプローチが特に有効。デザインシステムや Guidelines.md の整備も、プロジェクト全体の品質と一貫性を保つうえで重要なポイントとなる。