Figma Makeで高機能な試作を作る方法

TL;DR

テキストや画像、FigmaのデザインデータをFigma Makeに渡すと、動的な操作を備えた試作品を短時間で形にできる。外部APIやMCP、GitHub連携も活用でき、アイデア検証から開発への受け渡しまでを効率化できる。

Transcript

で は 皆 さ ん 、 今 日 は ご 参 加 い た だ き あ り が と う ご ざ い ま す 。 今 日 は Made with Figma Make ク リ エ イ タ ー が 語 る 制 作 の プ ロ セ ス と い う こ と で 、Figma Make の 概 要 だ け じ ゃ な く て 、 今 回 は 実 際 Figma Make で 作 品 を 作 っ て い た だ い た お 二 人 、 特 に 今 回 は 11 月 冒 頭 に figma の キ ャ ン ペ ー ン で 渋 谷 の ス ク ラ ン ブ ル ス ク ラ ン ブ ル 交 差 点 の 広 告 の と こ ろ で Figma Make の 作 品 を 流 さ せ て い た だ い た ん で す ... Read More

Key Insights

• Figma Makeは、テキストプロンプトを入力するだけで、操作可能なアプリケーションや試作品を生成できるAI関連製品である。
• Figmaのデザインデータは、プロンプトと組み合わせることで、構造や見た目の再現性が高いアプリケーションの生成に利用できる。
• 画像入力は、手書きのスケッチや漠然とした絵を出発点として、テキストによる指示を加えながら形にする方法である。
• 動的な試作は、クリック後の絞り込みや価格帯に応じた一覧更新などを、紙芝居的な画面パターンを大量に作らず実現できる。
• 外部APIの利用は、端末のカメラを使う試作や、Mapboxを用いたデリバリーアプリ風の地図機能を組み込む手段である。
• Make for MCPは、Figma MakeのURLをAIエージェント側へ渡し、コードの取得やReactコードへの置き換えを指示できる仕組みである。
• GitHub連携は、Figma Make専用の新規リポジトリを作成し、生成されたコードを送って開発工程へ受け渡す方法である。
• Make Connectorsは、Notionなどの外部サービスに接続し、要件定義の参照や、権限に応じた外部ツールへの書き込みを可能にする機能である。

Questions & Answers

Q: Figma Makeとは何ですか？

Figma Makeは、テキストプロンプトからアプリケーションや操作可能な試作品を作れる、FigmaのAI関連製品です。Figmaで作成したデザインデータも指示と一緒に渡せるため、レイアウト構造、色、余白などを反映した再現性の高い成果物を生成できます。

Q: Figma Makeでアイデアを試作する方法は？

まず、作りたい体験や機能をテキストプロンプトとして入力します。構想が曖昧な段階でも開始でき、手書きのスケッチや参考画像があれば、それらを追加して再現を指示できます。動く結果を確認しながら修正を重ねることで、アイデアを段階的に具体化できます。

Q: FigmaのデザインをFigma Makeで再現する方法は？

Figmaデザイン側で作ったフレームをコピーし、Figma Makeへ渡してプロンプトと組み合わせます。単なる画像とは異なり、オートレイアウトの構造、色の値、余白のルールなどを反映しやすいため、元のデザインに近いアプリケーションを作成できます。

Q: Figma Makeで動的なフィルターを作る方法は？

クリックした際に有効にしたいフィルターの動作を、テキストで具体的に指示します。たとえば価格範囲に応じて商品一覧を更新するよう依頼すれば、複数の画面状態を手作業で用意するのではなく、実際のアプリケーションに近い動的な絞り込みを実装できます。

Q: Figma Makeで外部APIを使うと何が作れますか？

端末のカメラAPIを利用する試作品や、外部の地図APIを組み込んだアプリケーションを作れます。紹介された例ではMapboxを使い、地図を備えたデリバリーアプリ風の試作品が作られていました。3D系ライブラリを利用したインタラクティブな表現にも応用できます。

Q: Figma Makeのコードを開発へ渡す方法は？

コードをダウンロードする方法に加え、Make for MCPを通じてMakeのURLをAIエージェント側へ渡し、コード取得やReactコードへの置き換えを依頼できます。また、GitHubと連携してMake専用の新規リポジトリを作り、そこへコードを送る方法も利用できます。

Q: Make Connectorsとは何ですか？

Make Connectorsは、Figma MakeからNotionなど外部アプリケーションのMCPサーバーへ接続する機能です。Notionに書かれた要件定義のURLを渡して内容を参照させ、その要件に基づく成果物を作れます。権限を与えれば、NotionやLinearへ内容を書き込むことも可能です。

Q: 独自のデザインシステムをFigma Makeで使う方法は？

コード側のデザインシステムは、NPMパッケージを介してReactのライブラリや独自コンポーネントをFigma Makeへ取り込む方法が案内されています。Figmaデザイン側のライブラリについてはMake Kitを使い、ボタンなどのコンポーネントをMake上で再現する構想が紹介されています。

Summary & Key Takeaways

• Figma Makeは、テキストプロンプトからアプリケーションを生成できるAI関連製品である。曖昧なアイデアから始めるだけでなく、手書きのスケッチや参考画像を与えて画面を再現できるため、従来は時間がかかっていた試作品づくりを素早く進められる。検証可能なアイデアの数を増やし、動くものを確認してから方向性を調整する用途に適している。

• Figmaデザインのフレームをコピーして渡すと、オートレイアウトの構造、色、余白などを反映した再現性の高いアプリケーションを作れる。クリックによる絞り込み、価格帯に応じた一覧更新、カメラや地図APIの利用など、従来の画面遷移中心の試作より高度で動的な操作も実装できる。3Dライブラリを使った楽しい表現にも応用可能である。

• 開発への受け渡し方法として、Make for MCPによるAIエージェント経由のコード取得やReactコードへの置換、専用の新規GitHubリポジトリへのコード送信が紹介された。Make ConnectorsではNotionなどの要件を参照し、権限設定によって外部ツールへ書き込める。さらにReactライブラリの取り込みや、Figmaのデザインシステムを再現するMake Kitも案内された。