Figma AI完全ガイド｜使い方からUI自動生成、デザインワークフロー効率化まで徹底解説

Figma AIは、デザインツールFigmaに統合されたAI機能群です。テキストからのUI生成やレイヤー整理の自動化により、初稿づくりにかかる時間を大きく削減できます。

本記事では、主要5機能の使い方と業種別プロンプト例、料金プラン、他ツールとの比較までを解説します。無料プランで試せる機能から紹介するので、今日から使い始められます。

Figma AIとは？ - デザインワークフローを変革するAI

Figmaとは

Figmaは、クラウドベースのデザインツールです。UI/UXデザイン、プロトタイピング、デザインシステム構築まで、デジタルプロダクトデザインを一通りカバーします。

主な特徴:

ブラウザで動作（インストール不要）
複数人でのリアルタイム共同編集
デスクトップアプリも利用可能
無料プランあり

Figma AIの概要

Figma AIは、2023年から段階的に提供が始まったFigmaのAI機能群です。UIの初稿生成やレイヤー整理など、時間のかかる作業を自動化します。

Figma AIでできること:

テキストからUIデザインを生成（Make Designs）
デザイン用の画像を生成・編集
レイヤー名の自動リネーム
ダミーテキスト・データの自動生成
プロトタイプの自動作成

従来のデザインプロセスとの違い

最大の違いは、ゼロから形にする工程をAIに任せられる点です。作業時間の目安を比較すると次のようになります。

工程	従来	Figma AI活用
要件確認	30分	30分
参考探し・ワイヤーフレーム	3時間	AIでベース生成 10分
UIデザイン作成	4時間	カスタマイズ・調整 2時間
バリエーション作成	2時間	AI生成 10分
レイヤー整理	30分	AI整理 5分
合計	約10時間	約3時間

短縮できた時間は、アイデアの検証や細部の作り込みに回せます。試せる案の数が増えることが、時間短縮以上のメリットです。

Figma AIの料金プラン

プラン別の機能

AI機能をフルに使うには、Professional以上のプランが必要です。

プラン	月額	AI機能
Starter（無料）	¥0	一部のAI機能
Professional	$15/エディター	フルAI機能
Organization	$45/エディター	フルAI機能 + 管理機能
Enterprise	要問合せ	カスタムAI + セキュリティ

無料プランでできること

無料のStarterプランでも、次のAI機能を試せます。

レイヤー名の自動リネーム
一部のコンテンツ生成
Make Designs（回数制限あり）

まず無料枠で使用感を確かめ、回数制限が足りなくなったら有料化を検討する流れで十分です。

Professionalプランのおすすめポイント

業務で日常的に使うなら、Professionalプラン（$15/月）が現実的な選択肢です。AI機能を無制限に使え、チームでの共同編集にも対応します。

含まれる機能:

すべてのAI機能が無制限
チームでのコラボレーション
バージョン履歴（30日間）
共有リンク

主要機能1: Make Designs（UIデザイン自動生成）

Make Designsとは

Make Designsは、テキストの説明からUIデザインを生成する機能です。Figma AIの中核機能で、デザインの初稿づくりを数分に短縮します。

例えば「ログイン画面、メールとパスワード入力、青を基調としたモダンなデザイン」と入力すると、条件に合うログイン画面のUI案が生成されます。

使い方（ステップバイステップ）

ステップ1: Make Designsを起動

Figmaでファイルを開く
キャンバス上で右クリック
「AI」→「Make Designs」を選択

ショートカットの場合は、Command/Ctrl + Kで検索を開き、「Make Designs」と入力して選択します。

ステップ2: プロンプトを入力

作りたいUIを説明するテキストを入力します。

良いプロンプトの例:
「ECサイトの商品詳細ページ、大きな商品画像、
価格と購入ボタン、レビュー星評価、
白背景にオレンジのアクセントカラー」

ステップ3: 生成を待つ

数秒〜十数秒で、複数のデザインバリエーションが生成されます。

ステップ4: 選択・カスタマイズ

気に入ったデザインを選択
必要に応じて手動で調整
コンポーネント化して再利用

プロンプトの書き方（コツと例）

プロンプトは「画面の種類・主要な要素・スタイル・カラー」の4点を押さえると精度が上がります。

基本構成:

[画面の種類] + [主要な要素] + [スタイル/トーン] + [カラー]

業種別プロンプト例:

ECサイト:

商品一覧ページ、カード型レイアウト、
商品画像・名前・価格・お気に入りボタン、
4列グリッド、ミニマルデザイン、
白背景にブラックのテキスト

SaaSダッシュボード:

