> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma デザインをインタラクティブなアプリに変換する

> Figma のフレームを Replit にインポートして React アプリに変換し、結果をテストして、インタラクティブな体験に改良しましょう。

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

⏰ *所要時間: 約15分*

Figma のデザインは体験がどのように見えるべきかを示しています。Replit は Figma のフレームをテスト、改良、共有できる React アプリに変換できます。

例として **FitStart** を使います: 動作するワークアウトフォーム、進捗カード、週間目標、モバイルレイアウトが必要なフィットネストラッカーダッシュボードの Figma フレームです。

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-source.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=1aa070bf0d24decf4c9924c6cf80510b" alt="FitStart フィットネストラッカーのソース Figma フレーム。インタラクティブな Replit アプリに変換するダッシュボード、プロフィール、サポート画面が表示されている" width="1920" height="1080" data-path="images/fitstart/turn-mockup-into-app/figma-source.png" />
</Frame>

## 学べること

以下の方法を学びます:

* インポート結果を向上させるために Figma フレームを準備する。
* Figma フレームを Replit にインポートする。
* Replit がデザインから何を保持したかを確認する。
* インポート後に動作、レスポンシブ性、仕上げを改良する。
* インポートされたアプリに変更が必要なときに Agent、Canvas、Visual Editor を使う。

## 始める前に

以下が必要です:

