> ## 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 MCPインテグレーション

> MCPを通じてAgentをFigmaに接続し、レイヤーの探索、デザインデータの抽出、デザインからのコード生成を行う方法を説明します。

Model Context Protocol（MCP）を使ってAgentとFigmaデザインをチャット内で直接操作します。Figmaリンクを貼り付けると、レイヤーの探索、変数やコンポーネントの抽出、スクリーンショットの撮影、選択したフレームからのコード生成ができます。

<Note>
  <strong>シート要件：</strong>Agentチャット機能にはFigmaの<strong>Dev</strong>または<strong>Full</strong>シートを推奨します。Free、Starter、ViewerシートはMCPツール呼び出しが月6回に制限されます。<a href="/build/figma-to-app">replit.com/import</a>のインポートフローには別の制限があります。詳細は<a href="#rate-limits-and-figma-seat-requirements">レート制限</a>をご覧ください。
</Note>

<Callout>
  FigmaデザインをAIで新しいアプリに変換したいですか？<a href="/build/figma-to-app">FigmaデザインをインタラクティブなアプリにするAIガイド</a>をご覧ください。
</Callout>

<Note>
  Figma MCPインテグレーションは<strong>リモートサーバー</strong>を使用します。Agentでこの機能を使うためにFigmaデスクトップアプリを実行またはインストールする必要はありません。
</Note>

## 機能

* **スターターコードを生成する**：選択したフレームを本番対応のコードに変換して、機能の実装を素早く開始します。
* **デザインデータを抽出する**：ファイル内で定義された変数、コンポーネント、レイアウト仕様にアクセスします。
* **フレームスクリーンショットを撮影する**：任意のフレームからビジュアルリファレンスを作成して実装を支援します。
* **MCAアクティビティを確認する**：チャットイベントを展開して生のリクエストとレスポンスを表示します。

## デモ

リンク検出からコード生成までのワークフローのクイックウォークスルーをご覧ください：

<Frame>
  <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/figma-mcp-v3.mp4" />
</Frame>

## 使い方

### Agentチャットで接続する

1. プロジェクトエディターでAgentチャットを開きます。
2. メッセージボックスに有効なFigmaファイルまたはプロトタイプのリンクを貼り付けます。
3. 有効なリンクが検出されると、<strong>Figmaデザイン</strong>カードが表示されます。**Figmaでログイン**をクリックして認証します。

サポートされているリンクを貼り付けた後、Agentは素早い認証のためにFigmaデザインカードを表示します：

<Frame>
  <img src="https://mintcdn.com/replit/SLo-1yBQr-cqDnLT/images/replitai/mcp-figma/figma-design-card.png?fit=max&auto=format&n=SLo-1yBQr-cqDnLT&q=85&s=91abb671ede47c85eaadc4b5f5faf88e" alt="有効なFigmaリンクを貼り付けるとAgentチャットにFigma接続カードが表示される" width="475" height="216" data-path="images/replitai/mcp-figma/figma-design-card.png" />
</Frame>

### Figmaリンクを使って作業する

リンクベースのワークフローを使って、デザインの正確な部分を操作します：

1. Figmaで任意のフレームまたはレイヤーへのリンクをコピーします。
2. チャットボックスでAgentにURLを共有し、やりたいことを説明します。

Figmaで、Agentに操作させたい正確なフレームまたはレイヤーへのリンクをコピーします：

<Frame>
  <img src="https://mintcdn.com/replit/SLo-1yBQr-cqDnLT/images/replitai/mcp-figma/client-link.png?fit=max&auto=format&n=SLo-1yBQr-cqDnLT&q=85&s=25c66c48dac21b5fe527c32f0586e4f9" alt="Figmaでフレームを選択する" width="1000" height="612" data-path="images/replitai/mcp-figma/client-link.png" />
</Frame>

次に、Agentにリンクと短い指示（例えば「このフレームのReactコードを生成して」）を一緒に貼り付けます：

<Frame>
  <img src="https://mintcdn.com/replit/SLo-1yBQr-cqDnLT/images/replitai/mcp-figma/agent-chat.png?fit=max&auto=format&n=SLo-1yBQr-cqDnLT&q=85&s=2e1d278c4f81028e2cb11b475435cb2b" alt="AgentのチャットボックスにURLを共有する" width="921" height="495" data-path="images/replitai/mcp-figma/agent-chat.png" />
</Frame>

### MCP呼び出しを確認する

<strong>Used Figma MCP（Beta）</strong>というタイムラインイベントを開いて、基礎となるリクエストとレスポンスを確認します。

タイムラインイベントを展開してMCP呼び出しを確認する場所：

<Frame>
  <img src="https://mintcdn.com/replit/SLo-1yBQr-cqDnLT/images/replitai/mcp-figma/mcp-calls.png?fit=max&auto=format&n=SLo-1yBQr-cqDnLT&q=85&s=a0277ab413c385d4c2ef9e2d3a30e26f" alt="Figmaインテグレーションへのチャット履歴のMCP呼び出しを表示する展開されたチャットイベント" width="725" height="928" data-path="images/replitai/mcp-figma/mcp-calls.png" />
</Frame>

<Callout>
  FigmaへのMCPアクセスは読み取り指向であり、Figmaの権限に従います。ファイルがプライベートであるかアクセス権がない場合、インテグレーションはコンテンツを取得できません。
</Callout>

## レート制限とFigmaシート要件

FigmaはFigmaプランとシートタイプに基づいてMCPツール呼び出しのレート制限を設けています。これらの制限はReplitではなくFigmaによって設定されています。

| シートタイプ           | Starter / Free | Pro / Organization | Enterprise |
| ---------------- | -------------- | ------------------ | ---------- |
| **View, Collab** | 6回/月           | 6回/月               | 6回/月       |
| **Dev, Full**    | —              | 200回/日             | 600回/日     |

DevとFullシートには分あたりの制限もあります：Proでは10回/分、Organizationでは15回/分、Enterpriseでは20回/分。

### 制限にカウントされるもの

レート制限は`get_design_context`や`get_image`などのFigmaからデータを読み取るツールに適用されます。`whoami`や`generate_figma_design`などの一部のツールは対象外です。

### レート制限に達した場合

AgentはFigmaのレート制限に達したことを通知します。制限を増やすには：

* **Starterプランまたは無料アカウントの場合**：DevまたはFullシートを持つPro、Organization、またはEnterpriseプランにアップグレードします。
* **ViewまたはCollabシートの場合**：現在のプランでDevまたはFullシートにアップグレードします。
* **Dev/Fullシート（Organization）の場合**：最高の制限を得るためにEnterpriseプランにアップグレードします。

詳細については、<a href="https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions" target="_blank" rel="noreferrer">Figmaのプラン、アクセス、権限ドキュメント</a>を参照してください。

### 接続を管理する

Figmaインテグレーションの管理または切断は<a href="https://replit.com/integrations" target="_blank" rel="noreferrer">replit.com/integrations</a>で行えます。

ReplitインテグレーションページからFigmaインテグレーションを検索・管理します：

<Frame>
  <img src="https://mintcdn.com/replit/SLo-1yBQr-cqDnLT/images/replitai/mcp-figma/managing-mcps.png?fit=max&auto=format&n=SLo-1yBQr-cqDnLT&q=85&s=800e9bfe4881c4ec6785646f11151198" alt="Figmaインテグレーションを表示するインテグレーションパネル" width="2384" height="468" data-path="images/replitai/mcp-figma/managing-mcps.png" />
</Frame>
