webデザイナーではないけれど、自分のサービスの画面デザインを作りたいと思ったことありませんか？
Figma Makeは、そんな初心者でも簡単にデザインを作成できる機能です。
Chat GPTなどの生成AIサービスのようにプロンプトを入力するだけで、配色や余白が調整されたweb画面を自動生成できます。
Figma Makeを使えば、非デザイナーがプロのようなデザインを作れるので、エンジニアの転職活動で使うポートフォリオ作りやwebアプリ、モバイルアプリ開発業務の効率化に絶大な貢献をすることでしょう。
初心者でもプロのようなデザインを簡単に作れるってほんと？
本当だよ。初心者向けに使い方を解説するね。
Figma Makeとは
概要
Figma Makeは、Figmaの中にあるWEB画面を人間の言葉を元に作ってくれる機能です。
通常Figmaは自分で図形やテキストを配置して作るスタイルですが、Make機能を使うと、Chat GPTなどの生成AIサービスのようにプロンプトを入力するだけで画面レイアウトを生成してくれます。
つまり、デザイン初心者でも「それっぽい画面」がすぐに作れるということです。
例えば、ログイン画面を作ってくださいというプロンプトを投げるだけで、それっぽいデザインのログイン画面をhtml、JavaScriptまで実装した状態で出力してくれます。
料金
2025年9月時点は無料プランのユーザーも使えますが、Figma Make FAQによると今後は有料会員限定の機能になるとのことでした。
Figma Makeで出来ること
- UI部品の生成
- web画面の生成
- 生成したアウトプットの修正
- 生成したアウトプットをReact.js形式のソースコードでダウンロード
- 生成したアウトプットをFigmaのデザインファイルの形式でダウンロード
- など
例) お問い合わせフォームを作ってくださいと入力した場合
初心者向け操作手順
本記事ではFigmaへログインするところから、デザインを生成し、修正するところまで初心者向けに丁寧に解説させて頂きます。
Figmaへログイン
Googleアカウントまたは、メールアドレス、パスワードを使ってログインしてください。
アカウント未登録の方は「アカウントを作成してください」から登録をお願いします。
ホーム画面上部から「Make」を選択する
画面右上の「Make」ボタンをクリックしてください。
Figma Makeの画面へ遷移
画面中央のテキストボックスにChat GPTなどと同じようにプロンプトを入力することができます。
デザインの生成
プロンプトを入力するとデザインが生成され、実際のweb画面のように入力などのアクションを通じて仕様を確認することができます。
生成されたデザインを変更する
画面左下のテキストボックス内の「ポイントして編集」というボタンを押すと編集モードになります。
編集モードで生成されたデザインをクリックすると、色やフォントなどクリックしているオブジェクトの何を編集するのかを選択することができます。
ボタンの背景色と文字色のみを変更することができました。
プロンプトでの指示も出来ますが、「ポイントして編集」を使用することでより正確で細かい修正が出来そうです。
Figma Makeの活用例
- エンジニアの転職用、案件獲得用ポートフォリオ作成
- webアプリ、スマホアプリのフロントエンド開発業務の効率化
- 受託開発での顧客との成果物イメージの共有
など
まとめ
- Figma Makeを使えばデザイン初心者でも「それっぽい画面」がすぐに作れる
- 料金について、現在は無料で使えるが今後は有料会員限定の機能になる
- デザインの生成はChat GPTなどの生成AIサービスと同じような簡単な操作で扱うことができる
- デザインの修正は、「ポイントして編集」機能で直感的に細かく、正確にすることができる
コメント