mcpField
F
F2C MCP Server

F2C MCP Server

ローカル
f2c.yy.comメディア・デザイン41048 週間前に更新
リポジトリ公式サイト

F2C MCP Server について

F2C MCP Server は、F2C を用いて Figma デザインをコードに変換する MCP サーバーです。AI コーディングツールから直接 Figma のデザインデータを扱いたい開発者を対象とし、HTML/CSS の出力に対応します。

主な機能

  1. 01ピクセル単位の HTML/CSS 生成
  2. 02React、CSS Modules、Tailwind CSS への対応
  3. 03Figma URL からのデザインノード変換
  4. 04AI ツール向けのデザインコンテキスト取得
  5. 05リモート画像のローカルアセット化

活用シーン

  1. 01Cursor や Trae で Figma ノードをフロントエンドコードに変換
  2. 02デザイン画像をローカルアセットとしてダウンロード
  3. 03AI コーディングツールに Figma のデザイン情報を提供

MCP 対応

本プロジェクトは MCP サーバーであり、Figma ノードデータの取得、画像ダウンロード、デザインからコードへの変換機能を MCP クライアントに公開します。

#f2c#mcp#figma#html#css#ai-coding-assistant#d2c

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "f2c": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": "<personalToken>"
      }
    }
  }
}
起動コマンドnpx -y @f2c/mcp
設定が必要な環境変数
personalTokenシークレット

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@f2c/mcp

ツール

2

掲載時のツール一覧 · 3 週間前に更新

パラメーター型必須説明
fileKeystringはいファイル URL に含まれる Figma ファイル識別子（例：https://www.figma.com/file/XXXXXXXXXXXX/）。XXXXXXXXXXXX の部分を fileKey として抽出します。
idsstringはい変換する Figma ノード ID のカンマ区切りリスト。ノード ID を取得するには、Figma で要素を選択し、右クリックして "Copy/Paste as" → "Copy ID" を選択します。
personalTokenstringいいえAPI 認証に使用する Figma の個人用アクセストークン。このツールの呼び出し時にパラメーターを指定する必要はありません。
localPathstringいいえアセット（画像など）とコードを保存する絶対パス。ディレクトリが存在しない場合は作成されます。パスは OS 固有の形式に従い、特殊文字をエスケープする必要はありません。このパスを設定すると、コード関連の静的リソースはすべてこのディレクトリに保存され、その他のアセット（画像など）は、このパスの下にある assets という名前のサブディレクトリに保存されます。
imgFormatenumいいえ画像アセットのエクスポート形式："png" はロスレス品質、"jpg" は圧縮ファイル、"svg" はベクター画像です。png | jpg | svg
scaleSizenumberいいえ画像のエクスポート倍率（1-4）。値が大きいほど品質は向上しますが、ファイルサイズも大きくなります。

詳細

F2C MCP Server

MCP Server smithery badge npm version npm downloads github node

Figma REST API のレート制限の影響を受けている場合は、正常に動作させるために@f2c/mcp-pluginに切り替えてください。

英語 | 简体中文

F2Cを使用して、Figma デザインをコードに変換する Model Context Protocol サーバーです。

f2c-mcp-server MCP server

特長

f2c
  • 🎨 ピクセル単位で忠実な HTML/CSS：F2C は Figma のデザインを、精度の高い HTML/CSS に変換します。
  • ⚛️ 複数のフレームワークに対応：F2C は React、CSS Modules、Tailwind CSS のコードを生成し、迅速な開発を可能にします。
  • 🧠 Figma デザインのコンテキスト：F2C はデザインのコンテキストを統合し、Cursor などの AI ツールとの互換性を確保します。
  • 🔗 Figma ファイル URL の解析：F2C は Figma の URL を使ってデザインノードを変換し、ワークフローを効率化します。
  • 🖼️ リモート画像のローカル保存：F2C は Figma の画像をローカルアセットに自動でダウンロードし、作業を効率化します。

動作の仕組み

  1. MCP 対応 IDE（Cursor、Trae など）でサーバーを設定します。

Comate AI IDEの使用を推奨します。

  1. IDE でチャットを開きます（例：Cursor のエージェントモード）。
  2. Figma ノードへのリンクを貼り付けます（Figma のレイヤーパネルで任意のノードを右クリックしてコピーします）。
  3. ノードデータの取得、画像のダウンロード、コードへの変換などの要件をチャットに入力します。

設定と開発

設定と開発を参照してください。

データプライバシーに関する通知

このプロジェクトに統合されているログツールは、基本的な利用統計とエラーログの報告のみを目的として使用されます。機密情報やユーザーデータは収集されません。報告されたデータは、製品の品質とユーザーエクスペリエンスの向上にのみ使用されます。

よくある質問

FAQを参照してください。

クレジット

以下のプロジェクトに感謝します。

  • Framelink Figma MCP Server この Model Context Protocol サーバーを使うと、Cursor などの AI 搭載コーディングツールから Figma ファイルにアクセスできます。
  • Cursor Talk to Figma MCP Cursor が Figma と通信し、デザインを読み取ったり、プログラムで変更したりできるようにします。
  • Figma MCP Server このサーバーは、ModelContextProtocol を通じて Figma デザインの表示、コメント、分析を行うツールを提供します。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。