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
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"figme": {
"command": "npx",
"args": [
"-y",
"figme-mcp"
]
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add figme -- npx -y figme-mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"figme": {
"command": "npx",
"args": [
"-y",
"figme-mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"figme": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figme-mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub ntson9p ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.1.1) เข้า registry 2 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
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.
server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ 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