ต้นแบบ · เว็บนี้เป็นต้นแบบ แสดงข้อมูลจริง 100 ตัวจากทะเบียนทางการ ยังไม่ครบทุกตัว
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · อธิบายเป็นภาษาคน
โหมดมือใหม่ เปิด
สีหน้าจอตามเครื่องสว่างมืด
ภาษาไทยEnglish
☰ เมนูตั้งค่า
โหมดมือใหม่ เปิด
สีหน้าจอตามเครื่องสว่างมืด
ภาษาไทยEnglish

Figma Context MCP

โดย GLipsรุ่น 0.13.2i★ 16,165iรันบนเครื่อง
ชื่อใน registryio.github.GLips/Figma-Context-MCP

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

  • การเชื่อมต่อ: รันบนเครื่อง
  • ช่องทาง (transport): stdio
  • หมวด: ออกแบบ ภาพ และเสียง
  • ต้องใส่ค่าเหล่านี้: FIGMA_API_KEY

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ต้องเตรียมก่อน

  • npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add figma-context --env FIGMA_API_KEY='ใส่ค่าของคุณ' -- npx -y figma-developer-mcp --stdio

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "ใส่ค่าของคุณ"
      }
    }
  }
}

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "figma-context": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "ใส่ค่าของคุณ"
      }
    }
  }
}

ค่าที่ต้องใส่เอง

  • FIGMA_API_KEY ความลับ จำเป็น env
    Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

ค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 5 พ.ย. 2569

  • ✓ ผ่าน

    ตัวตนผู้ทำตรงกับ repo

    ชื่อใน registry ยืนยันด้วยบัญชี GitHub GLips ซึ่งเป็นเจ้าของ repo

  • ✓ ผ่าน

    ยังมีคนดูแล

    มีการแก้โค้ดล่าสุด 9 วันที่ผ่านมา

  • ✓ ผ่าน

    มีสัญญาอนุญาต (license)

    ใช้ MIT

  • – ไม่เกี่ยว

    endpoint ตอบ

    ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต

  • – ไม่เกี่ยว

    ล็อกอินแบบ OAuth

    ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน

  • … ยังไม่ตรวจ

    คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

    ต้องอ่านรายการเครื่องมือของ server ก่อน จะเริ่มตรวจในขั้นถัดไป

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

  • ดาวมากกว่า 100% ของอีก 14 ตัวในหมวดนี้
  • ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 21% ของอีก 14 ตัวในหมวดนี้
  • ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 14 ตัวในหมวดนี้

เทียบเฉพาะ server ที่อยู่ในต้นแบบนี้ ไม่ใช่ทั้ง registry

คำถามที่พบบ่อย

Figma Context MCP ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

ต้องใส่ค่าเหล่านี้: FIGMA_API_KEY

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด 9 วันที่ผ่านมา และส่งรุ่นล่าสุด (0.13.2) เข้า registry 5 เดือนที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Claude Real Video, Figma MCP Server, Harness

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Claude Real Video

โดย HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

รันบนเครื่อง★ 2,284MITอัปเดต 2 เดือนที่ผ่านมา

Figma MCP Server

โดย figma

server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma

รันบนคลาวด์★ 2,152อัปเดต 13 เดือนที่ผ่านมา

Harness

โดย autonomous-ai

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

รันบนเครื่อง★ 1,428MITอัปเดต 17 วันที่ผ่านมา

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

Framelink MCP for Figma Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions →

Demo

Watch a demo of building a UI in Cursor with Figma design data

How it works

  1. Open your IDE's chat (e.g. agent mode in Cursor).
  2. Paste a link to a Figma file, frame, or group.
  3. Ask Cursor to do something with the Figma file—e.g. implement the design.
  4. Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux
{

"mcpServers": { "Framelink MCP for Figma": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }

Windows
{

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

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink MCP for Figma, see the Framelink docs.

Star History

Learn More

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.

ถาม PopNx