Figma のデザインから動くアプリを作成する
要点Figma で「ファイル → ローカルコピーを保存…」を使って .fig を保存します。「プロジェクト」ページで「Figma」をクリックし、ファイルをドロップします。MonstarX がブラウザ上でファイルを読み込み、すべての画面を表示します。作成する画面（最大30画面）にチェックを入れ、デザインからはわからないことを書いて「このアプリを作成」を押します。先にいくつかの質問に答えたいときは「プランから始める」を押します。
アプリのデザインがすでに Figma にあるなら、MonstarX はそのデザインそのものからアプリを作成できます。できあがるのは、画面どおりの見た目で動くアプリです。実際の画像やアイコン、色や書体、プロトタイプの画面遷移がそのまま入り、さらに画面から読み取れるデータ、フォーム、サインインも加わります。
何が必要ですか？
Section titled “何が必要ですか？”デザインの .fig ファイルです。Figma でデザインを開き、ファイル → ローカルコピーを保存…（File → Save local copy…）を使ってください。これで MonstarX が読み込めるファイルが保存されます。Figma の Design ファイルである必要があります。FigJam のボードや Figma Slides のスライドには対応しておらず、ドロップするとその旨が表示されます。
Figma ファイルから作成するには？
Section titled “Figma ファイルから作成するには？”-
プロジェクト ページで、インポート の横にある Figma をクリックします（インポート のメニューにもあります）。
.figをプロンプト欄にドロップしたり貼り付けたりしても構いません。 -
.figをドロップするか選択します。MonstarX がブラウザ上でファイルを読み込みます（「ファイルを読み込み中…」「すべてのページを展開中…」「画面を描画中…」）。この時点では何もアップロードされません。 -
作成する画面にチェックを入れます。ファイルのすべてのページが、フレームを小さく描いた形で一覧になります。画面らしいフレームは最初からチェックが入っています。管理用に見えるページ（表紙、デザインシステム、アーカイブ）は、最初から折りたたまれ、チェックも外れています。ページごとに すべて選択 や すべて解除 を使えます。
-
どんなことができるアプリにしますか？（任意） に、デザインからはわからないことを書きます。誰が使うのか、データはどこから来るのか、新規登録や支払いのときに何が起きるのか、などです。
-
左下のモデルを確認します（プロンプト欄で選んだモデルです。ここで変更もできます）。
-
このアプリを作成 · 4画面 を押します。または プランから始める を押すと、MonstarX が画面を読み込み、デザインからはわからないことを質問してから作成します。
画面がアップロードされ（「デザインをアップロード中…」）、ファイル名にちなんだ名前でプロジェクトが作成されて、最初の作成が始まります。
MonstarX はデザインから何を取り込みますか？
Section titled “MonstarX はデザインから何を取り込みますか？”- 各画面の画像：作成する側があなたの描いたものを正確に見られるように。作業中も、作ったページをこの画像と見比べます。
- 各画面の正確な説明：レイアウト、余白、すべてのテキストのフォントとサイズ、色、枠線、角の丸み、影。
- 画像とアイコン：デザインにあるすべての画像とアイコンが、アプリのファイルになります。ストック写真に置き換えられることはありません。
- デザインシステム：色の変数（ライトとダーク）、書体、角の丸み、影。
- コンポーネント：10画面で使われているボタンは、アプリの中で1つのコンポーネントになります。
- プロトタイプのリンク：タップしたときの移動先が、本物の画面遷移になります。
同じ名前の画面（すべて「Desktop」という名前のフレームが並んだ流れなど）は、最初の言葉で見分けられるように表示されます。
チャットには何が表示されますか？
Section titled “チャットには何が表示されますか？”最初のリクエストは、たとえば「Figma のデザイン「bloom.fig」（4画面：Welcome、Home、Plant detail、Add plant）から、このアプリを作成してください。見た目はデザインのとおりに、機能は実際に動くようにしてください。」となり、その下に画面が一列に並びます。画面をクリックすると、サイズ、ページ、ファイル名と一緒に実物大で見られます。作成中のチャットには、「Home のデザインを確認中」や「/ を Home のデザインと比較」のようなステップが表示されます。
後から画面を追加できますか？
Section titled “後から画面を追加できますか？”できます。プロジェクトのチャットで .fig をドロップ、貼り付け、または添付すると、Figma から画面を追加 が開きます。新しい画面にチェックを入れ、何ができるようにするかを書いて、これらの画面を作成 を押します。画面はプロジェクトのデザインに加わり、アプリのほかの部分に合わせて作成されます。1つのプロジェクトには最大60画面のデザインを保存できます。
上限はありますか？
Section titled “上限はありますか？”| 上限 | 値 |
|---|---|
| 1回の作成の画面数 | 30画面まで |
| 1プロジェクトの画面数 | 60画面まで |
| 1つのデザインの画像とアイコン | 400個、合計150 MB まで（1個あたり8 MB） |
.fig は250 MB まで扱えますが、とても大きなファイル（デザインシステムのキット一式など）は、ブラウザで開くには重すぎることがあります。アプリの画面をデザインシステムのページとは別のファイルに移し、そのファイルのローカルコピーを保存してください。
よくある質問
Section titled “よくある質問”ファイルの代わりに Figma のリンクを貼り付けられますか？
このダイアログではできません。.fig ファイルそのものを読み込むからです。Figma で ファイル → ローカルコピーを保存… を使ってください。（デザインツールによっては、コーディングエージェント を通じて作ったものを送ることもできます。）
デザインはドロップした時点でアップロードされますか？
いいえ。ファイルはブラウザ上で読み込まれます。アップロードされるのはチェックを入れた画面だけで、作成のボタンを押したときです。
アプリはデザインとまったく同じ見た目になりますか？
それを目指しています。作成では、各画面を正確な値から再現し、作ったページをあなたの画面と見比べながら進めます。違いはチャットで指摘するか、編集モード で直せます。
デザインにスマートフォンの画面しかありません。パソコンではどうなりますか？
スマートフォン向けのデザインは、広い画面では中央の1列として作成されるので、パソコンでもアプリを使えます。
Figma のファイルではないと言われます。なぜですか？
FigJam のボード、Figma Slides のスライド、または別のソフトの .fig ファイルの可能性があります。Figma でデザインを開き、ファイル → ローカルコピーを保存… で Figma Design のファイルを保存してください。