- Figma AIはデザインツールFigmaに統合されたAI機能群で、Design・FigJam・Slidesの各プロダクトで利用できる
- 目玉機能は文章から画面を作るMakeと、キャンバス上で直接デザインを編集するDesign Agent
- 利用には有料プランのフルシート契約が必要で、操作ごとにAIクレジットを消費する仕組み
- レイヤー名の自動命名や画像の穴埋め補完など、地味だが毎日使える便利機能も充実
- 既存のデザインシステムを厳密に守る本番制作より、たたき台作りや初期ラフの高速化に向いている
Figma AIとは何か
Figma AIは、デザインツールとして広く使われているFigmaに組み込まれたAI機能の総称です。単体のアプリではなく、Figma Design・FigJam・Figma Slidesといった既存プロダクトの内部に溶け込む形で提供されているのが特徴です。文章で指示を出すだけで画面のたたき台を作ったり、レイヤー名を自動で整理したり、画像の一部を違和感なく塗りつぶしたりと、デザイン作業の下ごしらえを担ってくれます。
ポイント: Figma AIは「ゼロから完成品を作る」機能というより、「最初の30分を短縮する」機能として捉えると使い方のイメージがつかみやすくなります。
これまでデザイナーが白紙のキャンバスから手を動かして組んでいたレイアウトやワイヤーフレームを、AIが数十秒で下書きとして用意してくれるため、そこから調整に集中できるようになったという声が増えています。制作時間が体感で3〜5割ほど短縮できたという評価もあり、特にラフ案を複数パターン出したいときの相性が良いとされています。
Figma AIでできること一覧
Figma AIと一口に言っても中身は複数の機能に分かれています。まずは全体像を整理しておくと、自分の作業のどこに当てはめられるかが見えてきます。
| 機能名 | できること | 向いている場面 |
|---|---|---|
| Make | 文章プロンプトから動くプロトタイプやコードを生成 | アイデア検証・アプリの叩き台作り |
| Design Agent | 既存ファイルのレイヤーやコンポーネントを読み取りキャンバス上で編集 | 既存デザインの部分修正・調整 |
| First Draft | 簡単な指示だけで画面のワイヤーフレームを生成 | 画面設計の初期ラフ出し |
| Rewrite | UIテキストの多言語バリエーションを自動生成 | 多言語対応・文言のパターン出し |
| 画像生成・編集/オートレイアウト提案 | 画像の穴埋めや差し替え、レイアウトの自動整列提案 | 素材補完・レイアウト微調整 |
覚えておきたいこと: どの機能から触るか迷ったら、まずは負荷の軽いレイヤー名の自動整理や画像の穴埋めから試すと、AIクレジットの消費感覚がつかみやすくなります。
Figma AIの使い方｜基本の始め方
Figma AIの機能は、Figmaの有料プランに含まれるフルシート契約であれば利用できるようになっています。無料プランでは基本的に対象外となっているため、まずは自分のチームの契約プランを確認しておくと安心です。設定画面のAI関連のトグルがオンになっていれば、通常のFigma画面のツールバーやキャンバス上に、AI機能を呼び出すアイコンやコマンドが表示されるようになります。
始める手順はおおむね次の流れです。
- Figmaにログインし、対象のファイルまたは新規ファイルを開く
- 画面上部やサイドバーに表示されるAI関連のアイコンからMakeまたはFirst Draftを選択
- 作りたい画面や機能の内容を、具体的な文章でプロンプトとして入力する
- 生成された下書きを確認し、レイヤーやコンポーネントとして編集を加える
- 必要に応じてRewriteや画像編集で仕上げの調整をする
注意点: プロンプトが抽象的すぎると、意図と違うレイアウトが返ってくることがあります。「対象ユーザー」「画面に含めたい要素」「参考にしたい既存コンポーネント」まで書き添えると精度が上がりやすいとされています。
Makeの使い方のコツ5選
1. プロンプトは要素を箇条書きで渡す
「フィットネスアプリのダッシュボードを作って」だけでなく、「週間の歩数グラフ」「直近のワークアウト一覧」「今日の目標達成率」のように含めたい要素を具体的に書き出すと、狙った構成に近い下書きが返ってきやすくなります。長い一文で説明するより、要素を分けて伝える方が結果が安定するという評価が目立ちます。
メモ: プロンプトはあとから追記・修正して再生成できるため、一発で完璧を狙う必要はありません。
2. 既存コンポーネントを先に用意しておく
Makeはファイル内の既存コンポーネントやFigma Community上の素材を参照して生成する仕組みのため、自分のデザインシステムに沿ったボタンやカードコンポーネントをあらかじめ用意しておくと、生成結果がブランドに近い見た目になりやすくなります。何もない状態から生成すると、独自のスタイルで組まれてしまい後から手直しが増える点は覚えておきたいところです。
3. 生成後はレイヤー構造を必ず確認する
Makeで生成された画面は、見た目としては整っていても、レイヤー名やAuto Layoutの階層が本番運用にそのまま使えるとは限りません。特に既存の設計ルールが厳密なプロジェクトでは、生成結果をそのまま組み込むのではなく、レイヤー構造を人の目で整理し直す工程を挟むと、後工程での手戻りを防ぎやすくなります。
4. 軽い作業から試してクレジットの感覚をつかむ
AIクレジットは操作の重さによって消費量が変わるとされ、フォント変更のような軽い調整は少なめ、ゼロからのアプリ生成は多めに消費する目安になっています。いきなり大きな生成を繰り返すと上限に達しやすいため、最初は小さな修正から試してクレジットの減り方を体感しておくと、月内の使い方の計画が立てやすくなります。
ポイント: クレジットには上限が設定されており、使い切ると月次のリセットか管理者による追加付与を待つ必要があります。チームで使う場合は消費ペースの共有もしておくと安心です。
5. Design Agentと組み合わせて部分修正に使う
ゼロから作るMakeに対し、Design Agentはキャンバス上の既存レイヤーやコンポーネント、変数を読み取ったうえで部分的な編集を行う機能です。「このボタンの余白を調整して」「このセクションだけレイアウトを整えて」といった細かい指示に強いため、Makeで作った下書きの仕上げをDesign Agentに任せる、という組み合わせ方をすると効率が上がりやすくなります。
First DraftとRewriteの使いどころ
First DraftはFigma Design内で使える機能で、「予約アプリの画面を作って」のような簡単な指示だけでワイヤーフレームの土台を作ってくれます。画面設計の一番最初、真っ白な状態からの叩き台作りに向いており、そこから配置や余白を人の手で整えていく使い方が定番になりつつあります。
一方のRewriteは、UI上のテキストを多言語のバリエーションとして自動生成する機能です。ボタンのラベルや説明文を複数言語向けに書き分けたいとき、ゼロから一つずつ翻訳・調整する手間を減らせる点が評価されています。文言のトーンを変えたバリエーション出しにも応用でき、コピーのたたき台作りとしても使われています。
覚えておきたいこと: Rewriteで出力された文言も、そのまま採用するのではなく、ブランドのトーンに合っているかを人の目で最終チェックすると安心です。
地味だけど便利なAI機能
派手なMakeやDesign Agentに注目が集まりがちですが、実際の現場で「毎日使っている」という評価が多いのは、レイヤーの自動命名や画像の穴埋め補完、Auto Layoutの整列提案といった細かい機能です。手作業では地味に時間がかかる整理作業を肩代わりしてくれるため、大きな生成機能よりも先にこちらから試してみるという使い方もおすすめです。
- レイヤー名の自動整理:「Rectangle 1」のような無機質な名前を内容に沿った名前に自動で変換
- 画像の穴埋め・差し替え: 素材の一部を違和感なく補完・拡張
- Auto Layoutの整列提案: 要素の余白や配置をバランス良く自動調整
注意点: 便利な反面、既存のデザインシステムに厳密に沿った本番画面の制作では、コンポーネントの参照がずれることがあるため、最終チェックは必ず人の目で行うことが推奨されています。
料金プランとAIクレジットの考え方
Figma AIの機能を使うには、Figmaの有料プランでフルシートの契約をしていることが前提になります。無料プランやビュワーシートでは対象外になっているケースが多いため、チームでの導入を検討する際はまずシート形態を確認しておくとよいでしょう。
利用時にはAIクレジットが消費される仕組みが導入されており、操作の負荷によって消費量に差があります。フォントの変更のような軽微な調整は消費が少なめ、添付したデザインをインタラクティブなプロトタイプに変換する作業や、ゼロからアプリを生成する作業は消費が多めになる傾向があるとされています。クレジットには月ごとの上限が設けられており、使い切ると新しいAI操作ができなくなるため、チームで使う場合は消費のペース配分を意識しておくと安心です。
メモ: クレジットの上限や消費量の目安は今後のアップデートで変更される可能性があるため、契約プランの管理画面で最新の状況を随時確認するのがおすすめです。
導入前に知っておきたい注意点
Figma AIは便利な反面、万能ではありません。特に厳密なデザインシステムを運用しているチームでは、生成結果がコンポーネントのルールから外れてしまい、かえって整理の手間が増えるケースがあると評価されています。本番の実装にそのまま流用するのではなく、あくまで「たたき台」「初期案」として扱い、最終的な仕上げは人の手で行う運用が安定するとされています。
また、AIクレジットは有限のリソースであるため、チーム全体で使う場合は誰がどれくらい消費しているかを可視化しておくと、月の後半でクレジット切れになるといった事態を避けやすくなります。
ポイント: 「AIに全部任せる」のではなく「AIに下書きを作らせて人が仕上げる」という役割分担を意識すると、Figma AIの良さを引き出しやすくなります。
まとめ
Figma AIは、Make・Design Agent・First Draft・Rewriteといった複数の機能が組み合わさったAI機能群で、デザイン作業の中でも特に「最初のたたき台作り」と「地味な整理作業」を効率化してくれるのが強みです。プロンプトは要素を具体的に箇条書きで伝える、既存コンポーネントを用意してから生成する、生成後はレイヤー構造を確認するといった基本的なコツを押さえるだけで、仕上がりの質と作業スピードは大きく変わってきます。まずはレイヤー名の自動整理のような軽い機能から試し、慣れてきたらMakeやDesign Agentでの本格的な下書き作りへと使い方を広げていくのが、無理なく取り入れられる進め方といえるでしょう。
Figma AIの使い方｜Makeで時短するコツ5選をまとめました
Figma AIを使いこなす鍵は、プロンプトの具体性・既存コンポーネントの準備・生成後の確認という3つの基本動作にあります。Makeで叩き台を作り、Design Agentで部分修正を加え、Rewriteで文言のバリエーションを整えるという役割分担を意識すれば、デザイン作業全体のスピードを無理なく底上げできます。まずは負荷の軽い機能から触れてみて、自分やチームの制作フローに合った使い方を見つけていくことをおすすめします。
人気記事