管理画面ダッシュボード、
左サイドバーナビゲーション、
KPIカード4つ、折れ線グラフ、データテーブル、
ダークテーマ、紫のアクセントカラー

モバイルアプリ:

フードデリバリーアプリのホーム画面、
検索バー、カテゴリスクロール、
おすすめ店舗カード、下部タブナビゲーション、
明るくフレンドリーな雰囲気、赤とオレンジ

SNS/コミュニティ:

SNSアプリのプロフィール画面、
丸いアバター、フォロワー数、投稿グリッド、
編集ボタン、タブ切り替え、
クリーンでモダン、ブルー系

避けるべきプロンプト

抽象的な指示は避け、要素と色を具体的に書きます。

❌ 悪い例:
- 「かっこいいデザイン」（抽象的すぎる）
- 「いい感じのUI」（具体性がない）
- 「モダンな画面」（要素の指定がない）

✅ 良い例:
- 具体的な画面の種類を指定
- 必要な要素をリストアップ
- 色やスタイルを明確に

Make Designsの活用シーン

1. アイデア出し・ブレスト

同じ要件で10パターン生成し、チームで議論して方向性を決めます。手描きラフを持ち寄るより短時間で選択肢を並べられます。

2. クライアント提案

要件をプロンプト化して複数バリエーションを生成し、クライアントに選択肢として提示します。具体案を前に議論できるため、フィードバックの精度が上がります。

3. プロトタイプの高速作成

主要画面をAIで生成し、画面遷移を設定すればクリッカブルプロトタイプが完成します。ユーザーテストまでの準備期間を短縮できます。

主要機能2: 画像生成

Figma内での画像生成

Figma AIでは、デザインに使う画像をFigma内で直接生成できます。外部の画像生成ツールを往復する手間がありません。

使い方:

画像を配置したいフレームを選択
右クリック→「AI」→「Generate Image」
生成したい画像を説明
生成された画像から選択

プロンプト例:

「オフィスで働く若い日本人ビジネスパーソン、
ノートPCを使っている、明るい自然光、
プロフェッショナルな雰囲気」

画像生成の活用シーン

1. モックアップ用のダミー画像

実画像が用意できない段階で、それらしい画像を生成してモックアップを完成させます。

2. ヒーロー画像・背景

Webサイトのヒーローセクションやバナーの背景画像を生成します。

3. アイコン・イラスト

シンプルなアイコンやイラストを生成し、デザインに組み込みます。

注意点

生成画像の利用条件はFigmaの規約に従う
人物の顔が入る画像は精度にばらつきがある
商用利用前に品質と権利関係の確認が必要

主要機能3: Auto Rename Layers（レイヤー自動リネーム）

なぜレイヤー名が重要か

レイヤー名の整理は、チーム作業と開発引き継ぎの効率を左右します。作業中は「Frame 123」「Group 456」のような自動名が溜まりがちですが、放置すると次の問題が起きます。

チームコラボレーション: 他のデザイナーがファイルを理解できない
開発者への引き継ぎ: エンジニアがコンポーネントを特定できない
保守性: 後から編集する際に目的のレイヤーを探せない

Auto Rename Layersの使い方

ステップ1: レイヤーを選択

リネームしたいレイヤー（複数可）を選択します。

ステップ2: AIリネームを実行

右クリック→「AI」→「Rename Layers」
または、メニュー「Plugins」→「Rename Layers」

ステップ3: 確認・適用

AIが提案した名前を確認し、問題なければ適用します。

リネームの例

変更前 → 変更後

Frame 1234 → Login Button
Group 56 → Header Navigation
Rectangle 789 → Search Input Field
Ellipse 12 → User Avatar

活用のコツ

実行タイミングを決めておくと運用が安定します。おすすめは次の2つです。

1. 作業の最後にまとめて実行: デザイン完了後に全レイヤーを選択して一括リネームすれば、作業中の中断がありません。

2. 開発引き継ぎ前に実行: デザイン確定時に実行しておくと、開発者がコンポーネント名を把握しやすくなります。

主要機能4: Content Generation（コンテンツ生成）

コンテンツ生成とは

デザインに必要なダミーテキストやデータを、AIが自動生成する機能です。「山田太郎」を何十回もコピーする作業から解放されます。

生成できるもの:

ユーザー名
メールアドレス
住所
電話番号
日付
商品名・説明
レビューテキスト

使い方

テキストレイヤーでの使用:

テキストレイヤーを選択
右クリック→「AI」→「Generate Content」
生成したいコンテンツの種類を選択

リピートグリッドと組み合わせれば、大量のダミーデータを一括生成できます。

