Contents
1. Figma AI の概要とリリース経緯
| 項目 | 内容 |
|---|---|
| 正式名称 | Figma AI（旧称：AI Assist） |
| 発表日 | 2024年3月22日（公式ブログ）【^1】 |
| 提供形態 | ベータ機能として有料プランに先行リリース → 同年11月に全プランで標準機能化 |
| 対象ユーザー | 個人、チーム、エンタープライズすべての Figma アカウント |
| 主な目的 | デザイン作業の「構想」「生成」「修正」をインターフェイス内で完結させ、生産性を 20‑30% 向上させること |
ポイント
- AI は Figma のサーバー側で実行され、ローカル環境へのインストールは不要です。
- 機能は「テキスト」「画像」「レイアウト」の 3 大カテゴリに大別され、すべてが右クリックメニューまたはツールバーから呼び出せます。
2. AI 機能の有効化手順 & 日本語環境設定
2‑1 AI 機能をオンにする方法
- Figma にログインし、右上のプロフィールアイコン → Settings（設定） を開く。
- 左メニューの “AI & Assistants” をクリック。
- “Figma AI” のトグルスイッチを ON にする。
- 表示される利用規約・データ処理方針に同意し、「有効化」 ボタンを押す。
※設定はチーム単位でも個人単位でも同じ画面で行えます。変更は即座に全メンバーに反映されます。
2‑2 日本語ローカライズの手順
Figma の UI 言語を日本語にすると、AI チャットウィンドウや生成テキストも自動的に日本語で返します。
- Settings → Language に移動。
- ドロップダウンから “Japanese (日本語)” を選択し、ページをリロード。
参考：Figma Help Center の「言語設定」ページ【^2】（2024 年 12 月更新）。
3. 主要機能と活用例
3‑1 ビジュアル検索・アセット探索
| 手順 | 操作内容 |
|---|---|
| ① | ツールバー左上の 🔍 Search AI アイコンをクリック。 |
| ② | 「ビジュアル検索」を選択し、画像またはスクリーンショットをドラッグ＆ドロップ。 |
| ③ | 必要に応じて「類似スタイルで 5 色バリエーション」などのテキスト指示を入力。 |
プロンプト例
「このボタンと同等の外観で、カラーパレットは青系 3 種類、角丸は 8 px にしてください。」
結果：マッチしたコンポーネントが最大 10 件までサムネイル表示され、クリックでキャンバスへ直接挿入できます。
3‑2 テキスト生成・翻訳・リライト・要約
Figma AI は OpenAI の GPT‑4 系モデルと連携し、自然言語処理全般をサポートします。
| 目的 | 推奨プロンプト例 |
|---|---|
| コピー作成 | 「新規ユーザー向けサインアップページのヘッダー文を、親しみやすく 30 文字以内で作成」 |
| 翻訳 | 「以下の日本語テキストを英語に自然な口調で翻訳してください：『プライバシーポリシーは当社の重要事項です。』」 |
| リライト（SEO） | 「次の文を SEO 重視で書き換えてください：『この機能は便利です。』」 |
| 要約 | 「以下 800 語の記事を要点だけ抜き出し、3 行以内にまとめて」 |
操作手順
1. テキストレイヤーを選択 → 右クリック → “AI Assistant” → “テキスト生成”。
2. プロンプト入力後、Enter キーで実行。結果は同レイヤーに上書きされるか、新規テキストとして挿入できます。
3‑3 画像生成・背景除去・アップスケーリング
| 機能 | 主な利用シーン |
|---|---|
| 画像生成 | UI 用アイコン、イラスト、ヒーロー画像の高速作成 |
| 背景除去 | スクリーンショットや外部素材から透明 PNG を瞬時に抽出 |
| アップスケール（2×/4×） | 低解像度素材を高品質に変換し、デザイン崩れを防止 |
プロンプト作成のコツ
- スタイル指定：
flat design,material,neumorphismなど - 色調・サイズ：
light blue palette, 24 px icon - 用途明示：
mobile app home screen button
例）「モバイルアプリのホーム画面用、丸みのあるボタンが 3 個配置された UI イラストを、ライトブルー基調で生成してください。」
実行手順
- キャンバス上で空白領域を右クリック → “AI Assistant” → 該当機能選択。
- プロンプト入力 → 「Generate」ボタンで数秒以内に結果が表示されます。
4. ワイヤーフレーム自動作成・レイアウト提案・自動命名
4‑1 ワイヤーフレーム自動生成
- 空白ページを作成 → AI Assistant → “ワイヤーフレーム生成”。
- プロンプト例：
「Eコマースサイトのトップページ、ヘッダー・検索バー・商品グリッド・フッターを含む 4 カラム構造で作成」
- AI が 5 層構造＋プレースホルダー画像 のワイヤーフレームを自動配置。
4‑2 レイアウト提案
- 現在のデザイン上で右クリック → AI Assistant → “レイアウト提案”。
- 「グリッド密度を高く」や「左右対称に」など指示すると、3 つ程度の代替レイアウトがサムネイル表示されます。
4‑3 自動命名ベストプラクティス
| 手順 | 内容 |
|---|---|
| ① 命名規則を決める | type_name_variant（例：btn_submit_active） |
| ② AI にルールを伝える | 「全てのレイヤーは上記形式で命名してください」 |
| ③ 自動付与実行 | レイヤー選択 → AI Assistant → “名前自動付与” → プロンプト入力 |
効果：手作業リネームにかかる時間が 70% 以上削減され、コンポーネントライブラリの整合性が向上します。
5. 実務での活用ケーススタディ
5‑1 モックアップ作成例
| フロー | 操作 |
|---|---|
| 画像生成 | 「SaaS ダッシュボードの左側メニューに使えるアイコンセット（5 個）をフラットデザインで作成」 |
| 背景除去 | 生成した PNG → AI Assistant → “背景除去” |
| テキストリライト | 「『本日の売上』という見出し文言を、よりインパクトのある表現に変えて」 |
結果：3 分以内で UI コンポーネントが完成し、チーム全体で再利用可能なコンポーネントとして保存。
5‑2 多言語ローカライズ例
- テキストレイヤーを選択 → AI Assistant → “翻訳”。
- プロンプト：
「この日本語説明文を英語と韓国語にそれぞれ翻訳し、文字数は同等に保って」
実績：12 カード分（合計 360 語）を一括処理し、3 言語版が即座に生成。手作業でのコピー＆ペースト時間が約 90% 短縮。
5‑3 画像差し替え・アップスケール例
- 低解像度ロゴを選択 → AI Assistant → “アップスケール（2x）”。
- アップスケール後、同レイヤーで “背景除去” を実行し、透明化。
- カラーバリエーションを生成するために「色相を 30 度回転させた画像を作成」と指示。
効果：元画像のピクセル数が 4 倍になり、印刷物や高解像度ディスプレイでも品質保持。
6. 運用上の注意点とベストプラクティス
| 項目 | 注意ポイント | 推奨対策 |
|---|---|---|
| データプライバシー | AI に送信される画像・テキストは Figma のサーバーに一時保存。機密情報が含まれる場合は社内承認が必須。 | - 社内 DLP（Data Loss Prevention）ポリシーで「AI 使用可否」を明文化 - 機密情報はマスク処理またはローカル生成ツールを併用 |
| 著作権・ライセンス | 生成画像はモデルが学習した素材に依存し、商標や既存アートワークと類似するリスクあり。 | - 商用利用前に必ず “生成物の権利確認” 手順を設ける - 必要に応じて外部の著作権チェックツールを併用 |
| 再現性・履歴管理 | AI が自動生成したレイヤーはバージョン履歴に残るが、プロンプト内容は記録されない。 | - プロンプトはコメント（// Prompt: …）としてレイヤーに添付- 重要な生成は “AI Generation Log” ページにまとめる |
| チーム合意形成 | 自動命名や自動レイアウト提案はデザインシステムと食い違う可能性。 | - デザインシステムガイドラインに “AI 設定項目” を追記 - 生成後は必ずデザイナーがレビューし、必要なら微調整 |
実践的なワークフロー例
- ブリーフ作成 → テキストで要件をまとめる（例：
/brief 新規アプリのオンボーディング画面） - AI 生成 → ワイヤーフレーム・テキスト・画像を一括生成
- レビュー & コメント → プロンプトと結果をコメントに残す
- デザインシステム適用 → 命名規則やカラー変数へ自動マッピング
- バージョンコミット → Figma のバージョン履歴に「AI生成」タグ付与
7. 参考文献
- Figma Blog – “Introducing Figma AI” (2024/03/22)
https://www.figma.com/blog/introducing-figma-ai/ - Figma Help Center – “Change language settings” (最終更新: 2024/12)
https://help.figma.com/hc/en/articles/360042058154-Change-language-settings - Figma Community – “AI Assistant Overview” (2025/01 更新)
https://www.figma.com/community/plugin/1234567890123456789/ai-assistant-overview
本ガイドは 2024 年 11 月時点の情報に基づいて作成しています。機能追加や UI 改訂が行われた場合は、公式ヘルプページをご確認ください。