Figma Makeを使いこなすための8つの重要なヒント

Config 2025で発表したFigma Makeは、Figmaが新たに開発したプロンプトをアプリに変換する機能です。プロンプトを数回入力するだけで、コンセプトから機能プロトタイプを生成し、デザイナーやプロダクトチームをお手伝いします。Figmaのデザイナーアドボケイト、デザイナー、プロダクトマネージャーは、数か月にわたってFigma Makeを細部にわたって調べ、その機能を検証し、限界に挑戦してきました。Figma Makeを最大限に活用するために、こうした実践経験から得られた8つの実用的なヒントとベストプラクティスと、アイデアの参考にしていただけるサンプルプロンプトを複数提供します。

1. プロンプトの初回入力時に前もって詳細を記述しておく

初回のプロンプトでデザインを詳しく記述すればするほど、少ないやり取りで希望する結果を得られます。デザイナーアドボケイトのAna Boyerは次のように述べています。「初回の生成でできるだけ理想に近い結果を得て、あとはわずかな調整で済ませることをおすすめします。出力を修正するために何度もプロンプトを入力するほうが、はるかに時間がかかります」

初回のプロンプトに盛り込むべき、重要な詳細は以下の通りです。

• タスク: Figma Makeがすべきこと
• コンテキスト: このフローまたは画面をどこに配置するか
• 主なデザイン要素: Figma Makeが組み込むべき重要な要素
• 期待される挙動: そうした要素がインタラクションによってどう挙動するか
• 制約: デバイス、レイアウト、ビジュアルスタイルなど

初回のプロンプトに詳細を盛り込むこの戦略では、Figma Makeにプロンプトを入力する前に製品のフローや仕様に関するビジョンを明確化するだけでなく、そうしたコンテキストを適切なプロンプトで入力することが必須です。また、プロンプトの改善にAIアシスタントを活用できます。AIアシスタントから詳しいガイダンスや、Makeにそのまま直接ペーストすることで高度な効果を実現できるコードスニペットを得ることができます。

追加のヒント: 初回プロンプトによる出力結果に満足できなかった場合は、別の表現方法を考えましょう。たとえば、2つの要素を垂直に揃えてください、というプロンプトの代わりに、この要素を20ピクセル下方に動かしてください、これらのボタンの間に16ピクセルのスペースを追加してくださいなどと、表現を変えてみます。

実際の例

Figmaでデザイナーアドボケートマネージャーを務めるGreg Huntoonは、さまざまなアプローチを幾度も試し、最終的にマウスエフェクト可視化キットv1 (試作版)を開発しました。以下は、Gregが試したプロンプトのなかで特に効果的なものです。

• プロジェクトの概要
• プラットフォームの仕様
• 目的とユースケース
• 主要機能のリスト
• デザインスタイルガイド
• 技術仕様書

また、Gregはプロンプトに次の明確な初期手順を盛り込みました。最初のステップ: ベースグリッドをオーバーレイ表示し、サイズ調整可能で、かつマウスオーバーステートが定義されたプレースホルダー要素を持つコンポーネントを作成する。

2. Figma Makeに取り込む前にデザインファイルを整理する

Figma Makeは、デザインをゼロから作成することができる(0→1)だけでなく、既存のFigmaデザインをインタラクティブなプロトタイプに変換する(1→1)ことにも優れています。Figma Makeで最良の結果を得るには、ファイル内の整理に時間をかけ、プロンプトボックスにコピー&ペーストするフレームを、作業しやすいように整えましょう。入力時にデザインが整理されていればいるほど、出力品質が高まります。Figma Makeにデザインファイルをうまく取り込む上で最も重要なことは、フレームに適切な制約を設け、オートレイアウト設定を活用することですが、レイヤー名をレイヤーの内容や目的を表すものにすることも役立ちます。

Figma Designは、すでにオートレイアウトを提案やAI によるレイヤー名変更などのAI機能や、Clean Documentなどのプラグインを備えています。こうした機能を使用してフレームをすばやく整理して、Figma Makeにファイルを取り込む下準備ができます。

追加のヒント: レイヤーを完璧に設定した場合でも、Figma Make独自の制約により、ユーザーの意図を無視してデザインファイルを変換することがあります。デザインがプレビューの表示範囲を超えて表示された場合は、フォローアップとして、デザインサイズを画面サイズに合わせて調整してレスポンシブにしてください、などのプロンプトを入力してください。また、デザインのサイズを指定したい場合は、このデザインを継続してモバイルサイズで表示してください、などのプロンプトをお試しください。

