メインコンテンツへスキップ

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.

Model Context Protocol（MCP）を使ってAgentとFigmaデザインをチャット内で直接操作します。Figmaリンクを貼り付けると、レイヤーの探索、変数やコンポーネントの抽出、スクリーンショットの撮影、選択したフレームからのコード生成ができます。
シート要件：Agentチャット機能にはFigmaのDevまたはFullシートを推奨します。Free、Starter、ViewerシートはMCPツール呼び出しが月6回に制限されます。replit.com/importのインポートフローには別の制限があります。詳細はレート制限をご覧ください。
FigmaデザインをAIで新しいアプリに変換したいですか？FigmaデザインをインタラクティブなアプリにするAIガイドをご覧ください。
Figma MCPインテグレーションはリモートサーバーを使用します。Agentでこの機能を使うためにFigmaデスクトップアプリを実行またはインストールする必要はありません。

​
機能

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

​
デモ

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

​
使い方

​
Agentチャットで接続する

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

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

リンクベースのワークフローを使って、デザインの正確な部分を操作します：
  1. Figmaで任意のフレームまたはレイヤーへのリンクをコピーします。
  2. チャットボックスでAgentにURLを共有し、やりたいことを説明します。
Figmaで、Agentに操作させたい正確なフレームまたはレイヤーへのリンクをコピーします：
Figmaでフレームを選択する
次に、Agentにリンクと短い指示（例えば「このフレームのReactコードを生成して」）を一緒に貼り付けます：
AgentのチャットボックスにURLを共有する

​
MCP呼び出しを確認する

Used Figma MCP（Beta）というタイムラインイベントを開いて、基礎となるリクエストとレスポンスを確認します。 タイムラインイベントを展開してMCP呼び出しを確認する場所：
Figmaインテグレーションへのチャット履歴のMCP呼び出しを表示する展開されたチャットイベント
FigmaへのMCPアクセスは読み取り指向であり、Figmaの権限に従います。ファイルがプライベートであるかアクセス権がない場合、インテグレーションはコンテンツを取得できません。

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

FigmaはFigmaプランとシートタイプに基づいてMCPツール呼び出しのレート制限を設けています。これらの制限はReplitではなくFigmaによって設定されています。
シートタイプStarter / FreePro / OrganizationEnterprise
View, Collab6回/月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プランにアップグレードします。
詳細については、Figmaのプラン、アクセス、権限ドキュメントを参照してください。

​
接続を管理する

Figmaインテグレーションの管理または切断はreplit.com/integrationsで行えます。 ReplitインテグレーションページからFigmaインテグレーションを検索・管理します：
Figmaインテグレーションを表示するインテグレーションパネル