Data Driven Knowledgebase

Figma Makeとは、2025年7月24日にリリースされたFigmaの新しいAI機能です。最大の特徴は、自然言語（日本語にも対応）で指示を出すだけで、デザインから実際に動作するフロントエンドのコード（React + TypeScript）までを自動で生成してしまう点にあります。

これまでデザイナーが作成した静的なデザイン（見た目）を、エンジニアがコードに書き起こしていましたが、Figma Makeはその間の工程をAIが担います。これにより、アイデアを瞬時に「動く形」で確認でき、開発プロセスが劇的に高速化します。

AI機能の心臓部

Figma Makeの頭脳として、現在はAnthropic社の高性能AIモデルClaude 3.7 Sonnetが採用されています。(https://www.figma.com/ja-jp/blog/introducing-figma-make/)

UIは非常にシンプルで、左側にAIとのチャット画面、右側に生成されたデザインやプレビューが表示されます。タブを切り替えれば、生成されたReactコードを直接確認・編集することも可能です。

Figma Makeは特別なインストールは不要で、Figmaの有料プランに含まれる形で提供されます。

料金は日本円に対応しており、Figma Makeの全機能を利用するには、「フルシート」という権限での契約が必要です。

(https://www.figma.com/ja-jp/pricing/)

※Starter（無料）プランでもドラフト内で機能を試すことは可能です。

※AIの利用にはプランごとに「AIクレジット」が付与されるクレジット制が導入されています。

Figma Makeは従来のFigma（Figma Design）とどう違うのでしょうか。連携時の注意点と合わせて解説します。

最大の違いは、生成されるものが「デザインデータ」か「コード」かという点です。

・Figma Design: 見た目のデザインデータを作成するツール。プロトタイプは画面遷移のスライドショーであり、「ハリボテ」の状態。

・Figma Make: TypeScriptで生成された「コードネイティブ」な、実際に動作するアプリケーションを作成するツール。

Figma Designとの連携方法と注意点

既存のFigmaデザインをFigma Makeで活用することも可能です。AIへの指示（プロンプト）を出す際に、Figma Designで作成したFrameやImageをインプットとして渡すことができます。

⚠️ 注意点：レイヤー名の重要性 ただFrameを貼り付けただけでは、AIはその部品が「何なのか」を正確に認識できません。例えば、四角いシェイプのレイヤー名を「submit-button」のように具体的に命名しておくことで、AIが「これはボタンだな」と理解し、クリック時の動作や適切なアニメーションを自動で実装してくれるようになります。

逆に、Figma Makeで作成したデザインを従来のFigma Designにデザインデータとして移すことはできません。 これは、両者の作られている技術的な土台が全く異なるためです。

Figma Makeの操作は非常に直感的です。

・サイト全体の生成: 「ECサイトを作成して」のように指示するだけで、AIが自動でレイアウトやコンポーネントを生成します。デモ用の画像が必要な場合は、FigmaのUnsplashプラグインから自動で画像を取得・配置してくれます。

・画像の差し替え: 差し替えたい画像をプロンプト欄にアップロードし、指示を出すだけで簡単に入れ替えられます。

・ピンポイント修正: コンポーネントを選択するとメニュー右端に表示される矢印とコードのアイコンをクリックすれば、該当部分のコードに直接ジャンプし、手動で編集することも可能です。ジャンプ機能が対応していないコンポーネントも存在します。

・テキスト編集: テキストは、デザイン上で直接内容やスタイルを編集できます。

Supabase連携で本格アプリ化

Figma Makeだけでも素晴らしいツールですが、Supabaseと連携することで、さらに本格的なアプリケーションを開発できます。

Supabaseは、データベース、認証機能、ストレージなどを提供するBaaS（Backend as a Service）ツールです。この連携により、以下のような機能が実現できます。

・ユーザーログイン機能

・「いいね」やお気に入り登録など、ユーザー操作の情報を保存

・投稿フォームからデータベースへのデータ保存

例えば、Figma Makeだけでは「いいね」ボタンを押しても、ページを再読み込みすると消えてしまいます。しかしSupabaseと連携すれば、誰がどの商品に「いいね」したかの情報を保存できるようになるのです。

連携は非常に簡単で、Figma Makeのファイル設定からSupabase連携を選び、ガイドに従うだけです（事前にSupabaseのアカウント作成は必要）。ちなみに、Figma Makeでファイルを作成して作業を始めると、Supabaseに接続しませんか？のように連携を促してくれます。

「こういうデータベースを作って、このようにデータを取得・反映して」といった指示も自然言語で行え、AIが必要なコードを生成してくれます。

最後に、Figma Makeのメリットと、現時点での課題をまとめます。

長所

・正確なコード生成: コンポーネント単体からレイアウト、アニメーションまで、一度に正確かつ大量のコードを生成できます。

・リリース可能な品質: 生成されるのは「ハリボテ」ではなく、そのままリリースも検討できるフロントエンドコードです。

・大量のコード管理能力：膨大なコードベースを生成した後も、プロンプトで箇所をわかりやすく指定してして指示を出せば該当部分を変更できる。

・巻き戻し機能: 生成したデザインはバージョン管理されており、ワンクリックで前の状態に戻せます。修正不可能なエラーが発生した際も安心です。

短所

・待ち時間の発生: 複雑な修正や大規模な変更を指示すると、AIがコードを再生成するために5分〜10分程度の待ち時間が発生することがあります。

・コード品質の課題: 生成されるコードには、冗長な部分やハードコーディングされている箇所が見られる場合があります。本番環境でそのまま使うには、エンジニアによるリファクタリングが推奨されます。

・文字化け: 時折、原因不明の文字化けが発生することがあります。

Figma Makeは、デザイナーとエンジニアの境界線を曖昧にし、ものづくりのプロセスを根底から変える可能性を秘めた革命的なツールです。特に、新規事業のプロトタイピングや、社内ツールの高速開発といった場面で絶大な効果を発揮するでしょう。

まだいくつかの課題はありますが、その圧倒的なスピードと性能は、一度体験してみる価値があります。ぜひFigmaの有料プランを契約して、未来のデザインと開発の形に触れてみてください。