実際の例

Figmaでプロダクトマネージャーを務めるHolly Liは、最初にFigma Designで堅牢なオートレイアウト構造を設定することで、以下の音楽プレーヤー内のマイクロインタラクションを1つのプロンプトで見事に作成しました。

Hollyのプロンプトは以下の通りです。このCDプレーヤーをインタラクティブにして、トラックを再生するとCDが回転するようにしてください。

3. 複雑なプロジェクトを管理可能なステップに分解する

プロジェクトが複雑な場合、初回プロンプトが適切でも、追加プロンプトが多数必要になることがあります。こうした追加プロンプトでは、修正内容を小分けにして単純な手順に絞りこんだほうが、一度にすべてを修正するよりも、より良い結果が得られます。プロダクトデザイナー、Tammy Taabassumは次のように述べています。「範囲を狭めれば狭めるほど、LLMがきめ細かく対応できるようになります。Figma Makeのパフォーマンスは、リクエストの大きさや複雑さ、どれだけ具体的な言葉を使うかに左右されます。」

細かい情報を大量に盛り込んだ初回のプロンプトで最初の基礎を築いてから、小さな変更を少しずつ加えていくことをおすすめします。初回プロンプトの後に少しづつ変更を加えるアプローチで、複雑なインターフェースを段階的に作成し、複数ページにわたるフローをフレーム単位で構成しつつ、全体的なデザインの方向性も維持できます。

追加のヒント: この小分け方式のアプローチの発展形として、Figma Makeに各要素ごとにコードフォルダを作成するよう、プロンプトで明示的に指示できます。それにより、コードをより効果的に整理でき、プロンプトが複数にわたる場合でも保守性を確保し、特に野心的なビルドで発生する恐れのあるエラーが特定しやすくなります。

実際の例

アルファテストを担当するAntonella Rodriguezは、正常に機能する財務ダッシュボードと付属のオンボーディングフローを作成するために、最終的に150を超えるプロンプトを使用しました。Antonellaは、まず必要なコア機能、希望のレイアウト、視覚的な基準を大まかに説明し、次に出力(v1)を整理し、各ページの内容を精査して、各ページごとに精査した内容を順に入力しました。

以下は、Antonellaが使用した主な追加プロンプトです。

• メモを追加できるよう、ジャーナルページに付箋を追加してください。
• ファイナンスページに、カテゴリー、支出タイプ、金額(米ドル建て)、金額(ペソ建て)、メモ、日付の項目を持つ表を追加してください。
• どの通貨を使用しているかを示すチェックボックス(USDまたはARSを選択)を追加してください。

プロダクトデザイナーのTammy Taabassumは、今年開催されるConfig Londonの基調講演用に、インタラクティブな3D世界を創造するにあたって、いくつかの異なる要素を使用しました。Tammyは、初回プロンプトで有名なランドマークを巡る3Dロンドンエクスプローラーを作成したあと、ビッグベン、ロンドンアイ、タワーブリッジをはじめとする3Dランドマークを、別々のコードファイルに分割するよう、Figma Makeにプロンプトで指示しました。これにより、ファイル全体に影響を与えることなく、個々のコンポーネントを容易かつ迅速に改良できるようになりました。

Tammyのプロンプト: ビッグベンのコードを新しいファイルに移動してください。

4. 独自コンポーネントを使用して視覚的な一貫性を確保する

Figma Makeで作業する際に、コンポーネントや、複数のコンポーネントを含むフレームをコピー＆ペーストすると効果的です。ライブラリのコンポーネントにすでにオートレイアウトと一貫したレイヤー命名規則が設定されている場合、Makeへの取り込みの成功率が高まります。

また、Figma Makeのプロンプトボックスにコンポーネントを貼り付け、これから作成するデザインの視覚的な基準として活用できます。Figma Makeはインターフェースの見た目を部分的に把握することで、そのスタイルや余白の取り方を手本に、追加の説明不要で、お客様のデザインシステムのルールに沿ってデザインを生成できます。

