No.1000288新着 Framelink MCP for Figma（GLips/Figma-Context-MCP）：Figmaのデザインデータを読み取りコード作成に使えるMCPサーバー

Framelink MCP for Figma（GLips/Figma-Context-MCP）は、Figmaのデザインデータを、ClaudeなどのAIコーディングツールに読み取らせるMCPサーバーです。Figmaは画面デザインを作るWebツールで、ホームページやアプリの見本画面を作る場面でよく使われます。このツールを入れると、FigmaのファイルやフレームのリンクをAIに渡すだけで、AIが配色・余白・文字の大きさなどの情報を取得し、HTML/CSSなどのコードを書くための材料にできます。デザイナーが作った画面案を、スクリーンショットではなくデータとして渡したい個人事業主や制作担当者が対象です。

GitHubのスター数は記事執筆時点で約1.6万、ライセンスはMITです。npmパッケージ名は figma-developer-mcp で、確認した最新版は0.13.2でした。

READMEによると、Figma APIから取得した情報をそのままAIに渡さず、レイアウトと見た目に関わる情報だけに整理してから渡します。AIに渡す情報量を減らすことで、回答の精度を保つ狙いと説明されています。使い方は、AIチャットにFigmaのファイル・フレーム・グループのリンクを貼り、「このデザインを実装して」などと依頼するだけです。

ソースコードを確認すると、提供されるツールは主に2つです。

なお、READMEは「Cursor向けに設計」と書いています。Claude Code専用の手順はREADMEにありません。MCPサーバーなので、Claude Codeからも設定すれば呼び出せます。

事前に、Figmaのアクセストークンを作成します。Figmaの個人アクセストークンの管理ページ（FigmaのヘルプにREADMEからリンクがあります）で発行します。Node.jsも必要で、package.jsonには「node 20.20.0以上」と記載されています。

READMEが示す設定は、MCPクライアントの設定ファイルに次のJSONを追加する方法です（macOS／Linux）。

{

"mcpServers": {

"Framelink MCP for Figma": {

"command": "npx",

"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]

}

}

}

Windowsでは command を cmd にし、args の先頭に “/c”, “npx” を置く形です。READMEには「FIGMA_API_KEY と PORT を env フィールドで設定することもできる」との記載もあります。

Claude Codeでは claude mcp add コマンドで登録できます。次の例はClaude Code一般の書式に合わせた私たちの書き方で、このリポジトリのREADMEに載っているものではありません。キーを引数ではなく環境変数で渡す形にしています。

claude mcp add figma -e FIGMA_API_KEY=YOUR-KEY -- npx -y figma-developer-mcp --stdio

登録後、Claude Codeを再起動するか /mcp で接続状態を確認し、Figmaのリンクを貼って依頼します。詳しい手順はREADMEが案内する公式ドキュメント（framelink.ai/docs/quickstart）にあります。

Framelink MCP for Figmaは、Figmaのデザイン情報を整理してAIに渡す、npx一行で動くMCPサーバーです。必要なのはNode.jsとFigmaのアクセストークンで、設定ファイルにJSONを1つ追加するだけで導入できます。一方で、トークンの扱いと、標準で有効なテレメトリの設定は、導入前に決めておく項目です。今後実際に使ってみて、使い勝手を別記事で報告する予定です。

（この記事は旧サイト ai.shizuku.net から移しました。元の記事: https://ai.shizuku.net/2026/10/18/framelink-figma-context-mcp/）