mcpField
F
Framelink Figma MCP Server

Framelink Figma MCP Server

ローカル
github.com/UDILGUメディア・デザイン078 週間前に更新
リポジトリ

Framelink Figma MCP Server について

Framelink Figma MCP Server は、コーディングエージェントに Figma のファイルデータを提供し、デザイン実装を支援します。API の応答を整理し、レイアウトやスタイルに関する情報を絞り込みます。

主な機能

  1. 01Figma のファイル、フレーム、グループ情報を取得
  2. 02API 応答を整理して関連情報を抽出
  3. 03コーディングツールでのデザイン実装を支援
  4. 04Figma アクセストークンで設定

活用シーン

  1. 01IDE で Figma のフレームを実装
  2. 02コーディングエージェントにレイアウトとスタイルの情報を渡す

MCP 対応

MCP クライアントに Figma のデザインデータを提供します。クライアントは Figma のリンクを渡し、返されたメタデータをコード生成のコンテキストとして利用できます。

設定

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

mcp.json · 共通設定
{
  "mcpServers": {
    "MCP-server-with-image": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}
起動コマンドnpx -y figma-developer-mcp

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

パッケージ
npmfigma-developer-mcp

ツール

2

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

パラメーター型必須説明
fileKeystringはい取得する Figma ファイルのキー。通常、指定された URL（例：figma.com/(file|design)/<fileKey>/...）にあります
nodeIdstringいいえ取得するノードの ID。多くの場合、URL パラメーター node-id=<nodeId> にあります。指定されている場合は必ず使用してください。標準ノードには '1234:5678' の形式を使用し、深くネストされたインスタンスノードには 'I5666:180910;1:10515;1:10336' の形式を使用します（セミコロンで連結されたパスはインスタンスのオーバーライドチェーンを表します。複数ではなく単一のノード ID です）。
depthnumberいいえ任意。ユーザーから明示的に要求されない限り使用しないでください。ノードツリーをたどる深さを指定します。

詳細

Framelink

Framelink Figma MCP Server

🌐 対応言語： 한국어 (韓国語) | 日本語 (日本語) | 中文 (中国語)

コーディングエージェントにFigmaデータへのアクセスを提供します。
あらゆるフレームワークでデザインを一度の指示で実装できます。
週間ダウンロード数 MITライセンス Discord
Twitter

このModel Context Protocolサーバーを使って、Cursorやその他のAI搭載コーディングツールにFigmaファイルへのアクセスを提供できます。

CursorがFigmaのデザインデータにアクセスできると、スクリーンショットを貼り付けるなどの別の方法よりも、デザインを正確に一度の指示で実装する能力が格段に向上します。

クイックスタートの手順を見る →

デモ

Figmaのデザインデータを使ってCursorでUIを構築するデモを見る

動画を見る

仕組み

  1. IDEのチャットを開きます（例：Cursorのエージェントモード）。
  2. Figmaファイル、フレーム、またはグループへのリンクを貼り付けます。
  3. Figmaファイルを使って実行したいことをCursorに依頼します。たとえば、デザインの実装を依頼します。
  4. CursorがFigmaから関連するメタデータを取得し、それを使ってコードを作成します。

このMCPサーバーは、Cursorでの使用に特化して設計されています。Figma APIから取得した情報を返す前に、モデルに最も関連性の高いレイアウトとスタイル情報だけが渡されるよう、応答を簡素化して変換します。

モデルに渡すコンテキストの量を減らすことで、AIの精度が向上し、より関連性の高い応答を得られます。

はじめに

多くのコードエディターやその他のAIクライアントでは、設定ファイルを使ってMCPサーバーを管理します。

figma-developer-mcpサーバーは、設定ファイルに以下を追加して設定できます。

注意：このサーバーを使うには、Figmaアクセストークンを作成する必要があります。Figma APIアクセストークンの作成方法については、こちらをご覧ください。

MacOS / Linux
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
Windows
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

または、envフィールドでFIGMA_API_KEYとPORTを設定できます。

Framelink Figma MCPサーバーの設定について詳しくは、Framelinkのドキュメントをご覧ください。

スター履歴

スター履歴グラフ

詳細情報

Framelink Figma MCP サーバーはシンプルながら強力です。Framelink のサイトでさらに詳しく学び、最大限に活用しましょう。

スポンサー

🥇 ゴールドスポンサー
Framelink
Framelink
🥈 シルバースポンサー
🥉 ブロンズスポンサー
😻 小規模支援者

コメント

Markdown 対応

MCP は初めてですか？

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

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