Figma Context MCP

io.github.GLips由 GitHub 帳號 GLips 發布v0.13.2更新於 Oct 24, 2026

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

發布方自己的服務:Figma MCP Server

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

一個本機 MCP 伺服器,讓程式設計助理取得 Figma 檔案資料,進而把設計實作為程式碼。

可以做什麼
依貼上的 Figma 連結取得檔案、畫框或群組資料,並簡化為模型可用的版面與樣式脈絡。把 Figma 脈絡轉成程式碼,在任何框架中實作設計。減少傳送給模型的脈絡量,讓回覆更準確、更相關。
適用情境
適用於在 Cursor 等 AI 程式編輯器中使用,希望助理依據真實 Figma 設計而非截圖來建構介面的情境。
執行需求
透過 stdio 在本機執行,通常以 npx 啟動,需要 Node.js。需要 Figma 個人存取權杖,透過 FIGMA_API_KEY 或命令列參數提供。需要連線至 Figma API 的網路存取。
安裝前請注意
Figma 個人存取權杖屬於機密,避免寫入共用設定檔或提交到版本控制。伺服器會讀取你的 Figma 設計資料,並傳送給 Figma API 及所連線的模型。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Figma Context MCP,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

[Framelink]

Framelink MCP for Figma

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

[weekly downloads] [MIT License] [Discord]
[Twitter]

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

[Watch the video]

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

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

Windows

json
{  "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

[Star History Chart]

Learn More

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

來源:README.md,提交 c083d65

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包,因此其工具未知。

版本歷史

1
  1. v0.13.2最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手;SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

其他 Figma 整合