「Figma AIの使い方」を調べている。
ということは、おそらくもう触ってはいるはずです。
First Draftでページを生成してみた。
それっぽいUIが出てきた。
でも、そこから先がわからない。
「で、これどうするの？」という状態ではないでしょうか。
操作手順はFigma公式のヘルプを見ればわかります。
ボタンの場所、プロンプトの入れ方、生成のやり方。
そこは他の記事でもう十分にカバーされています。
この記事で書くのは、その先です。
どの場面でAIを使い、どの場面で手動に戻すか。
17年デザインを実装してきた経験から見えた、操作マニュアルには載っていない判断基準の話です。
Figma AIでできること — 基本機能を30秒で把握する
まず現時点の機能を整理します。すでに知っている方は読み飛ばしてください。
First Draft（UIを一発生成）
テキストプロンプトからUIを丸ごと生成する機能です。
「ECサイトの商品一覧ページ」と入力すれば、ヘッダー、商品カード、フッターまで出てきます。
出てくるのは1プロンプトにつき1画面。
再利用可能なコンポーネントは作られません。
叩き台です。あくまで叩き台。
Make Design（要素からUIを組み立てる）
既存のフレームやテキストを選択して「デザインにして」と指示する機能です。
ワイヤーフレームに色とスタイルを付けるイメージに近い。
First Draftが「ゼロから」なら、Make Designは「ラフから」です。
その他のAI機能
- Rename Layers: レイヤー名を自動で整理。「Frame 437」が「Hero Section」になる
- Search Assets: 自然言語でデザインアセットを検索
- Auto-connect Prototypes: プロトタイプの画面遷移を自動接続
地味ですが、Rename Layersは実用度が高い。
100レイヤー超えのファイルで手作業でリネームすると30分はかかります。
これが数秒。
操作マニュアルが教えてくれないこと
ここからが本題です。
「figma ai 使い方」で検索上位に出てくる記事を10本ほど読みました。
ほぼ全部、操作手順の解説です。
First Draftの使い方、Make Designの使い方、プロンプトの書き方。
それ自体は正確な情報です。
でも、読み終わったあとに残る疑問がある。
「で、自分の制作にどう組み込めばいいの？」
操作ができることと、使いこなせることは別物です。
バイブコーディングの限界を痛感した体験でも書きましたが、AIツールは「使える」と「使いこなせる」の間に深い溝がある。
Figma AIも同じです。First Draftでページを生成できる。
でも生成されたUIのどこが良くてどこがダメなのか、判断できなければ次のアクションが決まりません。
プロンプトを変えて再生成するのか、手動で余白を調整するのか、そもそもAIを使うべき場面だったのか。
この「判断」の部分が、操作マニュアルにはない。
正直に言います。自分もFigma AIを最初に触ったとき、同じ壁にぶつかりました。
First Draftで出てきたランディングページ。
レイアウトは崩れていない。
色もそこそこ。でも、まじで「何がどう違うのか」を言葉にできなかった。
3時間かけてプロンプトを書き直し続けた夜があります。
結果はほぼ変わりませんでした。変えるべきだったのはプロンプトではなく、自分の「見方」でした。
生成→チェック→手動修正 — 実体験ベースのワークフロー
あの夜の失敗から試行錯誤して、今はこの3ステップに落ち着いています。
Step 1: Figma AIで叩き台を生成する
First Draftにプロンプトを入れます。
最初のプロンプトに凝る必要はありません。
「SaaSのランディングページ、ヒーロー+機能紹介+CTA」程度で十分です。
ポイントは期待値を下げること。
「完成品が出てくる」と思うから落胆する。
出てくるのは叩き台です。白紙のキャンバスから始めなくて済む、それだけで価値があります。
生成には30秒ほどかかります。待ちましょう。
Step 2: 5軸チェックで問題点を言語化する
ここが最も重要なステップです。生成されたUIを、以下の5つの軸でチェックします。
- 余白: 要素間の間隔に意図があるか。詰まりすぎ/均一すぎはないか
- 階層: 最初に目が行く場所は設計通りか。CTAが埋もれていないか
- タイポグラフィ: 見出しと本文のサイズ差は十分か。フォントは3種類以内か
- コントラスト: テキストは背景に対して読みやすいか
- 配色: 色の使い方にルールがあるか。アクセントカラーは絞られているか
全部を一度にチェックする必要はありません。
最初は「余白」だけ見てください。
Figma AIが生成するUIは、余白が均一になりがちです。
セクション間の余白もカード間の余白も同じ。
結果として「のっぺりした」印象になる。
関連する要素をグルーピングする「近接」の原則が効いていません。
自分の場合、生成されたLPのヒーローセクションとFeatureセクションの間の余白が24pxしかなかった。
手動で64pxに広げただけで、視覚的な「区切り」が生まれて一気にプロっぽくなりました。
Step 3: 問題点だけ手動で修正する
5軸チェックで見つけた問題だけを直します。
全部を作り直す必要はない。
「余白が足りない」→ セクション間の余白を広げる
「CTAが埋もれている」→ ボタン周囲の余白を増やし、色のコントラストを上げる
「フォントサイズの差が小さい」→ H1を48px、本文を16pxにして差をつける
修正箇所が3つ以内なら、5分もかかりません。
生成30秒、チェック2分、修正5分。合計8分。
白紙から組んだら最低30分はかかる作業です。
Claude Code × Pencilで実際にAIデザインを試した記録でも書きましたが、AIデザインの価値は「完成品を出す」ことではなく「白紙の時間を消す」ことにあります。
叩き台があるから、判断と修正に集中できる。
場面別の判断フレームワーク — AIに任せる/手動でやる
「結局、どの場面でFigma AIを使えばいいの？」
この問いに対する僕の答えを、フレームワークとして整理します。
AIに任せていい場面
- ラフの初期案出し: 方向性を探る段階。3パターンほど生成して比較する
- 既存デザインのバリエーション: 配色違い、レイアウト違いの検討
- プレゼン用の叩き台: クライアントに方向性を見せるための素材
- レイヤー名の整理: Rename Layersは積極的に使うべき
共通点があります。
「精度より速度が優先される場面」です。
正解を出す必要がない。
方向性を探るフェーズ。
ここでFigma AIは圧倒的に速い。
手動に戻すべき場面
- ピクセル単位の余白調整: AIは4px/8pxグリッドを意識しません
- ブランドカラーの適用: AIはブランドガイドラインを知らない
- タイポグラフィの微調整: 行間、字間、見出し階層の設計
- コンポーネント設計: 再利用可能な部品の設計はAIにはまだ無理
- アクセシビリティ対応: コントラスト比の担保、Alt属性の設定
共通点はこちら。「ルールに基づく精度が求められる場面」です。
ブランドガイドライン、アクセシビリティ基準、デザインシステムの制約。
こういう「守るべきルール」がある場面では、手動のほうが確実です。
コンポーネント設計についてはFigmaコンポーネント設計の実践ガイドに詳しく書いています。
AI生成物をコンポーネントに整理する工程は、現時点では人間の仕事です。
判断に迷ったときの問い
それでも迷う場面はあります。そのときは、1つだけ自問してください。
「この作業で求められているのは、探索か、精度か？」
探索ならAI。
精度なら手動。
これだけで8割は判断できます。
AI時代のデザイナー生存戦略でも触れましたが、AIと人間の役割分担はゼロイチではありません。
場面ごとに切り替える。
その切り替えの判断基準を持っているかどうかが、AIを「使える」と「使いこなせる」の分岐点です。
まとめ：使い方の先にある「使いどころ」
Figma AIの使い方を振り返ります。
機能の概要:
- First Draft: テキストからUI生成（叩き台用）
- Make Design: 既存要素にスタイルを適用
- Rename Layers / Search Assets: 整理と検索の効率化
操作マニュアルの先にあるもの:
- どの場面でAIを使い、どの場面で手動に戻すかの判断基準
- 生成→5軸チェック→手動修正のワークフロー
- 「探索か、精度か」というシンプルな判断軸
Figma AIは道具です。道具の操作方法を覚えるのは入口にすぎません。
どの場面でどの道具を選ぶか。
その判断ができるようになったとき、Figma AIは本当の意味で「使える」ようになります。
Figma AIを使ってみて「なんか違う」と感じたら、Figma AIが「使えない」と感じたときの本当の原因も読んでみてください。
ツールの問題ではなく、判断基準の問題かもしれません。
Figma AI以外のツール（Pencil、v0、Midjourney等）との使い分けについては、Figma AI以外のAIデザインツールとの使い分けで比較しています。
5つの判断軸を体系的に深掘りしたい方のために、「Vibe Codingの落とし穴 — AI生成サイトをプロ品質に仕上げる5つの判断基準」というUdemy講座を準備中です。
5軸それぞれの実践テクニックとBefore/Afterの改善例を、動画で詳しく解説する予定です。
参考になれば幸いです。
このシリーズの他の記事
「AIデザインの隙間を埋める」シリーズでは、AIデザインの判断基準を8つの切り口で解説しています。