活用例

ユーザーリスト:

田中太郎 → 鈴木花子 → 佐藤健一 → ...
tanaka@example.com → suzuki@example.com → ...

商品リスト:

商品名: オーガニックコットンTシャツ
価格: ¥3,980
レビュー: 「肌触りが良く、着心地抜群です」

SNS投稿:

ユーザー名: @design_lover
投稿: 「今日は新しいプロジェクトに着手。楽しみ！」
いいね: 234
コメント: 18

主要機能5: Auto Layout Suggestions

Auto Layoutとは

Auto Layoutは、要素を自動で整列・配置するFigmaの機能です。レスポンシブデザインの基盤になりますが、手動設定には手間がかかります。

AIによるAuto Layout提案

Figma AIは既存のデザインを分析し、Auto Layoutの適用を提案します。フレームを選択すると、AIがパディングやギャップの設定案を出すので、そのまま適用するかカスタマイズします。

手動設定の手間が減り、レスポンシブ対応の初期設定が速くなります。

実践的な活用フロー

フロー1: 新規プロジェクトのキックオフ

3日間でプロトタイプまで到達するフローの例です。

Day 1: 要件整理とアイデア出し

要件をテキストで整理し、Make Designsで10パターン生成します。チームでレビューし、方向性を3パターンに絞ります。

Day 2: デザイン詳細化

選んだ方向性をベースに詳細デザインを作り、コンポーネント化します。Auto Rename Layersで整理し、Content Generationでダミーデータを追加します。

Day 3: プロトタイプ・レビュー

画面遷移を設定してクリッカブルプロトタイプを完成させます。ステークホルダーレビューを実施し、フィードバックを反映します。

フロー2: 既存デザインの改善

現状のデザインを分析したうえで、Make Designsで改善案を生成します。良いアイデアを既存デザインに取り入れ、A/Bテスト用のバリエーションを作成します。

フロー3: デザインシステム構築

主要コンポーネントをMake Designsで生成し、統一感を確認・調整します。Auto Rename Layersで命名規則を揃え、コンポーネントライブラリ化します。

効果的なプロンプトライティング

プロンプトの基本構造

情報量の多い画面ほど、構造を意識して書くと精度が安定します。

[画面タイプ] + [主要コンテンツ] + [レイアウト] + [スタイル] + [カラー]

詳細なプロンプトテンプレート

ランディングページ:

SaaSプロダクトのランディングページ、
ヒーローセクション（キャッチコピー + CTA）、
特徴セクション（3カラム）、
料金プランセクション（3プラン比較表）、
FAQセクション（アコーディオン）、
フッター、
ミニマルでプロフェッショナル、
ネイビーと白

管理画面:

プロジェクト管理ツールのダッシュボード、
左サイドバー（ナビゲーション + ユーザー情報）、
ヘッダー（検索 + 通知 + プロフィール）、
メインエリア（KPIカード4つ、タスクリスト、カレンダー）、
モダンでクリーン、
ライトグレー背景、ブルーアクセント

モバイルアプリ:

ヘルスケアアプリのホーム画面（iPhone 14サイズ）、
上部に今日の目標達成率（円グラフ）、
アクティビティサマリー（歩数、消費カロリー、心拍数）、
週間トレンドグラフ、
下部タブナビゲーション、
フレンドリーで明るい、グリーン系

日本語 vs 英語

日本語でも動作しますが、英語の方が精度が高い場合があります。細かいニュアンスの指定は英語が有利なことが多いためです。

おすすめのアプローチ:

まず日本語で試す
結果が期待と違えば英語で試す
両方試して良い方を採用

他のAIツールとの連携

Figma + ChatGPT/Claude

テキスト系AIは、プロンプト作成とコピーライティングで役立ちます。

活用法1: プロンプトの作成

「ECサイトの商品詳細ページ用に、Figma AIへ入力する効果的なプロンプトを作って」とChatGPTに依頼し、回答をFigma AIに入力します。

活用法2: コピーライティング

Figma AIでUIを生成した後、ChatGPTでUIに入れるコピーを作成し、Figmaに配置します。

Figma + Midjourney/DALL-E/Firefly

より高品質な画像が必要な場合は、画像生成の専門ツールと併用します。MidjourneyやFireflyで生成した画像をFigmaに配置し、UIデザインに組み込む流れです。モックアップ用途ならFigma内蔵の画像生成で足りることも多いので、目的で使い分けます。

Figma + GitHub Copilot

デザインから実装への橋渡しにも使えます。Figmaで完成したデザインを開発者が参照し、GitHub Copilotの支援でコードを書けば、デザインと一致するUIを効率的に実装できます。

