Figma make の基本的な使い方と活用方法3選
はじめに
僕は、個人開発が好きでアプリをよく作っています。しかしデザイン作成の経験がないので、UI 作成に時間を取られた上、結局「あまりイケテナイUI」を作るしかありませんでした。
しかし Figma make を利用すると、この課題を解決することが出来ます！
僕自身、個人開発ではありますが、UI の作成・修正やメンテナンス効率が上がりました。
この記事では、「Figma make の基本的な使い方」と「実践している活用方法」について紹介させて頂きます！
Figma make に関しての基本的な使い方
アプリの起動方法
FIgma の新規ファイル作成画面から、make を選択します。
その後、下記画面が出てくるので、作成したいアプリのプロンプトを入力すると、アプリを作ってくれます。
今回は、「ToDo アプリを作って！」を入れてみます。
作成された結果が下記になります！
作成したアプリを編集する方法 3選
プロンプトで指示を与えて編集してもらう
日本語でプロンプトを入力して、デザイン編集の指示を与えることが出来ます。
今回の場合は「青色のテーマに修正して」と伝えてみます。
結果、無事にデザインのテーマを変更することが出来ました。(前の方が良かっ…)
要素を選択して修正させる
特定の要素を選択した上で、上記のメッセージを入力して修正すると、要素をしていた上で、修正をさせることが出来ます。
今回の場合は、「タスクの入力部分を、よりスマートにして」と伝えてみます。
まずは、左下の「ポイントして編集」をクリックして…
入力部分にFocusを当てて、クリックします
すると、左下に選択された要素が含まれていることが分かります。
その上で、「タスクの入力部分を よりスマートにして」と伝えてみます
その結果、特定要素の修正ができました、スマートになりましたね（？）
要素のスタイルを直接編集可能
特定の要素を Figma make で選択した上で、文字色などを直接変更するとが出来ます
ここでは、文字の太さを変更してみたいと思います。
先ほどと同様に、左下の「ポイントして編集」をクリック後、編集したい要素をクリックします。
その後、下にあるプロパティを編集してみます。
文字が太くなったことが確認できました。
スクリーンショット・既存デザイン内容の添付方法
次に、スクリーンショットと既存デザインの添付方法についてお伝えします。
左下の プラスアイコンをクリックして、「デザインを添付」・「画像をアップロード」をクリックして、添付したいデザインや写真を貼り付けることで、添付できます。
ここでは、デザインファイルの添付方法を紹介します！
別のFigma ファイルに存在するデザインをコピーします。
その後、前の画面に戻った上で、左下のプラスアイコン、デザインを添付、の順にクリックしてください。
すると、下記の画面が表示されると思います。
では、先ほどのデザインを貼り付けてみます。
無事に、プロンプトにデザインが含まれました。
では、メモのアイコンを僕のXのアイコンに変更します。
無事に変わりました。
Figma makeで作成したアプリを Figma デザインファイルにコピペする方法
右上の「デザインをコピー」の欄をクリックした上で「コピーする」をクリックすると、コピーできます。
その上で、実際のデザインファイルの画面で、ペーストすると貼り付けることが出来ます。
右上の「デザインレイヤーとしてをコピー」をクリック後、「デザインをコピー」を押してください。
その後、「コピー」ボタンを押すと、「コピーされました」と文言が表示されます。
その上で、別のデザインファイルに移動して貼り付けると、無事にデザインファイルとしてインポート出来ました！
デザインの出来は最高ですね！
Figma make の 振る舞いをカスタマイズする方法
Figma make では、他のコーディングエージェントのように、Guidline.md に指示を入れることで、特定の振る舞いをさせることが出来ます。
コメントアウトされているサンプルの中には、作成するデザインのスタイリングなどの指示の例が書かれています。
今回は、「青色ベースのアプリケーションを作成して」と入力した上、再度 ToDo アプリを作成してもらいます。
新規 ファイル作成画面の右上にある、「ガイドラインを調整」をクリックしてください。
その上で、プロンプトの指示を入れます。
完了を押した後に、先ほどと同様に「ToDo アプリを作って！」と入れると、青色のアプリが作成されました。
AI からの返答にも 「青色ベースのToDoアプリケーションを作成します」とあるので、無事に伝わっていることが分かります。
先ほどの画面よりもスマートな気がするので、デザインの方針が大きく変わる場合は、初めから作り直した方がいいかもしれないですね。
余談ですが、Guidline.md は作成途中でも変更することが可能です。
画面中央上部の「コード」タブをクリックすると、今のソースコードを確認できます。
その中にある「guidelines/Guidelines.md」ファイルに、先ほど定義した内容があるので、ここを編集してください。
他のファイルも編集できるので、ここでロジックも組めます✨
参考までに、ガイドラインのリンクも貼っておきます。
https://help.figma.com/hc/ja/articles/33665861260823-Figma-Makeにガイドラインを追加する
GitHub・Supabase連携
右上の歯車アイコンから、GitHub や Supabaseとの連携ができます！
Figma make 特有の手順は特にないので、指示に従って進めてください。
参考までにURLを貼っておきます。
https://help.figma.com/hc/ja/articles/32640822050199-機能的なプロトタイプまたはWebアプリにバックエンドを追加する
参考) Figma の基本的な使い側
Figma を普段使われてない方には、下記の記事がオススメです！
ショートカットも紹介されていて、とても重宝しています！
また、既存のデザインファイルを変更する際は、事前にコピーしてバックアップを作成しておくと、リカバリーが効きます！
個人開発でデザインを作成して感じた課題 と 解決のための活用方法
「軽微なデザイン修正→ 問題ないか確認」を迅速に行いたい
AI を使って UIを作成する場合、大まかなデザインやプロトタイプの作成は得意です。しかし「細かいスタイルを修正させる」場合は、プロンプトを工夫したり何度もやり取りする必要があり、それでも上手く修正できないことが多いです。これは、AI だけでなく「人が修正する場合も同じ」かなと思います。
つまり、コードを操作してスタイルを修正する場合は、AI を用いたとしても工数がかかる…という問題が発生していました。
しかし、Figma ファイルを編集する場合は、1px 動かす時の手間が少ないので、素早く修正 → 確認のサイクルを回して、トライエラーを繰り返せます。
複数のスタイル比較・現在のスタイルのスナップショット取得
実装を一度修正すると、元の画面は表示されません。もちろんスクリーンショットを撮るなどの工夫はできますが、手間がかかります。
つまり「どちらのスタイルが良いかな？」を比較するのが難しいです。
Figma ファイルの場合は、簡単にデザインファイルをコピペできるので、バックアップを簡単に作成できて、かつ修正前と後を比較するのも容易です。
また「スタイル修正時に別の箇所でスタイルがデグレしていた」としても、元々の正解の画面がないので、デグレしたかどうか？の確証も持ちにくいです。
ここで、画面スクショから Figma ファイルを作成しておけば、当時の画面のバックアップを取れます。もちろん、削除するまでは消えません。
共通利用したいコンポーネントの見極め
「どの画面に、何のコンポーネントが使われているか？」
ここが把握できていないと、「コンポーネントを共通化するべきか？」の判断が出来ません。またコンポーネントの共通利用も難しくなります。
もしFigma makeを利用せずに「手作業で各画面のFigma ファイルを作成」する場合、かなりの工数がかかります。
しかし、FIgma make を使うと「写真のスクリーンショットを添付して作成させるだけ」で、完成度の高い画面を作成してくれます。これにより、少し調整する工数だけで、「全画面のFigma ファイル」を作成できて、共通利用したいコンポーネントを洗い出せるようになります。
まとめ
Figma make は、個人開発者にとって非常に強力なツールです。デザインが苦手な人や、1から全てのデザインを作成するのも、慣れていないと時間がかかるものであり、ここを簡単に作成させて貰えるのは、非常にありがたいなと思います。
デザインが苦手で個人開発に足踏みしてる方がいれば、ぜひこの機会に挑戦してみてほしいです！
FIgma make は、無限の可能性や使い方があると思います。他にもいい活用方法があれば、ぜひ教えて頂きたいです！
Discussion