Figma Makeとは？AIでデザインから実装まで進める方法

Webサイトやアプリのアイデアを形にするには、画面設計、デザイン、コーディングといった複数の工程が必要です。Figma Makeは、こうした制作工程をAIで効率化し、自然言語の指示から操作できるプロトタイプやWeb画面を生成できるツールです。

この記事では、Figma Makeの特徴や主な機能、導入方法、基本的な使い方を紹介します。利用条件や提供機能は更新される場合があるため、実際に導入するときはFigma公式の最新情報も確認してください。

Figma Makeとは

Figma Makeは、Figmaが提供するAI搭載の制作ツールです。「商品一覧とカートを備えたECサイトを作って」「入力内容を確認できる予約フォームにして」のように文章で指示すると、AIが画面とコードを生成します。

一般的なFigmaのデザインファイルは、画面の見た目や遷移を設計することが中心です。一方、Figma Makeではボタン操作、フォーム入力、画面の切り替えなどを含む、動作する成果物を作れます。静的なデザイン案から、操作を試せるプロトタイプまで短時間で進められることが大きな特徴です。

ただし、AIが完成品をすべて自動制作するというより、利用者が指示と確認を繰り返しながら品質を高めるためのツールと考えるのが適切です。

チャット形式で作りたいものを説明すると、内容に沿った画面が生成されます。レイアウトだけでなく、見出し、ボタン、カード、入力欄などのUI要素もまとめて作成できます。

「明るい配色に変更する」「スマートフォン向けに整える」など、追加の指示で修正できるため、最初から詳細な仕様を一度に入力する必要はありません。

新規の指示だけでなく、既存のデザインや選択したフレームを制作の文脈として利用できます。すでに作成したデザインを動かしたい場合や、ブランドの雰囲気を保ちながら機能を追加したい場合に便利です。

タブの切り替え、モーダルの表示、フォーム入力、ボタンを押した後の変化など、利用者が操作できる振る舞いを生成できます。見た目だけでは伝わりにくい操作感を、早い段階で検証できるのが利点です。

生成結果はプレビューで確認し、会話を続けながら調整できます。環境や権限によってはコードを確認・編集できるため、AIへの指示だけでは直しにくい細部を調整することも可能です。

Figma Makeを始めるには、まずFigmaアカウントが必要です。ブラウザ版またはデスクトップ版のFigmaにログインし、ファイルブラウザからFigma Makeを開きます。

Figma Makeの利用可否や生成回数などは、契約プラン、シート、組織の設定、提供地域によって異なる可能性があります。メニューに表示されない場合は、管理者設定や公式の料金・提供状況を確認しましょう。導入前に利用できるプランとAI機能の使用条件を確認することが重要です。

最初のプロンプトには、制作物の種類、対象ユーザー、必要な画面、主な機能、デザインの方向性を含めます。たとえば、次のように指示します。

「初心者向けオンライン講座の申込ページを作成してください。上部に講座の特徴、中央に料金プラン、下部に申込フォームを配置し、青を基調とした信頼感のあるデザインにしてください」

生成後は、一度に多くの変更を求めるのではなく、目的ごとに指示を分けます。

「おしゃれにして」ではなく、対象ユーザーや必要な動作まで具体的に伝えると、意図に近い結果を得やすくなります。参考にするFigmaデザインがある場合は、対象のフレームやコンポーネントも明確に指定しましょう。

Figma Makeは、アイデア検証、社内デモ、ユーザーテスト、簡易的なWebツールの試作に向いています。一方、生成された内容を確認せず、そのまま本番環境で使用するのは避けましょう。

特に、次の項目は人による確認が必要です。

AIが生成した画面は、一見すると完成しているように見えても、例外的な操作への対応やアクセシビリティが不足している場合があります。また、機密情報や本物の顧客データをプロンプトへ安易に入力しないことも大切です。本番公開の前には、コード、セキュリティ、表示、操作性を必ず検証してください。

Figma Makeは、自然言語とFigmaのデザインをもとに、操作可能なWeb画面やプロトタイプを生成できるAIツールです。デザイナーは動作を含む提案を作りやすくなり、エンジニアは実装前の要件確認を効率化できます。

まずは小規模なランディングページやフォーム、管理画面などを題材にして、生成と修正の流れを試してみましょう。AIに任せきりにせず、目的を明確にした指示と人による検証を組み合わせることが、Figma Makeを効果的に活用するポイントです。