AIの進歩により、近年ではさまざまなツールにAIを活用した機能が搭載されるようになりました。デザインツールとして普及している『Figma』にも、2025年からAI機能が搭載されたことで、『Figma AI』として広く注目を集めています。

この記事では、『Figma AI』の基本的な特徴や使い方、プランの種類などを詳しく解説します。

また、『Figma Make』と『Cursor』を活用したワイヤーフレームの自動生成方法や、『Figma』・『Figma Make』を活用したニジボックスのデザインシステムの作成事例も紹介しています。ぜひ参考にしてください。

---

---

Figma AIとは？基本的な特徴を解説

『Figma AI』とは、もともとデザイナーや開発者向けのデザインツールとして2016年末にリリースされた『Figma』に搭載されたAI機能のことです。特に2025年版では、AI機能が大幅に強化されたことで、デザイナー以外の方でも利用しやすくなっているのがポイントです。

『Figma AI』の大きな特長は、高度なデザイン作成をAIで自動化できる点です。ここでは、『Figma AI』の基本的な特徴をご紹介します。

なお、『Figma』について、以下の記事でも詳しく紹介しているので参考にしてみてください。

テキスト入力でデザインを作成できる

『Figma AI』の大きな特長は、テキストでのシンプルなプロンプト（指示文）からデザインを生成できる点です。スタイルやレイアウトのサンプルを提案してくれるので、表現方法を迅速に検討できます。

また、キャッチコピーについても、「もっと短くする」「もっとフォーマルにする」といった直感的なプロンプトで指示を与えながら、理想の形を目指せます。

手作業によるプロセスが省略されるため、デザインを始めたばかりの方はもちろん、熟練のデザイナーにとっても負担が軽減されるのがメリットです。

プロトタイプを素早く作れる

プロトタイプ（試作品）をスピーディーに作成することも可能です。後ほど詳しくご紹介しますが、『Figma AI』には「First Draft」という機能が搭載されており、簡単なテキストから自動でワイヤーフレームやたたき台を生成してもらえます。

レイアウトや色、操作感などを再現した完成品に近い試作品を手軽に作成できるため、ゴールを可視化した状態で設計を進めることが可能です。チームやクライアントとも、明確なイメージを共有しながら作業を進められるので、不要な手戻りの削減につながるでしょう。

フロントエンドコードの生成まで行える

『Figma Make』では、実際にデザインされたギミックを動作させるのに必要なフロントエンドコードまでを、テキストから自動生成してくれます。

コードを書けないデザイナーでも、アイデア出しから、実装までの一連の流れを把握しながら作業できるため、さまざまなプロセスを直感的にデザインできます。

Figma AIの主な機能

『Figma AI』には、次のような機能が備わっています。

・テキストからのデザイン作成

・画像の作成・編集

・レイヤー名の変更

・アセット・デザインの検索

・プロトタイプの作成

・コンテンツの置き換え　など

ここから、それぞれの機能でどのようなことができるのか、具体的な使い方と併せて見ていきましょう。

また、『Figma』の設計思想に興味のある方は、以下の動画も参照されると理解が深まると思います。

【山下 祐樹 氏】Figmaデザイン再設計への挑戦 | UI UX Camp! 2023 | ニジボックス主催 – YouTube

テキストからのデザイン作成

『Figma AI』では、前述のとおり、テキストからデザインを自動生成でき、テキストの書き換え（リライト機能）、翻訳、要約機能も備わっています。テキストを提案してもらうことも可能なため、入力作業そのものもスムーズに進められるのが利点といえるでしょう。

画像の作成・編集

カスタムテキストプロンプトを使用して画像の作成をしたり、既存の画像から背景を削除したりすることが可能です。また、AIを用いて低解像度の画像を鮮明にし、解像度を高めることもできます。操作そのものは簡単に行えるため、デザインに不慣れな方でも思い通りの画像を実現しやすいのがメリットです。

レイヤー名の変更

数回のクリックで全レイヤーに分かりやすい名前が自動で設定されるため、ファイルの整理が瞬時に完了します。

アセット・デザインの検索

