初めてのプロンプトを作成したので、次のステップに進みましょう。アプリまたは機能プロトタイプの初期生成の後の、一般的なユースケースとニーズを紹介します。
複数のユーザーをサポート
多くのアプリは、複数のユーザーに対応する必要があります。例:
- ユーザーがトーナメント対戦表を記入して共有できるアプリ
- ユーザーがログインし、プロフィールを設定し、投稿するソーシャルメディアアプリ
- グローバルリーダーボードやマルチプレイヤー機能を備えたゲーム
いずれの場合でも、Supabaseを使用してアプリのバックエンドを用意します。これにより、ユーザーがログインしてアカウント、投稿、スコア、その他のコンテンツなどのデータを保存できるようになります。
プロンプト例
アプリで複数のユーザーをサポートしたい。Supabaseを使用して、ユーザーがアカウントを作成してログインできるようにする。適切なバックエンドのユーザー別機能を実装する。このコミュニティファイルで試してみましょう
例のプロンプトを試すには、このコミュニティファイルをリミックスし、プロンプトをAIチャットに貼り付けます。プロンプトを変更して、追加の機能を試すこともできます。
例のアプリ: マークダウン ノート
なぜこれが機能するのか
例のプロンプトは、バックエンドを追加して複数ユーザーをサポートしたいことをFigma Makeに明確に説明しています。このプロンプトはSupabaseバックエンドフローをトリガーします。この表現により、Figma Makeは既存の会話のコンテキストを考慮し、作業中のアプリに適したバックエンドサポートを構築します。
Figmaデザインに移動
アプリが、Figma Designに移植できる状態にあります。この場合、[デザインをコピー]機能を使用します。アプリのプレビューで、コピーするビューに移動し、「Figma Makeプレビューをデザインレイヤーとしてコピー」の指示に従います。
現在、FigmaデザインでFigma Makeファイルの機能バージョンを取得することはできず、Figmaデザインでレイヤーに加えた変更はFigma Makeファイルに適用されません。
このコミュニティファイルで試してみましょう
[デザインをコピー]機能をテストするには、このコミュニティファイルをリミックスします。キャンバスに要素を追加したり、レイヤーを移動したり、ビューを埋めるためにキャンバスを拡張したりできます。複数のキャンバス状態で[デザインをコピー]機能を試し、Figmaデザインにレイヤーを貼り付けて結果を見てください。
例のアプリ: キャンバスエディター
なぜこれが機能するのか
[デザインをコピー]機能を使用すると、Figma Makeファイルのプレビューの現在の状態がコピーされます。つまり、メニューを拡張したりオーバーレイを開いたりしてアプリのさまざまな部分に移動し、そのプレビューの状態をFigmaデザインにレイヤーとしてコピーして編集できます。
作業を共有
Figma Makeでの作業を共有する準備ができました。ニーズによって、さまざまな共有方法があります。
- Figma Makeファイル全体を共有する: チームメイトを招待してチャット履歴を見たり、一緒に作業したりしたい場合は、Figma Makeファイル自体を共有できます。
- 自分の作業を使用した繰り返しを可能にする: チームメイトが元のファイルに影響を与えずに繰り返し作業したい場合は、Figma Makeファイルをテンプレートとして公開することができます。
- 作業バージョンを内部で公開する: チャット履歴を非表示にして、アプリの機能体験や機能プロトタイプを特定の人にのみ開示する場合は、アプリのパスワード保護バージョンを公開するか、組織内限定で公開します。
- インターネットで作業を共有する: 仕事の成果を他の人と共有する準備ができたら、アプリをライブWebに公開できます。
コードを取得する
場合によっては、Figma以外のエディターやシステムにコードを移動する必要があるかもしれません。たとえば、コードをGitHubリポジトリに移動したり、VS Codeや他のIDEでコードを修正したりします。
コードを取得するには2つの方法があります。
- Figma Makeファイルのコードエディターでコードをダウンロードする: Figma Makeからコードをダウンロードすると、製品がアプリのコードを含む.zipファイルを作成します。その.zipファイルをダウンロードして、好みのIDEにコンテンツを取り込むことができます。コードへの変更を自動的にFigma Makeにプッシュバックすることはできませんが、手動で変更をインターフェースにコピーして貼り付けたり、AIチャットで変更を共有したりすることはできます。
- GitHubにコードをプッシュする: Figma MakeのすべてのユーザーはGitHubにコードをプッシュできます。この機能を使用すると、Figma Makeファイルに対応するGitHubアカウントまたは組織内にGitHubリポジトリが作成されます。その後、Figma Makeからそのリポジトリに変更をプッシュしながら作業を続けることができます。
コードを説明する
場合によっては、アプリのコードが何をしているのかを把握したいと思うこともあるでしょう。プロンプトにより、アプリに変更をせずにFigma Makeにコードの説明を求めることができます。
プロンプト例
このアプリのコードを説明してください。まず上位から始めてください。このコミュニティファイルで試してみましょう
このコミュニティファイルをリミックスし、例のプロンプトを試して、Figma Makeファイルのコードの説明を要求してみてください。
例のアプリ: テトロミノゲーム
例の結果
テトロミノゲーム - コードの説明
高レベルのアーキテクチャ
これはReactとTypeScriptで構築されたクラシックなテトリススタイルのゲームです。アプリは3つの主要部分で構成されるコンポーネントベースのアーキテクチャに従います。
1. コンポーネント構造
`App.tsx` - すべてのゲームロジックと状態を含むメインゲームコントローラー
`GameBoard.tsx`- 10x20のプレイングフィールドをレンダリングするビジュアルコンポーネント
`NextPiece.tsx` - 次に来るテトロミノを示すプレビューコンポーネント
`types.ts`- TypeScriptインターフェースによる型安全性
2. コアゲームコンセプト
ゲームはいくつかの重要な状態を管理します。
ボード状態: 20x10のセルのグリッド。各セルは空か色ブロックで満たされています
現在のピース: 形状、色、位置を持つアクティブな落下中のテトロミノ
次のピース: 次に来るもののプレビュー
ゲーム統計: スコア、レベル、クリアしたライン
ゲームステータス: プレイ中、一時停止、ゲームオーバー
3. ゲームループフロー
```
ゲーム開始
↓
新しいピースをスポーン
↓
下に移動 (レベルに基づいて毎Xミリ秒)
↓
衝突チェック
↓
衝突があれば → ボードにピースを統合 → 完成したラインをクリア → 新しいピースをスポーン
衝突がなければ → 移動を続行
↓
繰り返し
```
---
詳細な解析
App.tsx - ゲームエンジン
定数＆データ
TETROMINOES配列: 全7つのクラシックな形 (I, O, T, S, Z, J, L) をその回転マトリックスと色で定義
BOARD_WIDTH/HEIGHT: 10列 × 20行
キー状態変数
```typescript
board // 2Dセルの配列
currentPiece // アクティブなテトロミノ形状
currentPosition // {x, y}座標
nextPiece // プレビューピース
score, level, linesCleared
isPlaying, isGameOver
```
コア関数
1. 衝突検出 (`checkCollision`)
指定された位置でピースが重なるかどうかをテスト:
ボードの境界 (左、右、下)
既に配置されたブロック
2. ピース移動 (`moveLeft`, `moveRight`, `moveDown`)
方向にピースを移動しようとする
衝突が検出されない場合のみ位置を更新
3. 回転 (`rotate`)
形状マトリックスを転置し、行を逆にする (90°クロックワイズ)
新しい向きが衝突しない場合のみ回転
4. 統合＆クリア (`mergePieceToBoard`, `clearLines`)
ピースが着地したら、ボードに永久に追加される
`clearLines` は完成した行 (すべての10セルが満たされた) をチェック
完成した行を削除し、上部に空の行を追加
スコアリング: 1行 = 100ポイント, 2行 = 300ポイント, 3行 = 500ポイント, 4行 = 800ポイント (レベルで乗算)
5. ハードドロップ (`hardDrop`)
最も低い有効位置にピースを瞬時に落下
高速プレイには便利
ゲームループ (useEffect)
```typescript
setInterval(() => moveDown(), speed)
// レベルが上がるごとに速度は低下
// 一時停止/ゲームオーバー時にはインターバルをクリア
```
キーボードコントロール (useEffect)
矢印キーで移動
スペース/上矢印で回転
Enterでハードドロップ
---
GameBoard.tsx - 表示
このコンポーネントは純粋に視覚的です:
プロップスを受け取る: 現在のボード状態+アクティブピース
その組み合わせ: アクティブピースを静的なボードにオーバーレイして一時的な表示ボードを作成
グリッドをレンダー: 30pxのセルを持つCSS Gridを使用
スタイリング: 各セルは、塗りつぶされた場合は色を表示し、空の場合は暗いグレーを表示
```typescript
// 疑似コード
displayBoard = [...board]
displayBoardの上にcurrentPieceをその位置にオーバーレイ
適切な色で200セル (10×20) をレンダー
```
---
NextPiece.tsx - プレビュー
次のテトロミノを示すシンプルな4×4のグリッド:
小さいセル (20px 対 30px)
グリッド内にピース形状を中央揃え
メインボードと同じ色分け
---
types.ts - 型定義
```typescript
Block: { filled: boolean, color: string } // 単一のセル
Tetromino: { shape: number[][], color: string } // ピース定義
Position: { x: number, y: number } // 座標
```
---
キー設計決定
イミュータブルな状態更新: 配列やオブジェクトを変更するのではなく、常に新しいものを作成
コールバックフック: 再レンダリングの不必要な回避のために `useCallback` を使用
関心の分離: 表示コンポーネントにはロジックが含まれない
ゲームループをsetIntervalで実行: 簡単な時間ベースのピースドロップ
レベル進行: 10ラインごとにレベルが上がり、ゲームが速くなる
アーキテクチャは明瞭でメンテナンスが用意 - ゲームロジックはApp.tsxにあり、レンダリングは特化したコンポーネントに委任されています。なぜこれが機能するのか
Figma Makeは作成または編集したコードファイルを読み取ることができます。アプリのコードを説明するように求められた場合、Figma Makeはコードファイルの内容を要約し、コードがどのように機能するかを詳しく説明することができます。
変更前に計画する
アプリで、Figma Makeがコードにデバッグ機能を追加したり、大規模で複雑な変更を試みたりするなどの問題に対処する際には、最初に変更を計画するようFigma Makeに指示することができます。
プロンプト例
最初のプロンプト:
アプリのコードに変更を加えないでください。plan.mdという名前のファイルを作成してください。plan.mdに、目的の変更を実装するための計画を書き込みます。2回目のプロンプト:
plan.mdのプランの最新バージョンを使用してアプリを変更してください。このコミュニティファイルで試してみましょう
このコミュニティファイルをリミックスし、Figma Makeが実装する具体的な変更を、AIチャットでの最初のプロンプトで送信します。例として、トーナメント対戦表を保存およびインポートする機能を追加したいことをFigma Makeに伝えてみましょう。
次に、Figma Makeが作成するplan.mdファイルに変更を加えて実験します。
最後に、AIチャットで2番目のプロンプトを送信し、plan.mdファイルに詳細に記載されている変更をFigma Makeに実装させます。
例のアプリ: トーナメント対戦表
なぜこれが機能するのか
Figma Makeは、指示に基づいて特定のファイルを作成することができます。plan.mdファイルには、Figma Makeがアプリに複雑な変更を加えるために実行できるプランが含まれます。Figma Makeが変更を実行する前にplan.mdファイルを作成する利点は、コードエディターでプランを検証し、プランに自分の変更や追加をすることができる点です。
次のプロンプトでは、Figma Makeにプランを使用するよう指示しています。このプランにはあなたが行った変更も含まれています。