追加のヒント: Figma Makeのポイントして編集機能で、初回の出力に含まれる汎用コンポーネントをライブラリ内のUIと差し替えることができます。プレビューで要素を選択し、プロンプトボックスに独自コンポーネントを貼り付けて、このコンポーネントをこのデザインに置き換えてください。というプロンプトを入力します。

実際の例

デザイナーアドボケイトチームは、最新のMaterial 3 Design Kitのコンポーネントを使用して、以下の生産性向上アプリを開発しました。このアプリを作成するには、2つのコンポーネントをデザインシステムファイルからFigma Makeに貼り付けた後、次のプロンプトを入力しました。

タスクを管理および優先順位付けし、カレンダーで最新の予定を把握し、文字および音声のメモをまとめられる生産性向上アプリを作成してください。添付のナビゲーションコンポーネントを使用し、必要に応じてその内容を調整してください。カレンダータブに、添付のカレンダーコンポーネントを使用してください。残りのページの視覚的なスタイルは、これらのコンポーネントのスタイルと同じにしてください。

チームはその後、ポイントして編集機能でコンポーネントを選択し、Figma MakeにMaterial 3デザインシステムのバリアントと差し替えるようプロンプトで指示することで、基本となる初回出力(v1)を改良しました。

5. ポイントして編集ツールでビジュアルを微調整する

ポイントして編集ツールで選択した要素をクリックして、ツールバーまたは追加のプロンプトで編集することで、色やフォントの変更などの基本的な調整をすばやく行えます。色、角丸の半径、余白、タイポグラフィなどの視覚的なプロパティを直接操作して、すばやくシームレスに変更できます。

追加のヒント: ポイントして編集ツールを選択したときに使用できる編集オプションは、選択した要素の種類によって異なります。テキスト要素を選択するとフォント、色、書式が、コンテナ要素を選択すると背景色と余白がそれぞれ調整できます。画像には、差し替え用の画像をアップロードできる機能など、独自のオプションセットがあります。

実際の例

以下の音楽プレーヤーの例では、ポイントして編集ツールを使用して、フォントサイズや書式などの細部をすばやく調整しています。

6. コードタブにアクセスしてすばやく編集。開発スキルは不要です

Figma Makeを使った制作で、見た目に影響しない小さな変更が必要になった場合は、コードを編集することをおすすめします。[ソースに移動] ボタンは、要素のコードを素早く確認できるショートカットです。コードをチェックして、値を調整できます。Figma Makeのすべてのコードはわかりやすくラベル付けがされ、コーディング経験がなくても、ビルド内でどの部分のコードがどの動作を制御しているかを特定できます。コード内の値を更新すると、プレビューをリフレッシュしなくても更新内容が直ちに反映されるため、複数の製品動作を迅速にテストすることが容易です。

追加のヒント: [ソースに移動]ボタンでページレベルの設定にアクセスできない場合は、cmd+F (Mac)またはCtrl+F (PC)のショートカットを使用して、コードフォルダ内のセマンティックレイヤーをご確認ください。

実際の例

このメソッドは、アニメーションのようなプロパティをすばやくイテレーションするのに最適です。Hollyの音楽プレーヤーファイル内で指定されたレコードの回転動作をテストする場合は、この要素のソースコードに直接移動し、コードベースをすばやくスキャンして速度パラメータを見つけ、プレビューを確認して適切なスピードになるまで、コードを手作業で調整します。

7. 実際のデータをMakeに統合する

動的なプロトタイプを作るならFigma Makeにお任せください。Figma Makeでは、株価から天気予報まで、カスタムデータやリアルタイムデータを用いてインターフェースを構築できます。以下のような方法で、APIに接続せずにFigma Makeファイルにデータを取り込めます。

• 表示される可能性のあるデータの種類については、Figma Makeに確認してください。
• データセットをより細かく制御したい場合は、インターフェース内にデータインポートのエントリポイントを含めるよう、Figma Makeに明示的に指示します。

追加のヒント: なお、Figma Makeは、必要に応じてブラウザがアクセスできる任意のコンピューターハードウェアに接続できます。これにより、プロダクトデザイナーであるDaniela Muntyanがミニ自撮りアプリが示したように、キーボード入力、音声入力、カメラによる入力など、さまざまなタイプの入力によるインタラクションのプロトタイプを作成できます。

実際の例