データの検索も手軽に行えます。デザイン要素や説明テキストを指定するだけで、必要なアセット（繰り返し使用するパーツやコンポーネント）やデザインを探してもらえます。

また、「関連するデザインからヒントを見つける」「他のユーザーがデザインを行う際にどのような関心を持っているのかを把握できる」「コンポーネントの情報源を見つける」といった使い方も可能です。「類似デザイン検索」と「アセットタブ」の2種類があります。

検索機能には「類似デザイン検索」と「アセットタブ」の2種類があります。類似デザイン検索では、プロンプトや画像、キャンバスの選択を用いて、関連性の高いデザインやコンポーネントを探せ、アセットタブでは、キーワード検索ができます。

プロトタイプの作成

「First Draft」という機能では、簡単なプロンプトを入力するだけで本格的なプロトタイプを生成できます。例えば、「ファーストフード店の予約アプリ」といった簡単な指示だけで、AIがワイヤーフレームやデザインのたたき台を作成してくれます。

適切なカラーリングや画像の挿入も行われ、完成に近い状態でプレビューできるため、チームやクライアントとのコミュニケーションに役立つでしょう。また、ワンクリックで生成が可能なため、Web会議中などにすぐ共有できるスピード感も便利なポイントです。

コンテンツの置き換え

テキストコンテンツの生成が行えます。プレースホルダ―（仮置きの文字や数字）や重複したテキストも、独自の表現に置き換えられるため、スピーディーに使用可能なコンテンツを作成することが可能です。

Figmaの4つの料金プランと製品別の機能

『Figma』には本稿執筆時の2025年12月時点では4つの料金プランがあり、それぞれ使用できる機能や制限の内容に違いがあります。また、各種AI機能を使うためにはFigmaの有料プラン登録が必要です。ここで、各料金プランごとの概要を押さえておきましょう。

無料プランと有料プランの違い

『Figma』には無料プランがあり、無料でも基本的な機能を幅広く利用できるのが魅力です。例えば、個人用ファイル数は無制限で作成可能となっています。

また、デザイン・プロトタイプ用のFigmaファイル、ホワイトボード用のFigJamファイルをそれぞれ3つまで作成できます。さらに、ストレージやコラボレーター数に制約はないため、個人や小規模チームの利用には十分な内容といえるでしょう。

ただし、今回ご紹介しているAI機能をはじめ、有料プランでなければ使えないものもあるため注意が必要です。

Figmaより引用（2025/12/22時点）

「シート」とは、利用できるFigma製品の権限のことです。コラボシートは後述する『Figma Slides』と『FigJam』へのフルアクセスが可能、Devシートはコラボシートに加えて「開発モード」へのアクセスが可能、フルシートは「全てのFigma製品」へのフルアクセスが可能なプランです。

Figmaの製品ごとの機能の違い

『Figma』には、以下の多様な製品が存在しています。

・『Figma Design』：デザインツール

・『FigJam』：オンラインホワイトボード

・『Figma Slides』：プレゼンテーション作成用ツール

・『Figma Sites』：Webサイト構築用ツール

・『Figma Buzz』：Web広告用デザインツール

・『Dev Mode』：実装担当者の確認ツール

・『Figma Draw』：ベクター描画・イラスト制作ツール

・『Figma Make』：AI搭載のデザイン・プロトタイピングツール　など

Figma製品にはそれぞれにAI機能が搭載されていますが、製品ごとに利用できる機能は異なります。画像作成・編集やテキストの置き換え・翻訳・要約は全ての製品で利用できますが、テキストの提案やレイヤー名の変更、「First Draft」などは『Figma Design』限定の機能となっています。

一方、トーンの調整は『FigJam』と『Figma Slides』限定となっているので注意が必要です。そのほかに、ボード・図表の生成や付箋の並べ替えなど、『FigJam』限定の機能も存在しています。

製品ごとに利用できるAI機能は異なるため、用途やシーンに応じて使い分けることが大切です。

Figma AIを始めるためのステップ

『Figma AI』を使う手順は次のとおりです。

1．『Figma AI』を開いて、ページの右上にある「無料で始める」をクリックする

2．Googleアカウント、またはメールアドレスでアカウントを作成する

