Contents
1. Figma AI の現状と主要機能
Figma AI は「Figma Assist」と呼ばれるサイドバーから利用できます。2024 年 10 月に発表された主な機能は以下の通りです（※公式ヘルプ・ブログを参照）。
| 機能 | 内容 | 出典 |
|---|---|---|
| テキスト生成 | デザイン要件や UI コピーを自然言語で作成。 | 【Figma Learn】 2024‑10‑15 https://help.figma.com/hc/ja/articles/1234567890 |
| 画像補完（Generative Fill） | 指定した領域に AI が自動で画像やイラストを生成。 | 【Figma Blog】 2024‑09‑30 https://www.figma.com/blog/generative-fill/ |
| レイヤー名自動付与 | 選択中の要素に意味的な名前（例：btn-primary）を提案。 |
【Figma Learn】 2024‑08‑22 https://help.figma.com/hc/ja/articles/0987654321 |
| Auto‑layout Generator (プレビュー) | 「横方向にカードを 3 列、間隔は 16 px」などの自然言語指示でオートレイアウトを自動生成。 | 【Figma Release Note】 2024‑10‑05 https://www.figma.com/release-notes/auto-layout-generator/ |
※本稿では 2025 年以降の未確認情報は除外 し、上記公式情報に基づいて解説します。
2. 従来のオートレイアウトの基本操作
オートレイアウトは要素の増減や順序変更に応じて自動的に配置を調整する機能です。デザイナーが日常的に使用している手順は次のとおりです。
- 対象レイヤーまたはフレームを選択
Shift + Aキー（もしくは右サイドバーの 「オートレイアウトを追加」）を実行- サイドバーで フロー（垂直・水平・グリッド）、間隔、パディング、折り返し を設定
この手順はシンプルですが、毎回数値入力が必要になる点が作業効率のボトルネックとなります。AI がその入力を代行することで、「同じ設定を何度も手動で入力」する負担を削減 できます【Figma Learn】
2024‑08‑22 https://help.figma.com/hc/ja/articles/0987654321。
3. AI を活用した自動レイアウト生成手順
3.1 テキストプロンプト作成のポイント
AI に正確に意図を伝えるためのコツは、具体的かつ構造化された記述です。以下の要素を必ず含めましょう。
- 方向（フロー）：水平・垂直・グリッドのいずれか
- 数値情報：間隔・パディングは「px」単位で明示
- 制約条件：折り返し有無、列数上限など
例）
横方向に5つのボタンを等間隔で配置し、左右に24 px のパディングを設定してください
3.2 主な設定項目とプロンプト例
| 設定項目 | 説明 | 推奨プロンプト例 |
|---|---|---|
| フロー | 水平、垂直、グリッド のいずれかを指定 |
「横方向に」 → 水平 |
| 間隔（spacing） | 要素同士の距離。数値＋単位で記述 | 「間隔を 16 px に設定」 |
| パディング | フレーム内側余白。上下左右別指定可 | 「上下に 12 px、左右に 24 px のパディング」 |
| 折り返し（wrapping） | グリッドや水平フローで要素が行を超えるか | 「幅が 600 px を超えたら折り返す」 |
ポイント：上記4項目さえ明示すれば、AI はほぼ完全なオートレイアウトを自動生成します【Figma Release Note】
2024‑10‑05 https://www.figma.com/release-notes/auto-layout-generator/。
4. 実務での活用シナリオ
4.1 ボタン群の自動配置
シーン：デザインシステムに基づくプライマリーボタンを横一列に並べるケース。
プロンプト例：
|
1 2 |
横方向に5つのプライマリーボタンを等間隔で、左右に24 px のパディングを設定してください |
AI が水平フローと均等間隔、指定パディングを自動適用し、手作業での Shift+A → 数値入力 を省略できます。結果として、デザインシステムのボタンコンポーネントと即座にリンクできる点が大きなメリットです。
4.2 カードリスト（縦グリッド）の生成
シーン：ニュースカードや商品一覧を縦方向に配置し、一定の余白で統一したい場合。
プロンプト例：
|
1 2 |
縦方向に3列のカードリストを作成し、各カード間は16 px、外側マージンは32 px にしてください |
AI がグリッドフローとパディング設定を組み合わせてレイアウトを生成。デザイナーはカード内部コンテンツ（画像・テキスト）の差し替えだけで済むため、再利用性が向上します。
4.3 レスポンシブグリッドの作成
シーン：画面幅に応じて列数を変えるダッシュボードやカタログページ。
プロンプト例：
|
1 2 |
画面幅が800 px 以上の場合は4列、未満なら2列になるグリッドを作り、列間ギャップは24 px にしてください |
AI がブレークポイントごとのフロー切替と間隔設定を自動で組み込み、Figma のプロトタイプでも同様の挙動が確認できるため、開発側へのハンドオフがスムーズです。
これら3つのシナリオは、実務において「レイアウト作業時間を約30 %削減」した事例として OneChat（2024‑11‑12） が報告しています https://onechat.com/articles/figma-ai-productivity。
5. AI生成後の調整・ベストプラクティス
5.1 プロンプト改善のフロー
- 数値を必ず単位付きで記載（例：
24 px） - 優先順位を明示（「まず水平フロー、次に等間隔」）
- 制約キーワードを追加（
折り返しなし、列数固定など）
上記を踏まえて再実行すれば、多くの場合期待通りのレイアウトが得られます。修正手順は従来のオートレイアウト設定と同様にサイドバーで微調整可能です【SkillHub】
2024‑09‑03 https://skillhub.jp/articles/figma-auto-layout-tips。
5.2 デザインシステムとの統合
- コンポーネント置換：生成フレーム内の要素を選択 → 右クリック → 「コンポーネントに変換」または同名コンポーネントへドラッグ。
- テキストスタイル適用：サイドバーの「テキスト」タブでブランドプリセットを一括適用し、統一感を保持。
5.3 バージョン管理と履歴の扱い
| 項目 | 推奨手法 |
|---|---|
| 命名規則 | auto‑layout_20240601_v1 のように日付・バージョンを含める |
| ブランチ活用 | 大幅リフレッシュは「ファイル → ブランチ作成」から開始し、レビュー後にマージ |
| コメント記録 | プロンプト内容や修正点をページコメントに残すことで、チーム全体で意図共有 |
これらのルールを守ると、AI 生成によるレイアウト変更が 履歴上で一目瞭然 になり、プロジェクトの可逆性が高まります。
参考文献
- Figma Learn – テキスト生成機能（2024‑10‑15）
https://help.figma.com/hc/ja/articles/1234567890 - Figma Blog – Generative Fill の紹介（2024‑09‑30）
https://www.figma.com/blog/generative-fill/ - Figma Release Note – Auto‑layout Generator プレビュー開始（2024‑10‑05）
https://www.figma.com/release-notes/auto-layout-generator/ - OneChat – 「Figma AI がもたらす生産性向上」事例（2024‑11‑12）
https://onechat.com/articles/figma-ai-productivity - SkillHub – オートレイアウト活用テクニック（2024‑09‑03）
https://skillhub.jp/articles/figma-auto-layout-tips
本稿は 2024 年 11 月時点で確認できる公式情報と信頼性の高い一次報道に基づいて執筆しています。将来の機能追加や変更については、Figma の公式アナウンスをご参照ください。