Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
MCP server that reads local Figma .fig files, fully offline
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"figme": {
"command": "npx",
"args": [
"-y",
"figme-mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add figme -- npx -y figme-mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"figme": {
"command": "npx",
"args": [
"-y",
"figme-mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"figme": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figme-mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント ntson9p で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(1.1.1)がレジストリに届いたのは2 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
An MCP server that lets your AI agent read Figma .fig files — offline, with no Figma account or API token.
Save a design from Figma as a .fig file, and your agent can read everything in it: layers and layout, colours, text, components, design tokens and images. figme can also draw any frame as a picture, so the agent can compare what it built with the design.
you: "what does the tab component in design.fig look like?"
fig_overview → 10 pages, 2,046 components, 273 variables, 212 images fig_find → "lv2/tab/large" is 2:1337, on page "Page 1" fig_style → display:flex, direction:row, gap:8, padding:"8px 16px", cornerRadius:4, stroke #FFFFFF bound to variable "tab/large/underline" (active #FFFFFF / inactive #333333)
fig_render draws any layer as a PNG or SVG..fig carries the schema that describes it, and figme decodes the file with that schema, so fields Figma adds later don't break it.You need Node.js 22.15 or newer.
1. Save the design as a `.fig` file. In Figma, choose File → Save local copy… If it's a Community file, click Open in Figma first.
2. Add figme to your agent. In Claude Code:
claude mcp add figme -- npx -y figme-mcp
For Cursor, VS Code, Windsurf and other clients, see Set up your client.
3. Ask. Give the full path to the file, and paste a Figma link if you have one:
Using figme, read /Users/me/Desktop/App.fig and build this frame as a React component:
https://www.figma.com/design/AbC123/App?node-id=3017-121
The agent picks the tools from there. A few more things to try:
Every client runs the same command, npx -y figme-mcp. Only the place you put it changes.
Claude Code
claude mcp add figme -- npx -y figme-mcp # this project
claude mcp add -s user figme -- npx -y figme-mcp # every project
To share the server with everyone who works on a repository, commit a .mcp.json at its root:
{
"mcpServers": { "figme": { "command": "npx", "args": ["-y", "figme-mcp"] } } }
The Claude Code extensions for VS Code and JetBrains use this same configuration. They don't read the editor's own MCP settings.
Cursor
Add this to ~/.cursor/mcp.json for every project, or to .cursor/mcp.json for one:
{
"mcpServers": { "figme": { "command": "npx", "args": ["-y", "figme-mcp"] } } }
VS Code (GitHub Copilot)
From a terminal:
code --add-mcp '{"name":"figme","command":"npx","args":["-y","figme-mcp"]}'
Or add this to .vscode/mcp.json. VS Code uses the key servers, not mcpServers:
{
"servers": { "figme": { "type": "stdio", "command": "npx", "args": ["-y", "figme-mcp"] } } }
Then switch the Chat view to Agent mode.
Windsurf
Add this to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": { "figme": { "command": "npx", "args": ["-y", "figme-mcp"] } } }
Other clients
Any client that can start a local (stdio) MCP server works. Give it:
{ "command": "npx", "args": ["-y", "figme-mcp"] }
Config file locations change between client releases. If a path above doesn't match what you see, check your client's MCP documentation.
On Windows, some clients can't find npx by themselves. If the server doesn't start, run it through cmd:
{ "command": "cmd", "args": ["/c", "npx", "-y", "figme-mcp"] }
fig_overview reports with the name in the link, or ask the agent to find the layer by name instead..fig takes about 900 MB of RAM once parsed, and figme keeps up to 4 parsed files. On a smaller machine, keep just one: { "command": "npx", "args": ["-y", "figme-mcp", "--max-files", "1"] }
Your agent picks these on its own; you don't need to name them.
| Tool | What it gives the agent |
|---|---|
fig_overview | The pages, node counts, and how many components, variables and images the file has |
fig_tree | The layer tree under a node, a few levels at a time, instances opened |
fig_node | One layer in detail: size, position, corner radii, auto-layout, children |
fig_find | Layers whose name or text contains a string |
fig_text | All the text, with fonts and mixed styles |
fig_style | Fills, strokes, effects and typography, with auto-layout as CSS flexbox |
fig_components | The components, their properties, and how often each is used |
fig_instance | What an instance changes from its component |
fig_variables | Design tokens: every collection, mode and value |
fig_image | Embedded images, and the file's thumbnail |
fig_blob | Raw vector data, for anything the other tools don't decode |
fig_render | A PNG or SVG picture of any layer or page |
Parameters and example responses for each are in docs/tools.md.
.fig. It writes a file only when you ask fig_image or fig_render to save one..fig holds the design as it was when you saved it. When the design changes, save it again; figme picks up the new file.fig_render approximates a few effects, such as background blur and angular gradients, and skips a few things, such as emoji. Every render lists what it approximated or skipped. See docs/rendering.md.fig_blob returns their raw bytes.Issues and pull requests are welcome. CONTRIBUTING.md explains how to build from source and run the tests, and how the parser works.
MIT