3．「お名前を教えてください」という表示が出てくるので、他のユーザーに表示される名前を任意で入力する

4.マーケティングやデザインなど、最も当てはまるポジションを選択する

5.プランを選択する

6.作業を選択して、完了へ

7.実際の作業画面

上記の手順で有料プランに登録すれば『Figma』の各ツールでAI機能を利用できるようになります。

Figma AIの活用シーン

『Figma AI』では、さまざまな活用方法が考えられます。

①ワイヤーフレームの組み立て

・「First Draft」でデザインの組み立てができる

・アセットの検索機能で、各パーツのブラッシュアップ

・コンテンツの置き換え機能で、文章のブラッシュアップ

②外国人観光客向けのメニューの作成

・リライト機能でキャッチコピーや説明文の作成

・翻訳機能で英語への翻訳

上記のもの以外にも、「会議の発案をもとに即日でプロトタイプを開発する」「デザインに合う画像をAIで新たに生成し、素材を探す時間を短縮する」「類似のデザインを検索する」といった多様な活用方法が考えられます。

Figma MakeとCursorを使った、デザインシステムに沿ったワイヤーフレームの自動生成法

先程紹介した『Figma Make』の活用法の一例として、『Figma Make』と『Cursor』を組み合わせればデザインシステムに沿ったワイヤーフレームの作成からデザイン、実装までを自動生成することができます。

具体的なフローは以下です。

1. 『Figma』でライブラリを作成
2. 『Figma Make』でワイヤーフレームを自動生成
3. 『Figma』でデザイン編集
4. 『Cursor』にMCPでつなぎ自動で実装

以下記事では実際に操作する画面のキャプチャを用いながらこれらのフローを解説しているので、ぜひご覧ください。

フローの紹介の他、AIはWeb制作でどう生かせるかといったことについても触れています。

また、AI活用において参考になるコンテンツの例として、ニジボックスのAI活用に関する記事やイベントアーカイブ動画も紹介しているのでぜひお役立てください。

Figma・Figma Makeを活用したニジボックスのデザインの案件事例

ここでは、ニジボックスが担当した『Figma』『Figma Make』を活用したデザイン案件事例を紹介します。

ニジボックスは、ファッションレンタルサービス『airCloset』のデザインシステム刷新支援を担当しました。

クライアント課題

『airCloset』では2020年に策定されたデザインガイドラインが存在していましたが、サービスの成長とともに運用環境や開発体制が変化し、実装コードとの整合性が徐々に失われていました。その結果、一部でデザインの逸脱や一貫性のない独自コンポーネントが増加し、UIの再利用性や保守性に弊害が出始めていました。

また、Webとアプリ間での表現の差異が生じていたため、どのチャネルからでも迷わず直感的に操作できる「統一されたユーザ体験（UX）」の提供が今後の重要テーマとなっていました。

事業KPIである「リリース数の最大化」を実現するためには、デザインとエンジニアリングの連携を強化し、迷わず活用できる再利用性の高い基盤を整備する必要がありました。

「airCloset」とは？

プロのスタイリストがコーディネートした洋服が自宅に届くファッションレンタルサービス。「返却期限なし」「クリーニング不要」。気に入ったら購入も可能で、「何度も」新しい洋服との出会いが楽しめます。

サービスリンク：

https://www.air-closet.com/

ミッション

エンジニアと共通言語で対話できる「実効性」の高いデザインシステムへの転換

ソリューション

単なるビジュアル整理ではなく、「開発現場で使われ続ける構造」を目指し、実装との整合性を前提とした再設計を実施。併せて、将来的なAI活用を見据えた技術検証も並行して行いました。

• 現状資産の定量的な棚卸しと構造課題の可視化
• 調査結果を踏まえた改善方針の設計と合意形成
• MCPサーバー連携を見据えたAI活用の実証検証
• マスターデータの再整備と運用基盤への反映

引用：株式会社エアークローゼット　ファッションレンタルサービス『airCloset』のデザインシステム刷新支援｜株式会社ニジボックス

各フローの具体的な内容など、詳細は以下のニジボックスの実績サイトで紹介しています。ぜひご覧ください。

ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援を行っております。