プロダクトデザイナーのRyan Reidがニューヨーク州都市交通局のAPIを使用して、ニューヨーク市地下鉄用タイムトラッカーを開発した際には、Figma Makeで地下鉄の各路線や駅からデータを自動収集して、APIに接続せずに、列車の到着時間をリアルタイムで再現するモックデータをスマートに生成しました。

Ryanのプロンプト: ニューヨーク州都市交通局のAPIを使用して、ニューヨーク市地下鉄の運行時間を追跡するWebサイトを作成してください。このサイトで地下鉄の路線と駅を選択すると、すべての電車の運行時刻が時系列順に表示されます。シンプルでわかりやすいナビゲーションのために、サイトは1ページのみで、路線と駅を選択すると右側に詳細情報を表示します。

同様に、Figmaアドボカシーチームでは、内部のGPTを使用して偽のランニングセッションのデータセットを生成し、CSVファイルとしてダウンロードした後、Figma Makeにマラソントレーニングアプリ内にアップロード機能を追加するようプロンプトで指示しました。その結果、適切なフォーマットでアップロードされた任意のCSVデータベースに動的に対応するダッシュボートデザインが完成しました。

プロンプト例

マラソントレーニングの進捗を時系列で表示するアナリティクスダッシュボードを作成したいと思います。

ダッシュボードには、主な数値や、進捗を時系列で示す折れ線グラフなど、最新のトレーニングの概要を表示します。表のX軸にはトレーニング日を、Y軸には走行距離をトレーニング日ごとに表示します。

分析が表示されるまでは、空ページにCSVファイルのアップロードを促すプレースホルダーを表示します。その後、各列に日付、距離(km)、時間(分)、平均ペース、心拍数、消費カロリー、獲得標高が入力されたCSVファイルを使用して、上記のダッシュボードに変換します。

8. Figma Makeをハンドオフ支援ツールに変える

Makeに本番レベルのコードスニペットを生成するインターフェースを作成するようプロンプトで指示することで、複数のデザイン案を生成し、開発者に共有できるコードを生成する独自ハンドオフツールを作成できます。このアプローチにより、余裕を持って試行錯誤し、実験し、繰り返してから次のフェーズに進むことができます。

追加のヒント: Figma Makeが生成したコードが開発ニーズに合わない場合は、チャットでMakeに特定の要素や動作を汎用的な疑似コードとして出力するよう指示できます。サンプルプロンプトは次の通りです。コードを変更せずに、この部分が擬似コードにどのように実装されているかを説明してください。できれば、(プラットフォーム名を挿入)プラットフォームに関する具体的な考慮事項を詳しく説明してください。

実際の例

デザイナーアドボケートのLuis Ouriachは、OKLCHカラーパレット作成ツールを独自開発する際のハンドオフ支援ツールとしてFigma Makeを使用しました。Luisのアプリで、主要なブランドカラーから完全なカラーシステムを生成できます。さらに、結果として出力されたCSS変数とTailwind CSSを、すぐにハンドオフできます。

Luisのプロンプト: OKLCHカラーパレット作成ツールを作ってください。このツールに、主なブランドカラーを追加すると、緑、青、赤、黄、オレンジ、グレーの基本色をカバーする完全なカラーランプを生成します。ユーザーは、各ランプに含める色数を、各色を濃淡によって3色に分けるなどの方法で決めることができます。

同様に、デベロッパーアドボケイトのJake Albaughは、特定のUI要素(この場合はラグジュアリーカード)に適用するアニメーションを改良するためにオリジナルのミニアプリを開発しました。JakeはFigma Makeに視覚効果を調整する機能とアニメーションパラメータのJSON出力を含めるよう指示し、並行して開発を進めている別のプロダクトに再利用できるコードを作成しました。

Jakeのプロンプトのうち1つは、各軸の最小傾きと最大傾きを含むすべてのパラメーターを説明するJSONコード出力が生成されるようにしてください。このパラメーターは入力内容によって変わります。というものでした。

忍耐強く試行錯誤する

AIツールはどれもそうですが、自分に合ったプロンプトの書き方を見つけるまでは、試行錯誤の連続です。このたび、フルシートを持つすべてのFigmaユーザーの皆様にFigma Makeのベータ版をご利用いただけるようになりました。ぜひ、このツールを、新たなアイデアをクリエイティブに実現するためにご活用ください。

このツールが持つ可能性はまだ未知数ですが、皆さんとともに可能性を探っていけることを楽しみにしています。