Figma-Context-MCP README

The project's README from github.com/GLips/Figma-Context-MCP. As one markdown file: README.md.

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

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

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.

Figma-Context-MCP (GLips/Figma-Context-MCP)

Searching Database…

16K ·GitHub
Figma-Context-MCP
Что это такое?Это MCP-сервер Framelink: он даёт ИИ-агентам для кодинга вроде Cursor прямой доступ к вашим файлам Figma, чтобы они могли воплотить дизайн из реальных данных о вёрстке и стилях с первого раза.
Это плагин для Cursor или то, что я запускаю отдельно?Это отдельный серверный процесс, а не плагин. Вы регистрируете его в конфигурационном файле MCP своего редактора, и редактор общается с ним по протоколу Model Context Protocol; он написан на TypeScript и работает на Node.js.
Как заставить его работать с Cursor?Добавьте запись figma-developer-mcp в конфигурационный файл MCP вашего редактора — в README есть готовые JSON-примеры для macOS/Linux и Windows. Ваш API-ключ Figma указывается в конфиге, либо можно задать переменные окружения FIGMA_API_KEY и PORT в поле env.
Мне нужен токен доступа к Figma для этого?Да — сначала нужно создать токен доступа к Figma API; это единственные учётные данные, которые требуются. Сам сервер работает на Node.js 20.20.0 или новее.
Он работает с чем-то, кроме Cursor?Он создан и настроен специально для Cursor, но поскольку MCP — это стандартный протокол, его могут настроить и использовать другие совместимые с MCP ИИ-клиенты.
Что происходит с моими данными из Figma — всё это отправляется модели?Нет. Прежде чем ответить, сервер упрощает и преобразует ответ Figma API так, что до модели доходит только самая важная информация о вёрстке и стилях — заодно это делает ответы модели точнее.
Чем это лучше, чем просто вставить скриншот моего дизайна в Cursor?Тем, что агент получает реальные значения вёрстки и стилей из Figma, а не пиксели — в README сказано, что Cursor гораздо точнее воплощает дизайн с первого раза, когда у него есть данные дизайна Figma, чем при работе со скриншотами.
Как выглядит рабочий процесс после настройки?Откройте чат с агентом в своей IDE, вставьте ссылку на файл, фрейм или группу в Figma и попросите реализовать дизайн — агент через сервер получит нужные метаданные из Figma и напишет код.
Пользоваться этим платно?Нет — сервер с открытым исходным кодом под лицензией MIT. Нужен только собственный аккаунт Figma, чтобы создать токен доступа, с которым он проходит аутентификацию.
What are similar projects?design-extract, Trail-Code, claude-context, lean-ctx, Baize, onlook, context7, headroom
Which topics is it in?design-to-code, figma, context-engineering, ai-coding, model-context-protocol, design, cursor, mcp-server, coding-agent, mcp, frontend, api
Creator
GLips
Size
6.4 MB
Stars
16K
Updated
CommitJun 24Releasev0.13.2Jun 18
Age
1y
Commits · 90 Days