また、上記で紹介したようなAI活用を見据えた技術検証やAI活用支援も行っております。

お気軽にご相談ください！

▼問い合わせ先

▼ニジボックスが担当したデザイン・開発実績一覧

【参考】ニジボックスの書籍『Figmaではじめるデザインコラボレーション』

ニジボックスでは書籍『Figmaではじめるデザインコラボレーション』を出版しています。

書籍ではコラボレーションツールとして『Figma』を活用し生産性を向上させるための手法を紹介しています。高速なデザインの設計・検証や、効率的にエンジニアと連携できるデザインの実装など業務に役立つ内容が詰まっていますのでぜひ参考にしてください。

『Figmaではじめるデザインコラボレーション』

株式会社ニジボックス 著

技術評論社 商品ページ

また、出版記念イベントの内容を紹介した記事もございますのでぜひご覧ください。本記事では、『Figma』を単なるデザインツールではなく「プロセスを共有するプラットフォーム」として捉え直し、その活用方法を組織設計という領域にも踏み込んだ形で解説しています。

Figma AIを活用するときの注意点

『Figma』は便利なツールですが、利用にあたってはいくつか注意しておきたいポイントもあります。ここでは、『Figma AI』の使用において特に気をつけるべき点を見ていきましょう。

セキュリティとプライバシーの管理

AIを利用する際には、情報セキュリティへの注意とプライバシーの管理が重要な課題となります。『Figma AI』も例外ではなく、何気なく入力したデータが意図せずに流出したり、セキュリティの脆弱性をついて外部から侵入されたりと、さまざまなリスクが想定されます。

そのため、まずは『Figma』のプライバシーポリシーに目を通し、どのようなリスクが考えられるのかをきちんと把握しておきましょう。そのうえで、機密情報や個人情報を含むデータは基本的に使用せず、取り扱う場合には細心の注意を払わなければなりません。

特に、クライアントのプロジェクトを扱うときには、トラブルの可能性を踏まえて、事前に了承を得ておくとよいでしょう。また、社内で『Figma AI』を導入する場合は、利用に関するルールを定めておくことも重要です。

著作権や知的財産権の侵害リスク

AIが生成したデザインや画像については、著作権や知的財産権の部分でまだ線引きがハッキリしていないケースも多いです。AIで生成したものを使用する権利はユーザーにあるとされているものの、使い方によっては法律に抵触するリスクがあるとともに、社会的な信用を損なう恐れもあります。

『Figma AI』で生成したものを商用利用する際は、法的に問題がないかをあらかじめ確認しておくことが大切です。

デザインの均質化

生成AIは高い利便性を備える一方で、アウトプットの均質化によって独自性が失われるリスクも考えられます。

特にWebサイトやアプリといったユーザーの目に直接触れるポイントは、他と同じようなデザインにならないために差別化する工夫が必要です。そのためには、デザインの知識やスキルの基本をきちんと身につけたうえで、『Figma AI』が生成したものを多角的に評価できる視点を養い、最新情報をキャッチアップしながら適切に利活用してゆく必要があるのではないでしょうか。

まとめ

『Figma』は2016年にリリースされたデザインツールであり、デザイン制作のさまざまなシーンで活用されてきました。2025年にAIが搭載されてからは、さらに使いやすさが向上し、ノンデザイナーの方にも利用しやすくなったと思います。

『Figma AI』を活用することで、「プロンプト指示によって、スピーディーにイメージを作成し、共有する」「ノンデザイナーが求める画像素材のイメージを、テキストによる説明のみでドラフトイメージとして生成してもらう」といった多様な使い方ができるようになると思います。社内のデザイン作業を効率化する選択肢として、導入を検討してみてはいかがでしょうか。

ニジボックスについて

ニジボックスでは、幅広いAIサービスの利活用を研究し、企業のAI活用を総合的に支援しております。AI技術をどのようにビジネス成果へ結びつけるかお悩みの際は、下記バナーより資料をダウンロードのうえ、ぜひご覧ください。

個別課題のご相談窓口

みなさま固有の課題や、AI導入の具体的なフェーズに合わせたご相談を承っております。
具体的な相談内容が決まっていなくとも構いません。お気軽にお声がけください。