【Figma Make】Figma Makeでグラデーションジェネレーターを作る

Figma Makeで何か作ってみたい！

Figma Makeで何か作ってみたい！と思ったのでグラデーションジェネレーターを作ります

最後の方に、Figma Makeを触った感想をまとめているので、急いでいる人はそこだけでもみてください

まず、作りたいものを指示する

Figmaを開いて、右上にFigma Makeを選ぶところがあるので、そこから遷移しました
File -> New Tab からもFigma Makeを選べます！

Figmaのプランによっては表示が異なる場合があります

Figma Makeの画面にうつると以下のような画面になります
Start from an exampleから選ぶと、他の人が作成したものを見ることができます
チャットの履歴も見ることができるので、指示の参考に良いかもしれません！

最初は細かく考えずに、こんな感じで指示してみました

グラデーションを自由に生成できるものを作りたいです
- デフォルトのポイントは四隅に1箇所ずつ色を選べる場所がある
- 1色テーマカラーを決めても作れるし、4箇所色を調整することもできる

すると、数分で以下のような出力をしてくれました。すごい。
色を変更できたり、テーマカラーから割り当ててくれたり機能も問題なさそうです

追加で指示していく

下記の点を、もう少し工夫したいなと感じたので、一つずつお願いしていきます

• 「カラーポイント」について
  • 真ん中にもポイント欲しい
  • 移動ができるようにもしたい
  • 追加・削除できるようにしたい
  • 移動をリセットする機能も欲しい
• 「テーマカラーから生成」
  • いくつか候補の色を置いて、選べるようにもしたい
    • 選んだ後で色の調整もできるようにする
• 「CSSコードをコピー」ボタンはCSSのところに置きたい
• デフォルトのグラデーションが綺麗じゃない

カラーポイント

下記をそのままチャットで投げてみました

- 「カラーポイント」について
    - 真ん中にもポイント欲しい
    - 移動ができるようにもしたい
    - 追加・削除できるようにしたい
    - 移動をリセットする機能も欲しい

こんな感じで生成してくれました

機能自体は追加されていて良さそうですが、四隅のポイントの位置が選択しづらい位置になっています。
また、カラー調整のセクションに、必要ないラベル欄が追加されています。
指示していないものもよしなに追加してくれちゃうようです

上記を解消してもらうために、以下の指示をします

- 四隅のカラーポイントの位置は当初のデフォルト位置に戻して欲しい
    - 端に寄りすぎて選択しづらい位置になっている
- カラー調整のセクション
    - ラベルは必要ないので、削除して
    - 位置: X: xx%, Y: xx%も必要ないので削除して
    - デフォルトの5色は、スクロールせずとも見えるようにしたい
        - 今だと4色目以降は隠れている

カラー調整セクションで、デフォルトである5つのポイントについては、スクロールせずとも見えてほしいのですが、5色目はまだ若干隠れています。

「高さを調整して、表示は5色目のコンテンツ全てが見えるようにして」と明確にどこまで表示して欲しいか送ると、高さを修正してくれました

テーマカラーから生成

下記をお願いしてみました

- 「テーマカラーから生成」
    - いくつか候補の色を置いて、選べるようにもしたい
        - 赤、オレンジ、黄、黄緑、緑、水色、青、紫、ピンク
        - 選んだ後で色の調整もできるようにする

すると、カラーを選べるようにしてくれました、まだ以下の点が気になるので指示してみます

• カラー候補を選択した時点でグラデーションを生成してほしい
• カラー候補の色を基準にして、同じ色相でグラデーションを生成して欲しい
  • カラフルではなく、赤なら赤のグラデーション

「CSSコードをコピー」ボタンはCSSのところに置きたい

以下をお願いしました

- 「CSSコードをコピー」ボタンはCSSのところに置きたい

CSSセクションに追加して、プレビューから削除してくれました

一発ではなく、複数回指示をしました
お願いしたかったのは以下の意図だったのですが、

• CSSセクションにコピーボタンを追加する
• プレビューセクションからコピーボタンを削除する

最初の指示では明確に以下の処理を指示できていなかったため、プレビューセクションにコピーボタンが残っていました

やりたいことは段階的＋明確に言ってあげたほうが、指示の回数が減る

また、日本語だと修正して欲しい箇所がうまく伝わらない場合があるので、生成してくれたCodeを参照して指示するとより正確な指示になりそうです

デフォルトのグラデーションが綺麗じゃない

URLを参照して、参考にしてくれるのかはわかりませんが一旦試してみます

- デフォルトのグラデーションが綺麗じゃない
- この辺の記事を参考にして綺麗にしてほしい
    - https://qiita.com/degudegu2510/items/d529ccb82276619d3f5e
    - https://photoshopvip.net/127675

かなり良くなった！！すごい。
Reasoning（AIが思考してる部分）を見ると、URLを参考にしてくれていそうです

完成！

ファイル容量の関係で、画質悪いですが...
こんな感じに作ることができました！コードは一切触ってません！！

添付した画像やURLを参考にしてくれるのが個人的に発見でした

Figma Makeを触った感想

• 雑なプロンプトでもいい感じに作ってくれる
• ただ、細かい調整は段階的＋明確に言ってあげたほうが良い
  • クレジットも限られているので、指示の回数は少ない方が良い
• 画像や参考URLを渡すと、参照してくれる
  • 本格的にサイトを作る場合、実装方針やアクセシビリティの参考など渡すと良さそう
  • MCPも活用できる

アドカレ2025が開催中！

今年もアドカレ開催中です
最終日まであとちょっと...！！！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