🕓 Figma Makeはすべてのプランで利用できるようになります
Figma Makeは、今後数週間でスタータープランと有料プランのすべてのシートに段階的に展開されます。利用できるようになりましたら、アプリ内でお知らせいたします。
Figma Makeを使用してプロトタイプやWebアプリを作成する際には、バックエンドを追加することでデータを安全に保存および管理しなければならない場合があります。たとえば、次のような場合にはバックエンドが必要です。
- さまざまなブラウザ間でアプリの状態を維持する
- アプリのログイン画面など、実用的な認証フローを提供する
- ユーザーの入力とフォームへの回答を収集する
- テキストや画像などのコンテンツを保存して読み込む
- サーバーへのAPIリクエストを行うためのシークレット、APIキー、トークンを保存する
Figma MakeはSupabaseと統合することで、シークレットストレージ、計算機能、Postgresデータベースを備えたバックエンド環境を提供し、このPostgresデータベース内に基本的なキーバリューストアを設定します。Figma Makeは現時点で、Supabaseが提供するPostgresに完全なSQLデータベースをセットアップしません。
既存のSupabaseアカウントをFigma Makeに取り込むことができます。アカウントをお持ちでない場合は、Figma Makeが利用開始方法を案内します。
アカウントの準備が整ったら、Figma MakeがSupabaseプロジェクトをアプリに接続する手順を案内します。
Figma Makeは、以前に接続したSupabaseプロジェクトを記憶しているので、Figma Makeファイル全体で、より簡単にSupabaseプロジェクトを再利用することができます。
バックエンドの準備が整ったら、外部サーバーへのクエリに使用できるシークレットとAPIキーを追加することも可能です。
詳細については、ベストプラクティスとプロンプトの例をご覧ください。
バックエンド
Figma Makeファイルでバックエンドを活用すると、次のことができます。
バックエンドを追加する
機能的なプロトタイプやWebアプリにバックエンドを追加するSupabase統合を有効にする方法は2つあります。
- Figma Makeは、AIチャットでのプロンプトの意図に基づき、バックエンドの追加を自動的に推奨します。また、「アプリに認証を追加してくだい」といったプロンプトを使用して、バックエンドの追加を明示的に促すこともできます。
- Figma Makeファイルの設定で、Supabaseを接続します。
Figma Makeファイルではどちらの方法も使用できます。ファイルごとにバックエンドを一度設定するだけでよいため、同じファイルで両方の方法を使用することはありません。
バックエンドの追加を指示する
AIチャットを使用してバックエンドを追加するには:
- AIチャットで、機能的なプロトタイプまたはWebアプリにバックエンドを追加するようにモデルに指示します。「バックエンドを追加してください」、「ユーザーのサインインを追加してください」、「[OpenAIのような安全なAPI]を呼び出してください」といった簡単なプロンプトで構いません。
-
Figma MakeがSupabaseアカウントの設定を求めたら、[接続]をクリックします。このステップは、初めてSupabase統合を設定する際にのみ発生します。
新しいブラウザのタブが開き、SupabaseのWebサイトにリダイレクトされます。
Supabaseにログインするように求められた際には、既存のアカウントを使用するか、無料のアカウントを作成してください。
ご利用のSupabaseアカウントがまだ組織に関連付けられていない場合、Supabaseは組織を作成するよう促します。
-
[FigmaのAPIアクセスを承認する]ページで、組織を選択し、[Figmaを承認]をクリックします。
ブラウザで[Supabase]タブが閉じられ、Figma Makeに戻ります。
-
既にSupabaseプロジェクトをお持ちの場合は、[プロジェクトを選択]をクリックし、Figma Makeファイルに使用するプロジェクトの横にある[接続]をクリックします。
Supabaseプロジェクトがない場合は、[プロジェクトを作成]をクリックします。その後、[新規Supabaseプロジェクト]モーダルでプロジェクト名を入力し、Supabaseプロジェクトをホストする地域を選択して、データベースのパスワードを作成してください。
注: データベースのパスワードは、Supabaseアカウントのパスワードとは異なります。データベースのパスワードは、Supabaseプロジェクト内のPostgresデータベースにアクセスするために使用されます。Figma Makeファイルでの作業中にこのパスワードを使用する必要はほとんどありませんが、Supabaseではデータベースにパスワードが必要です。
- [プロジェクトを作成]をクリックします。
SupabaseプロジェクトがFigma Makeファイルに接続されたら、準備完了! ユーザーからの入力を収集するフォームなど、構築したい機能をAIチャットでモデルに伝えれば、モデルがその機能の実装を行います。
ファイル設定にバックエンドを追加する
Figma Makeファイルの設定にバックエンドを追加するには:
- Figma Makeファイルの右上で、[Makeの設定]をクリックします。
- 左サイドバーの[統合]の下にある[Supabase]をクリックします。
-
[Supabaseを接続する]をクリックします。この手順は、Supabase統合を初めて設定する際にのみ必要です。
新しいブラウザのタブが開き、SupabaseのWebサイトにリダイレクトされます。
Supabaseにログインするように求められた際には、既存のアカウントを使用するか、無料のアカウントを作成してください。
ご利用のSupabaseアカウントがまだ組織に関連付けられていない場合、Supabaseは組織を作成するよう促します。
-
[FigmaのAPIアクセスを承認する]ページで、組織を選択し、[Figmaを承認]をクリックします。
ブラウザで[Supabase]タブが閉じられ、Figma Makeに戻ります。
-
既にSupabaseプロジェクトをお持ちの場合は、Figma Makeファイルに使用するプロジェクトの横にある[接続]をクリックします。
Supabaseプロジェクトがない場合は、[プロジェクトの新規作成]をクリックします。その後、[新規Supabaseプロジェクト]モーダルでプロジェクト名を入力し、Supabaseプロジェクトをホストする地域を選択して、データベースのパスワードを作成してください。
注: データベースのパスワードは、Supabaseアカウントのパスワードとは異なります。データベースのパスワードは、Supabaseプロジェクト内のPostgresデータベースにアクセスするために使用されます。Figma Makeファイルでの作業中にこのパスワードを使用する必要はほとんどありませんが、Supabaseではデータベースにパスワードが必要です。
[プロジェクトを作成]をクリックします。
SupabaseプロジェクトがFigma Makeファイルに接続されると、AIチャットに戻ってモデルを操作し、バックエンドを活用する準備が整います。
シークレットまたはAPIキーを追加する
機能的なプロトタイプやWebアプリを作成する際に、外部サーバーからデータを取得したいこともあるでしょう。たとえば、ユーザーに天気情報を表示するアプリがある場合、APIキーまたはアクセストークンを必要とする天気APIを使用することができます。
AIチャットで機能的なプロトタイプやWebアプリを作成するように指示すると、Figma Makeはバックエンドの設定を要求し(まだ設定していない場合)、シークレットキーまたはAPIキーを入力するためのインターフェースを提供します。
注: シークレットまたはAPIキーは、プロンプト中にFigma Makeが提供する[シークレットを作成する]ボックスにのみ入力する必要があります。プロンプトのテキストにシークレットキーやAPIキーを入力しないでください。
シークレットまたはAPIキーを追加するには:
- AIチャットで、機能的なプロトタイプまたはWebアプリにシークレットを追加したいことをモデルに伝えます(「株価を閲覧できるアプリが欲しい」、「APIキーを保存するためのシークレットを作成してください」など)。
- [シークレットを作成する]ボックスの[シークレットの詳細を追加]に、シークレットまたはAPIキーを入力します。
- [シークレットを作成]をクリックします。
[シークレットを作成]をクリックすると、Figma MakeはSupabaseを使用して、シークレットまたはAPIキーを安全に保存します。その後、追加されたシークレットキーやAPIキーを活用して、機能的なプロトタイプやWebアプリに機能を追加するよう、Figma Makeに引き続き指示をすることができます。
Supabaseのシークレット、プロジェクト、組織を管理する
バックエンドのシークレット、Supabaseプロジェクトおよび組織はすべて、SupabaseのWebサイトを通じて管理されます。Figma Makeでは、SupabaseのWebサイト上で適切なページに移動するためのクイックリンクを提供しています。
Supabaseでシークレット、プロジェクト、組織を管理するには:
- Figma Makeファイルの右上で、[Makeの設定]をクリックします。
- 左サイドバーの[統合]の下にある[Supabase]をクリックします。
- Figma Makeファイルに接続されたプロジェクトの行で、三点リーダーアイコンをクリックし、次の手順に従います。
- [プロジェクトを管理]をクリックし、そのプロジェクトのSupabaseダッシュボードに移動します。
- [組織を管理]をクリックして、Supabase組織の設定ページに移動します。
- [シークレットを管理する]をクリックして、SupabaseプロジェクトのEdge Functionsデータベースに移動します。
バックエンドを活用するためのベストプラクティス
Figma Makeでバックエンドを活用する際のポイントとなるベストプラクティスをいくつか紹介します。
- Figma Makeが提供するSupabaseインターフェースを使用していることを確認してください。プロンプトのプレーンテキストには、シークレットやAPIキーなどの機密性が高いデータを含めないようにしてください。
- 一般的に、Supabaseプロジェクトを最も効率的に活用するため、Figma Makeファイル全体でSupabaseプロジェクトを再利用することをお勧めしています。
プロンプト例
Figma Makeでバックエンドを活用してみるためのプロンプト例を以下に示します。
データと状態を保存する例
- 「タスクを保存できるタスク管理アプリを作成してください。各タスクに費やした時間を入力できるように、時間追跡機能が必要です。」
- 「画像をアップロードできるフォトギャラリーを作成してください。」
- 「私はマーケティングプラットフォームでプロダクトマネージャーをしています。追加するキャンペーン比較ツールの概念実証を作成してください。過去のキャンペーンデータがどのように保存されるか、またユーザーが比較する日付範囲を選択する方法を示します。」
- 「私はeラーニングプラットフォームのプロダクトマネージャーです。コース作成システム向けにクイズ作成ツールのプロトタイプを作成してください。インストラクターが自由記述から多肢選択、スライダーまで、幅広い質問を作成する方法を示します。クイズを共有可能にして、プロトタイプを試している方々が自分でクイズを作成し、それを共有してフィードバックを得られるようにしてください。」
シークレットとAPIキーを使用する例
- 「Spotify APIから視聴履歴を取り込む音楽プレイリスト作成ツールを作成してください。」
- 「Goodreads APIに接続して書籍情報を取得し、ユーザーが読書の進捗状況を追跡できる読書リストアプリが必要です。」
- 「LinkedIn APIを使用して求人情報をインポートし、ユーザーが応募状況を追跡できる求人応募トラッカーを構築してください。」
認証を追加する例
- 「ユーザーのサインインを要求し、キーバリューストアにストリーク情報を保存する習慣トラッカーを作成してください。」
- 「私はSaaS製品を開発している開発者です。ユーザーログインシステムを作成してください。メール/パスワード認証と、GoogleやGitHubを通じたソーシャルログインをサポートし、パスワードリセット機能を含む必要があります。」
- 「GitHubへのサインインを必要とし、コードスニペットをデータベースに保存するコードスニペットマネージャーを構築してください。」