🎆

Claude Code+FigmaMCPより正式サービスした「Figma Make」がFigmaデザインの再現はよい（個人の感想）

に公開
AI
Figma
ai活用
Figma Make
idea

一番最初に

「ごめんね、出せるデザインがないこととデザイン能力なくて 記事内にClaudeCode+FigmaMCPとFigmaMakeでの比較はないんだよ！ 」

見事に体調崩してました
FigmaMakeのベータ版が終わって正式サービスになりました。
ベータのころから触っていました。特にデザイナさんに依頼しずらい金額で受注せざる得ないような状況ではとても重宝しました。

既にZenn記事はありますが、リハビリのため記載しましたので正直記事の内容は微妙です。

結論：「Figma Make」ってなに？

AIプロンプトベースでデザイン作ってくれるサービスだよ！

Figmaに親和性が高いので、ClaudeCode等でデザインするよりもかなりスタイリッシュなデザインができます。
デザイナーさん入れれない環境だとかなり重宝します。
また、人間に依頼しないでプロンプトベースで、クレジットの範囲内ですが、 リテイク何度も依頼 できるのは精神衛生的に良いのです。

今、ニケちゃんががんばってましたｗ
ふつうにすごい
https://x.com/tegnike/status/1952712608424882570

25/07/25にリリースされた Figma Make

風邪ひいている間にリリースされていました
ベータのころは、FigmaMakeのモデルは「Anthropic社」の「Sonnet4」で、ぶん回し放題でした。

リリース後は、クレジットベースになっています。また、モデルも表示はおろか選択もできないようになっています。

とりあえず使う場合は、3000円のプランからできます
1日の1ドリンク我慢するくらいで、依頼できちゃう

25/08現在の価格表

  • 年払い
  • 月払い

正しくはこちらの価格表を参考ください

Figma Makeで出来ること

FigmaMakeの全体画面はこんな感じです（だーくもーど

プロンプトベースでのデザイン構築

前述の通り、プロンプトベースでデザインができます

Figmaで作ったデザインをページ化

Figmaで作ったデザインを基にプロンプトを記載して、実装ができます
個人的には、ClaudeCode等でMCP経由で実装するよりもきれいに仕上がってくれます。さすが。
ただ、実装内容は正直なところ、うーんと思うこともあります
デザインの再現性をとるのであればFigmaMakeというのが個人的な印象です

Supabaseと連携

まだ触り切れていませんが、バックエンド部分をFigmaに任せて作成したデザイン内容のWebアプリをそのままリリース出来るようです。データ登録する際に、SupabaseをDBとして利用できるみたいです
今のところ使う機会がないですが・・・

Figmaの他のプロダクトとの連携

Figma Sitesと組み合わせれば、Webサイトのカスタマイズからテスト、Figma Sitesで作ったフレーム内容に対してFigmaMakeで動きを付けたりできます
https://player.vimeo.com/video/1081920655?h=c8af8fffff&title=0&byline=0&portrait=0&playsinline=0&muted=1&autopause=0&loop=1&app_id=122963

ともかくとして、Figmaだけでサイトが作れちゃう

デザイナーさんとしてもとてもうれしいですね
得意にインタラクティブな内容をいままではスクリプトが・・・と断念していたデザイナーさんもプロンプトで組み込みやすくなりました
最終形態ではなくとも、開発者側へ大体の動きを見せるデザインを作るのにはとても効果的かなと思っています

インタラクティブの内容は、開発者側とのキャッチボールが多くなりがちなので嬉しいですね

よくわからんけど作ってみたい人向けの話

ここからは、FigmaMakeのチュートリアルです
以下のようなものが作成できます。
なんかデザインっていうか普通にコーディングされてて笑う

  • データダッシュボード（都合上、縮小しています）
  • 8bit Game（Snake Gameつくってくれましたｗ）

データダッシュボードを作ってみる

Figmaにログインをしている必要があります

  1. 以下にアクセス
    https://www.figma.com/ja-jp/make/new
  2. 「何を作りたいですか？」から「データダッシュボード」をクリック
  3. あとはまつだけ

8bit Gameを作ってみる

  1. 以下にアクセス
    https://www.figma.com/ja-jp/make/new
  2. 「8bit Game」とプロンプトを入力して実行
  3. あとはまつだけ

Figmaのデザインから起こす作業は！？

はい、お見せしていいデザインが今手元に無く、わたしのデザイン能力では残念なデザインしかつくれませんでした！！！！

おわりに

もうなんか、作ってみるっていうか指示出してるだけじゃん！わたし！

とはいえ、色々なデザインツールがありますがFigmaを利用されている現場は多いのではないでしょうか？そのなかの、1つの候補としていかがでしょうか？

みなさん風邪には気を付けてくださいね

Discussion