本記事では、2つの異なるFigma Makeファイルを、supabaseを用いてリアルタイムで連携させる方法をご紹介します！
今回ご紹介するプロトタイプは、エンジニアの皆さんはもちろん、エンジニアではない方でも簡単にFigma Makeでバックエンドまで構築することができます！
supabaseとは？
アプリケーション開発に必要なバックエンド機能を提供するプラットフォームです。
データベース、認証、リアルタイム機能、ストレージなどの機能が揃っています！
Figma Make内ではフロントエンドまでしか生成できませんが、supabaseに接続することでバックエンドの機能を搭載できます！
連携方法
1.２つのFigma Makeファイルを作成。今回は「ユーザー」と「管理者」の２つのチャット画面を作成。
2.Figma Makeからsupabaseを立ち上げ、プロジェクトを作成。この時、どちらのファイルも同じsupabaseプロジェクトに接続。
3.プロンプトにてチャット画面のUIと、supabaseに接続することを指示
今回私は以下のようにGeminiにプロンプトを提案してもらい、そのままFigma Makeに投げました。多少の調整は必要でしたが、Figma Make側で数回修正を行うと、うまくいきました↓ ※一部不要な内容も含まれています
Supabaseに接続し、別のFigma Makeファイル（モバイルユーザーアプリ）とリアルタイムで同期する管理ダッシュボードのチャット画面を作成してください。
## アプリのコンセプト
これは、2画面チャットデモの「管理ダッシュボード」側です。
ここで送信されたメッセージは、ユーザーのモバイルアプリファイルに即座に表示される必要があります。## レイアウト (デスクトップ)
分割レイアウト:
– **左ペイン: チャットメッセージ**
– スクロール可能なメッセージリスト
– メッセージバブル:
– 左 → ユーザーメッセージ
– 右 → 管理者メッセージ
– 入力エリア:
– テキストフィールド
– 送信ボタン
– 入力中インジケーター (「ユーザーが入力中…」)– **右ペイン: ステータスパネル**
– ユーザーがオンライン状態であることを示すインジケーター
– 最終メッセージのプレビュー
– 「新着メッセージ」のバッジ
– リアルタイムイベントログ:
– INSERT/UPDATE イベントを表示
– 自動スクロール## Supabase 設定
以下のテーブルを使用します:
– テーブル: **messages**
– 列:
– id (int)
– text (string)
– user (string) — このファイルでは常に「admin」に設定
– created_at (timestamp)追加:
– 「typing」という名前のリアルタイムブロードキャストチャネルを使用して、入力イベントをモバイルアプリに送信します。## 動作要件
### ロード
– ロード時に、created_at でソートされたすべてのメッセージを取得します。
– メッセージリストをレンダリングします。### 送信
– ユーザーが「admin」のメッセージを挿入します。
– 入力エリアをクリアします。
– 自動スクロールします。### リアルタイム
– INSERT イベントをサブスクライブします。
– リストに新しいメッセージを追加します。
– 送信者が「user」の場合、「新規メッセージ」バッジをインクリメントします。### 入力インジケーター
– 管理者がテキストフィールドに入力したとき：
– 入力イベントを「typing」チャンネルにブロードキャストします。### イベントログパネル
– 表示：
– INSERT イベントのペイロード
– タイムスタンプ
– 最新のイベントが自動的にスクロールして表示されます。## ビジュアルノート
– ダッシュボードのようなレイアウト
– 薄い境界線とソフトシャドウを使用します。
– 新着イベントとメッセージにフェードアウトとハイライトアニメーションを使用します。この管理者ダッシュボード画面を生成し、すべての Supabase ロジックを接続します。
4.supabase側でテーブルを作成。
（プロンプトでもOKですが、上のプロンプトでうまくいかなかったため、今回はSQL文を書いて直接作成しました）
5.Figma Makeで確認！
こちらが実際に作成したプロトタイプです！２つのファイルが正しく動き、チャットの送受信ができていることがわかると思います！
上の動画では表示していませんが、プロンプトに書いたように、どちらかが文字を打っている間、相手の画面に「Typing…」と表示させることもできました！
※うまくいかない方は、使用しているテーブルがsupabaseで作成したテーブルであることを確認してください！上記の通り、最初はFigma Makeのプロンプトから指示を出してテーブルを作成しましたが、上手くいかなかったため、直接テーブルを作成しました。プロンプトから作成するテーブル構成を指示することも可能です！
このような流れで、２つのFigma Makeファイルを連携させることに成功しました！
終わりに
今回は、バックエンドを構築できるsupabaseを使用して、２つのFigma Makeファイルをリアルタイムで連携する方法をご紹介しました！
デザインとフロントエンドを簡単に生成できるFigma Makeですが、supabaseに連携するとバックエンドまで作ることが可能になるため、作れるプロトタイプの幅も広がると思います。
私は今回初めてsupabaseを使用したため、最初は使い方に戸惑いましたが、Geminiと一緒にプロンプトを作成したり、supabaseの使用方法を聞いたりしてバックエンド側もバックエンド側も構築できたので、気になる方はぜひ試してみてください！
ここまで読んでいただきありがとうございました！
簡単30秒