* [Replit アカウント](https://replit.com)。
* インポートしたいフレームが含まれた Figma ファイル。
* Figma アカウントへの接続アクセス。
* アプリに変換したい正確な Figma フレームの URL。

Figma のインポート制限は Figma によって設定されています — 正確な制限とアカウント要件については、Figma 独自のデベロッパードキュメントを確認してください。

## Figma フレームをインポートする

Replit のインポートフローを使ってフレームを React アプリに変換します。

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-import-page.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=381f46b4437197d7caceb78090467d55" alt="Figma Design タイルがハイライトされた Replit インポートページ。選択するとフレームを React アプリに変換する Figma インポートフローが開く" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-import-page.png" />
</Frame>

<Steps>
  <Step title="Replit のインポートを開く">
    [replit.com/import](https://replit.com/import) にアクセスします。
  </Step>

  <Step title="Figma Design を選択する">
    **Figma Design** を選択して、Figma アカウントを接続します。
  </Step>

  <Step title="フレームの URL をコピーする">
    Figma でインポートしたい正確なフレームを選択して URL をコピーします。
  </Step>

  <Step title="貼り付けてインポートする">
    Replit にフレームの URL を貼り付けて **Import** を選択します。
  </Step>
</Steps>

### または Figma をプロンプトに直接添付する

インポートウィザードではなく、ビルドプロンプトと一緒にフレームを Agent に渡したい場合は、プロンプトコンポーザーの添付メニューを使ってください。

<Steps>
  <Step title="Replit を開いてプロンプトボックスをフォーカスする">
    [replit.com](https://replit.com) にアクセスします。プロンプトコンポーザーはホーム画面にあります。
  </Step>

  <Step title="添付メニューを開く">
    プロンプトコンポーザーの **+** ボタンを選択して **Add attachment** メニューを開きます。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-prompt-plus.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=4678037001e3566c12af0cacf342edca" alt="プラスボタンがハイライトされた Replit プロンプトコンポーザー。選択すると Figma デザインをインポートできる Add attachment メニューが開く" width="760" height="320" data-path="images/fitstart/turn-mockup-into-app/figma-prompt-plus.png" />
    </Frame>
  </Step>

  <Step title="Import a Figma design を選択する">
    **Import a Figma design** を選択して、ビルドしたい正確な Figma フレームの URL を貼り付けます。
  </Step>

  <Step title="ビルドする内容を説明する">
    デザインで何をすべきかを Agent に伝える短いプロンプトを入力します — 例えば、何をインタラクティブにすべきか、ビジュアルにどの程度忠実にすべきか、デスクトップとモバイルのどのような動作を期待するかなど。準備ができたら送信します。
  </Step>
</Steps>

Agent がフレームをインポートしてプロンプトに基づいたインタラクティブなアプリをビルドします。ビルドが完了したら Preview でテストしてください。

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-build-result.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=9f0643e91740c5d403d8bc92a1914712" alt="Figma フレームから Agent がビルドしたインタラクティブな FitStart アプリ。統計カード、ワークアウト記録フォーム、今日のエントリ、7日間のトレンドチャートがブラウザタブで動作している" width="1440" height="850" data-path="images/fitstart/turn-mockup-into-app/figma-build-result.png" />
</Frame>

## Replit がインポートするもの

Replit は Figma フレームを使って React プロジェクトを作成します。インポートには以下が含まれる場合があります:

* テーマとコンポーネントのスタイリング。
* 画像とアイコンアセット。
* React プロジェクトのアプリスキャフォールディング。

インポートにより動作する出発点が得られます。デザインが完全には定義していない動作、レスポンシブ性、インタラクションはまだテストが必要です。

## Agent がビルドしたものを確認する

インポート後、Preview を開いてアプリを Figma フレームと比較します。

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-check-what-agent-built.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=813cffb55c2a94d86eebbd92b188ea07" alt="Agent のチェックポイント履歴の隣の Preview で動作しているインポートされた FitStart Personal Fitness Trainer ランディングページ。Figma フレームから Agent がビルドしたヒーロー、返金保証バッジ、統計行が表示されている" width="3452" height="1988" data-path="images/fitstart/turn-mockup-into-app/figma-check-what-agent-built.png" />
</Frame>

ビジュアルの確認:

* レイアウトが Figma フレームに十分近い。
* 色、タイポグラフィ、スペーシング、アセットが保持されている。
* 重要な画像とアイコンが表示されている。
* アプリがデスクトップとモバイルサイズで動作する。

インタラクションの確認:

* ボタンとリンクが期待通りに動作する。
* 必要に応じてフォーム、メニュー、タブ、ナビゲーションが存在する。
* リフレッシュ後もアプリが動作する。
* 欠けているものが Agent に追加を依頼するほど明確である。

## インポート後にアプリを改良する

インポート後に一部の動作を追加する必要がある場合があります。変更がインタラクション、データ、複数の画面、または隠れたロジックに影響する場合は Agent を使ってください。

FitStart の場合、インポートされたデザインをインタラクティブにするよう Agent に依頼します:

<AiPrompt>
  Review this imported FitStart app.<br />
  Keep the visual design close to the Figma frame.<br />
  Make the workout form interactive: a visitor should choose a workout type, enter minutes and a note, then add the workout.<br />
  After submission, update today's workout list and total minutes.<br />
  Preserve the desktop layout and improve the mobile layout if needed.
</AiPrompt>

変更が主にテキスト、色、スペーシング、レイアウト、画像の仕上げである場合は [Visual Editor](/learn/design/visual-editor) を使ってください。

ビジュアルフィードバックにアノテーションをつけたり、バリアントを比較したり、デザイン上で変更すべき点を直接示したい場合は [Canvas](/learn/design/canvas) を使ってください。

### Canvas でレイアウトを比較してアノテーションをつける

Canvas はインポートされたアプリをフリーフォームのボードに変換し、Agent に代替レイアウトを依頼したり、テキストやスケッチでデザインをマークアップしたりできます。

<Steps>
  <Step title="Canvas を開く">
    ワークスペースのペインヘッダーで **Canvas** を選択して、右ペインを Preview から Canvas に切り替えます。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-button.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=2bb7f136351d5fe48d7f8364ac5066f3" alt="Preview と Tools & files の隣に Canvas タブがハイライトされた Replit ワークスペースのペインヘッダー" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-button.png" />
    </Frame>
  </Step>

  <Step title="異なるレイアウトを試す">
    インポートされたモックアップをクリックして **Reimagine** を選択し、**Try different layouts** を選んでください。Agent がコンテンツを維持しながらビジュアル階層を再配置した代替レイアウトを提案します。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-reimagine.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=ebf02908edafd07e2a8b76f694a54332" alt="Try different layouts オプションがハイライトされた Canvas モックアップ上の Reimagine メニュー" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-reimagine.png" />
    </Frame>
  </Step>

  <Step title="提案されたレイアウトを確認する">
    Agent が代替案を生成するのを待ち、ズームアウトしてオリジナルのモックアップと並べて確認します。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-layouts.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=0611161518c09408ea9b4790c541938a" alt="インポートされた FitStart モックアップと Agent のレイアウト提案がチャットパネルに表示された Canvas" width="1440" height="900" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-layouts.png" />
    </Frame>
  </Step>

  <Step title="Text と Draw でアノテーションをつける">
    **Text** を使って Canvas にメモを追加します。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-text-tool.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=d6b2a2422a9199cfa995ddee8f5a6deb" alt="Text ツールがハイライトされた Canvas のアノテーションツールバー" width="720" height="360" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-text-tool.png" />
    </Frame>

    **Draw** を使って変更したい部分を指し示す矢印や図形をスケッチします。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-draw-tool.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=44811ad4c1579c80dd6e1999c97de9ae" alt="Draw ツールがハイライトされた Canvas のアノテーションツールバー" width="720" height="360" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-draw-tool.png" />
    </Frame>
  </Step>

  <Step title="アノテーションを Agent に送信する">
    メモを配置したら、Agent にインポートされたアプリにフィードバックを適用するよう依頼します。

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-annotated.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=6ba511fedb00d712178d5a144359ef0d" alt="ヒーロー統計行を指すテキストアノテーションが付いた Canvas 上のインポートされた FitStart モックアップ" width="1000" height="800" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-annotated.png" />
    </Frame>
  </Step>
</Steps>

<AiPrompt>
  Use my Canvas annotations to refine the imported FitStart app.<br />
  Keep the workout form behavior unchanged.<br />
  Apply the notes to the progress card, weekly goal area, and mobile spacing only.<br />
  Then test that adding a workout still updates today's list and total minutes.
</AiPrompt>

## 必要に応じて Agent で Figma リンクを使う

インポート後、特定のフレームやレイヤーを確認したり、デザインデータを抽出したり、実装をデザインと比較したいときに、Figma のリンクを Agent チャットに貼り付けることができます。

Agent チャット機能には Figma の Dev または Full シートを推奨します。詳細については [Figma MCP インテグレーション](/references/mcp/figma) をご覧ください。

チュートリアルを完了おめでとうございます！Figma フレームをインタラクティブな Replit アプリに変換して、共有・テストできるものに改良しました。

## 次のステップ

<CardGroup cols={2}>
  <Card title="Visual Editor" icon="wand-magic-sparkles" href="/learn/design/visual-editor">
    テキスト、色、スペーシング、画像などの細かいビジュアル詳細を仕上げましょう。
  </Card>

  <Card title="Canvas" icon="palette" href="/learn/design/canvas">
    ビジュアル方向性を比較して、デザイン上に直接フィードバックをアノテーションしましょう。
  </Card>

  <Card title="データベースを追加する" icon="database" href="/build/add-database">
    リフレッシュ後もフォームデータを保持しましょう。
  </Card>

  <Card title="ログインを追加する" icon="lock" href="/build/add-login">
    認証でプライベート画面を保護しましょう。
  </Card>

  <Card title="カスタムドメインを追加する" icon="globe" href="/build/add-custom-domain">
    レビュアーがアプリを試せるパブリック URL を設定しましょう。
  </Card>

  <Card title="チームワークスペースでコラボレーションする" icon="users" href="/references/collaboration/team-workspaces">
    チームメンバーをインポートされたアプリに招待して一緒にビルドしましょう。
  </Card>
</CardGroup>

## 関連

* [Figma MCP インテグレーション](/references/mcp/figma)
* [Canvas](/learn/design/canvas)
* [Visual Editor](/learn/design/visual-editor)

## クレジット

このガイドで使用されているサンプルデザインは、Figma Community の [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) です。