Figma AI vs 他のデザインAI

比較表

UI/UXデザインと開発連携ではFigma AIが優位です。画像生成が主目的なら他ツールが向いています。

項目	Figma AI	Framer AI	Canva AI	Adobe Firefly
UI/UXデザイン	◎	○	△	△
画像生成	○	○	◎	◎
プロトタイプ	◎	◎	×	×
コラボレーション	◎	○	○	△
開発連携	◎	◎	×	×
日本語	○	○	◎	○
価格	$15/月〜	$5/月〜	$12.99/月〜	¥680/月〜

使い分けの目安

Figma AI

本格的なUI/UXデザイン
チームでの協業
開発チームとの連携
デザインシステム構築

Framer AI

Webサイト制作（コードなし）
ランディングページ
ポートフォリオサイト

Canva AI

マーケティング素材
SNS画像
プレゼンテーション

Adobe Firefly

画像生成・編集
Photoshopとの連携
商用利用（著作権クリア）

よくある質問（FAQ）

Q1. Figma AIは無料で使えますか？

A. 一部の機能は無料プランでも使えます。レイヤー名の自動リネーム、一部のコンテンツ生成、回数制限付きのMake Designsが対象です。Make Designsの無制限利用など、すべてのAI機能を使うには有料プラン（$15/月〜）が必要です。

Q2. 日本語のプロンプトに対応していますか？

A. 対応しています。ただし、複雑な指示では英語の方が良い結果になることがあります。シンプルな指示は日本語で、精度が出ないときは英語で試すのが実用的です。

Q3. 生成されたデザインの著作権は？

A. Figmaの利用規約に従い、生成されたデザインはユーザーが自由に使えます。商用利用も可能です。

注意点:

既存の有名ブランドを模倣するプロンプトは避ける
人物の顔が入る画像は権利関係に注意

Q4. AIが生成したデザインはそのまま使えますか？

A. たたき台としては使えますが、本番利用にはカスタマイズが必要です。AIは0→1の作業を効率化するもので、最終的な品質担保はデザイナーが行います。生成→調整→完成という流れを前提に使うのが現実的です。

Q5. デザイナーの仕事はAIに奪われますか？

A. 定型作業は置き換わりますが、デザイナーの役割はなくなりません。AIが得意なのは、定型作業の自動化と大量のバリエーション生成です。

一方、ビジネス課題の理解、ユーザーへの共感、ブランド体験の設計、AI出力の評価・調整は人間の仕事です。AIを使いこなすデザイナーほど、こうした上流の仕事に時間を使えるようになります。

デザイン制作のご相談

Figma AIをはじめとするツールの進化で、デザイン制作の効率は上がりました。一方で「ツールは使えるが戦略的なデザインができない」「AIの生成物をどう活かせばいいかわからない」という声もあります。

EMPLAYでは、戦略設計からツール活用まで、デザイン制作を包括的にサポートしています。

EMPLAYのサービス:

HP制作サービス - ビジネス成果につながるWebサイト制作
クリエイティブ制作 - ブランディング・販促物のデザイン
Web広告運用代行 - 効果的な広告クリエイティブの制作・運用

Webデザインの依頼やリニューアルを検討中の方は、お問い合わせからご連絡ください。無料相談を承っています。

まとめ

Figma AIは、デザインの初稿づくりと単純作業を自動化するAI機能群です。導入時は次の4点を押さえてください。

主要機能: Make Designs（UI生成）、画像生成、Auto Rename Layers、Content Generationの4つが柱
プロンプト: 画面の種類・要素・スタイル・色を具体的に書く。精度が出なければ英語で試す
AIの位置づけ: 生成物はたたき台。最終品質はデザイナーが担保する
ツール連携: プロンプト作成はChatGPT/Claude、高品質画像はMidjourney/Fireflyと併用

まずは無料プランで、小さなプロジェクトからAI機能を試してみてください。

デザイン・AI活用についてさらに詳しく知りたい方へ。

AIツール完全ガイド - 主要AIツール70選
Canvaビジネス活用ガイド - マーケティングデザイン
Adobe Firefly完全ガイド - AI画像生成
Midjourney完全ガイド - 高品質画像生成

※本記事の情報は2026年1月時点のものです。Figma AIの機能は頻繁に更新されるため、最新情報は<a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer nofollow">公式サイト</a>をご確認ください。

株式会社EMPLAY 編集部

中小企業のWeb集客・DX推進を支援するEMPLAYが、現場で得た実践知をもとに執筆・監修しています。運営会社について