Figma公式AIツール「Figma Make」とは？初心者向けに概要・機能・使い方を解説
Figma Makeは、デザインプラットフォームFigmaが公式に提供する最新のAI搭載ツールです。プロンプトを入力するだけで、コードを書かずにアプリのプロトタイプやデザインを自動生成できる画期的な機能を備えています。また、具体例として「ブログのサムネイル作成」にFigma Makeを活用する手順とポイントを紹介します。幅広い読者の方に役立つ情報を提供できるよう、できるだけ噛み砕いて解説していきます。
Figma Makeの概要
Figma Makeの操作画面の一例。左側に自然言語のプロンプトを入力すると、右側に対応するUIデザインやコードが即座に生成されます。ノーコードで対話型にプロトタイプを作成できるのが特徴です。
Figma Makeは、Figmaが2023～2024年にかけてリリースしたAI搭載のプロンプト対話型デザイン/開発支援プラットフォームです。従来は「デザイン作成 → プロトタイピング → コーディング」という工程が必要だったWebアプリ開発において、Figma Makeを使えばテキストによる指示一つでデザインから動くコードまで自動生成できます。まさにデザイナーや非エンジニアでも、アイデアを即座に形にできるツールと言えるでしょう。
サムネイル作成にFigma Makeを活用してみよう
それでは、実際の使用例としてブログ記事のサムネイル画像をFigma Make（および関連AI機能）で作成する手順を見てみましょう。ブログのサムネイルとは、記事のタイトルやテーマですが、自分で画像素材を探したり編集したりするのは手間がかかるものです。FigmaのAI機能を使えば、デザイン未経験者でも短時間でクオリティの高いサムネイルを作成できます。
作成手順: 例えば「AIデザインの未来」というテーマのブログ記事を想定し、そのサムネイル画像を作ることにします。以下のような手順で進めます。
サムネイル用フレームの準備: まずFigma makeで新規ファイルを開き、サムネイル画像用のフレームを作成します。サイズはブログやSNSで見栄えが良い横長長方形に設定しましょう。
AIによる背景画像の生成: 次に、選択したフレームに対してAI画像生成機能で背景画像を作ります。Figmaエディターの上部にあるメニュー（アクションメニュー）から「Make an image」を選択します。現れたテキスト入力フィールドに、欲しい画像のイメージを英語で入力します（日本語でも可能ですが英語の方が詳細な描写をしやすい傾向があります）。例えば「futuristic abstract background, vibrant colors, circuit patterns」（未来的な抽象背景、鮮やかな色彩、回路模様）といった具合です。入力できたらAIモデルの種類を選択し（特にこだわりが無ければデフォルトのモデルでOK）、「Make it」をクリックします。すると数秒待つだけで、指定したフレームいっぱいにAI生成画像が描画されます。結果は複数候補が提示される場合もあるので、好みの画像を選んでフレームに適用しましょう。また「もう少し○○な感じの画像にしてほしい」と感じた場合は、同じパネルでプロンプトを微調整して「Make changes」をクリックすれば再生成できます。
タイトルテキストの配置: 背景画像が用意できたら、記事タイトルを入れましょう。Figmaのテキストツールでフレーム内に適当な大きさの文字を入力し、「AIデザインの未来」などブログ記事のタイトルを記載します。視認性を高めるコツとして、白っぽい背景画像の場合は文字色を濃いめのカラーにしたり、文字の後ろに半透明の長方形を敷いてコントラストを付けたりすると良いでしょう。フォントやサイズもお好みで調整します。もしデザインの知識がなく配色やフォント選びに迷う場合でも心配ありません。Figma AIにはテキストのリライト機能やトーン調整機能もありますので、例えば見出しテキストを選択して「もう少しポップな印象にして」とプロンプトを送ればフォントの変更やスタイルの提案を得られる可能性があります（※現在テキストスタイル自動変更は限定的なサポートですが、将来的に強化されることが予想されます）。
仕上げと微調整: 最後に全体のバランスを見て仕上げます。画像と文字の配置がおかしくないか、色味は統一感があるかなどを確認しましょう。必要であればAIによる画像編集機能を活用してさらなる調整も可能です。例えば背景画像の一部が暗すぎてタイトル文字が読みにくい場合、画像を選択して「Edit image」機能で「少し明るく」と指示すれば該当箇所の明度が調整されるかもしれません。また人物写真を扱う場合には背景除去機能で切り抜きをする、といったこともワンクリックでできます。このように各種AIツールを組み合わせることで、デザイン経験が浅くても直感的な指示で見栄えのするサムネイルが完成します。
「少し明るく」と指示して該当箇所の明度を調整し、ボタンを削除
所要時間は筆者の環境ではわずか数分ほど。Figma Makeなら圧倒的スピードで実現できました。しかもFigma内で完結するため、画像生成サイトやデザイン素材サイトを行き来する必要がないのも大きな利点です。一度設定したフォントやスタイルもFigma上で使い回せるので、統一感のある複数サムネイルを量産することも難しくありません。
主な用途とメリット
Figma Makeが想定する主な用途やメリットは以下の通りです：
高速なプロトタイピング: コードを書けないデザイナーでも、会話するようにプロンプトを入力するだけでインタラクティブな高精度プロトタイプを作成可能。アイデアの検証やチーム内の合意形成が飛躍的にスピードアップします。
MVP開発やモック作成: 最低限の製品（MVP）やモックアップを迅速に用意できるため、スタートアップや新機能開発の初期段階で役立ちます。コードの知識がなくても自然言語でアプリの骨組みを構築できるため、開発のハードルが下がります。
デザインと開発の連携強化: デザイナー・エンジニア・PM間でプロトタイプを共通のたたき台にできるため、認識合わせやフィードバックがスムーズになります。複雑なUI挙動も実際に触れる形で示せるので、チーム全体での議論が深まりやすくなります。
以上のように、Figma Makeは「アイデアを即座に体験可能な形にする」ことでデザイン〜開発プロセス全体を支援することを目的としています。
Figma Makeの主な機能と特徴
Figma Makeが備える具体的な機能と特徴を見てみましょう。Figmaが提供する他のAI機能（テキストのリライト・翻訳、画像生成・編集など）と連携しながら、デザイン制作から実装まで一貫してサポートしてくれます。
デザインシステムやスタイルの継承: あらかじめブランドのカラーやフォントなどを定義したFigmaファイルをインポートすることで、生成されるプロトタイプの見た目を既存のデザインシステムに沿ったものに統一できます。これによりAI生成物であっても、自社プロダクトらしい一貫性のあるUIに仕上がります。
AIによるコード自動生成・実行: Figma Makeは生成したデザインに対してコードを同時に書き起こします。生成されるコードは最新のフロントエンド技術を用いており、ユーザーはコードを意識せずとも、生成物は実践的で拡張性の高いものになっています。必要に応じて生成後のコードを直接編集することも可能ですが、基本的にはAIへの追加プロンプトで修正する方が安定して成果を得られるようです。
AI画像生成・編集機能の統合: Figma Makeを含むFigmaのAI機能群には、テキストからの画像生成や既存画像の編集（背景削除や解像度アップ、特定部分の差し替え）といったツールも含まれています。デザイン中に必要なイラストや写真素材が無い場合でも、テキストで「○○な雰囲気の画像を作って」と指示すればその場でAIが画像を生成し、デザインに取り込むことができます。
以上がFigma Makeの主な機能と特徴です。要約すれば、「プロンプトによるUI/コード生成」「画像生成やテキスト編集などデザイン周辺機能の統合」がキーポイントです。それでは、こうしたAI機能はどのような仕組みで実現されているのでしょうか。
Figma Makeを支えるAIの仕組み
Figma Makeの裏側では、大規模な機械学習モデル（Generative AI）が動いています。その中核となるのが、自然言語を理解してプログラムを生成する大規模言語モデル（LLM）です。公開された正式な技術仕様はありませんが、一部報道やユーザー情報によれば、Figma Makeの対話エンジンにはAnthropic社の「Claude」と呼ばれるLLMが採用されている可能性があります。実際、Figma MakeのチャットUIでやりとりされる応答は、GitHub CopilotやChatGPTのような高度なAIコード補助と似た挙動を示します。このLLMがユーザーのプロンプト（要望）を解釈し、必要なUI構造やコードを自動で生成しているのです。
一方、画像生成や画像編集の機能にはディープラーニングを用いた生成モデルが使われています。テキストから画像を作る「Make an image」機能では、文章で記述された内容をもとに新規画像を描き起こすAIモデル（例: DALL·EやStable Diffusionのようなモデル）をバックエンドで呼び出しています。Figma側はどのモデルを利用しているか明言していませんが、ユーザーが生成モデルの種類を選択できるドロップダウンが用意されており、用途に応じて最適なモデルを選べるようになっています。生成された画像は直ちにキャンバスに配置され、他のデザイン要素と組み合わせて編集可能です。また画像の一部を書き換える「Edit image」機能では、指定領域を解析して別の内容に置き換える画像編集特化型AIが働いています。
このようにFigma Makeは、テキスト生成系のAI（LLM）と画像生成系のAIを組み合わせており、ユーザーの要求を包括的に処理できる仕組みになっています。巨大な学習データに裏打ちされたAIモデルが搭載されているとはいえ、生成結果が常に完璧とは限りません。Figma自身も「AIの出力は不正確な場合もあるので、あくまで参考として捉え、必要に応じて専門知識で補完してほしい」と注意喚起しています。実際、プロンプトの書き方次第で出来上がりに差が出ることもあり、「思い通りのレイアウトに仕上げるには多少の慣れが必要」との指摘もあります。しかし裏を返せば、ユーザーがAIへの指示スキルを磨くことで、より精度の高い成果物を得られる可能性が広がるとも言えるでしょう。
まとめ：Figma Makeがもたらす新しい創作ワークフロー
ここまで紹介したように、Figma MakeはAIの力でデザインと実装の壁を取り払い、誰もがアイデア次第でプロダクト開発に参加できる環境を提供しています。初心者にとっては高度なコーディング知識がなくても動くものを作れる頼もしいツールであり、熟練のデザイナーや開発者にとっても試行錯誤のプロセスを劇的に効率化する武器になります。「思いついたその瞬間にまずプロトタイプを試作し、触って確認する」というスタイルが当たり前になることで、創造のスピードと質は今後ますます向上していくでしょう。
もっとも、現時点ではAIにできること・できないこともあります。意図したとおりのアウトプットを得るにはプロンプトの工夫が必要だったり、細部の仕上げは人間のセンスに委ねる必要もあります。実際に触れてみると、従来のツールとは一線を画す次世代の制作スタイルであることが実感できるはずです。
デザイン未経験の方も、プロのクリエイターの方も、ぜひFigma Makeを試してみてください。きっとその便利さと可能性に驚くことでしょう。誰もが自由に表現できる世界が広がっていくことを願っています。
