> ## 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デザインをReplit Designにインポートする

> FigmaのフレームをReplit Designにインポートし、提案とチャットで磨き上げて、インタラクティブなアプリへと構築しましょう。

⏰ *所要時間: 約15分*

Figmaのデザインは、体験がどのように見えるべきかを示しています。Replit DesignはFigmaのフレームをデザインフレームに変換し、そこから探索・改良し、インタラクティブなアプリへと構築できるようにします。

この例では、Figma Communityの [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) を使用します。

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-import-result.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=5def987784c7ec7b20e07c1c5bc422d0" alt="Replit DesignにデザインフレームとしてインポートされたPersonal Fitness Trainerのランディングページ。チャットパネルで実行完了と表示されている" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-import-result.webp" />
</Frame>

## 始める前に

以下が必要です。

* [Replitアカウント](https://replit.com)。
* [Figma](https://www.figma.com) アカウントと、インポートしたいファイル（または上記のサンプルファイル）。

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

フレームをReplit Designに取り込み、Agentに動作するデザインへと変換させましょう。

<Steps>
  <Step title="Figmaフレームのリンクを取得する">
    自分のFigmaファイルを使うか、このガイドの例であるFigma Communityの [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) に沿って進めます。

    Figmaで、インポートしたいフレームを右クリックし、**Copy/Paste as** を選んで **Copy link to selection** を選択します。

    <Frame caption="Figmaで開いたPersonal Fitness Trainer Template。これからインポートするCoverフレームが表示されている。">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-example-file.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=f33611aecd9b2d5be89aa1f571648f41" alt="Figmaで開いたPersonal Fitness Trainer Template。レイヤーパネルとキャンバス上にCoverフレームが表示されている" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-example-file.webp" />
    </Frame>
  </Step>

  <Step title="Replit Designを開く">
    [replit.com/design](https://replit.com/design) にアクセスし、プロンプトボックスの下にある **Import Figma** を選択します。

    <Frame caption="Replit DesignのホームにあるImport Figma: Figmaフレームを取り込み、Agentが動作するデザインに変換します。">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/design-import-figma.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=fc26c263f135d7e07f96ae0fda91b7e8" alt="プロンプトボックスの下でImport Figmaオプションが選択されたReplit Designのホーム。「Bring in a Figma frame and Agent will turn it into a working design」というツールチップが表示されている" width="2293" height="1322" data-path="images/fitstart/turn-mockup-into-app/design-import-figma.webp" />
    </Frame>
  </Step>

  <Step title="URLを貼り付けて構築を始める">
    **Import Figma design** ダイアログにフレームのURLを貼り付け、**Attach to prompt** を選択します。フレームがプロンプトに添付されるので、送信して構築を開始します。

    <Frame caption="フレームのURLを貼り付けて、プロンプトに添付する準備が整ったImport Figma designダイアログ。">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/design-figma-url.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=a23e7d3006334164da7494a8dd76591e" alt="Replit DesignのImport Figma designダイアログ。入力欄にFigmaフレームのURLが貼り付けられ、Attach to promptボタンが表示されている" width="2293" height="1440" data-path="images/fitstart/turn-mockup-into-app/design-figma-url.webp" />
    </Frame>
  </Step>
</Steps>

Agentがフレームをインポートし、あなたのプロジェクト内でデザインフレームとして再構築します。

<Frame caption="インポートされたPersonal Fitness Trainerのランディングページが、Replit Designのフレームになった状態。">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-import-result.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=5def987784c7ec7b20e07c1c5bc422d0" alt="Replit DesignにデザインフレームとしてインポートされたPersonal Fitness Trainerのランディングページ。チャットパネルで実行完了と表示されている" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-import-result.webp" />
</Frame>

## 自分好みにする

インポートされたフレームを選択して、形を変えていきましょう。

* **[提案](/ja/design/explore-suggestions)に従う**: インポート時には次のステップの候補が提示されます — 例えばダークなエディトリアル系のバリアント、価格セクション、モバイルビューポートなど。それぞれが新しいフレームとして生成されるため、元のフレームは比較用に残ります。
* **[チャットで相談する](/ja/design/chat-about-your-design)**: フレームの下にある入力欄を使い、自分の言葉でブリーフします。例えば *「ヒーロー画像を差し替えて」*、*「Call to Actionをもっと大胆にして」* のように。

<Frame caption="インポートされたフレームが選択され、ダークなエディトリアル系のバリアント、価格セクション、モバイルビューポートを提案するカードが表示されている。">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-make-it-yours.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=5a7cc45a8468893d26bdc4ef2490b3f1" alt="Replit Designで選択されたインポート済みのPersonal Fitness Trainerフレーム。隣に3つの提案カードが表示されている: Dark editorial variant、Add a pricing section、Mobile viewport" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-make-it-yours.webp" />
</Frame>

## 次のステップ

<CardGroup cols={3}>
  <Card title="提案を探る" icon="lightbulb" href="/ja/design/explore-suggestions">
    ワンクリックずつ、次に何をデザインすべきか探ります。
  </Card>

  <Card title="ビジュアルエディター" icon="pen-to-square" href="/ja/design/visual-editor">
    テキスト、色、スペース、画像を直接磨き上げます。
  </Card>

  <Card title="デザインを構築する" icon="hammer" href="/ja/design/build-your-design">
    完成したフレームを動作するアプリに変換します。
  </Card>
</CardGroup>

## 関連情報

* [Figma MCPインテグレーション](/ja/features/mcp/figma)
* [Canvas](/ja/design/canvas)
* [ビジュアルエディター](/ja/design/visual-editor)

## クレジット

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