GLips/Figma-Context-MCP

GLips/Figma-Context-MCP

от glips
Извлекает из макетов Figma стили, шрифты и отступы. Генерирует код под выбранный фреймворк для Cursor, VS Code и других редакторов.
Framelink
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.

Часто задаваемые вопросы

Инструменты были проиндексированы:
download_figma_imagesвнешний мир

Скачивает SVG и PNG-изображения, используемые в файле Figma, по идентификаторам узлов изображений или иконок. Изображения сохраняются относительно директории изображений сервера: /

Скачать изображения Figma

Параметры
  • fileKeystringобязательный

    Ключ файла Figma, содержащего изображения.

  • localPathstringобязательный

    Каталог для сохранения изображений. Укажите путь относительно каталога изображений сервера (например, 'public/images' или 'assets/icons'). Подойдёт любой разделитель. Абсолютные пути принимаются только в том случае, если они указывают внутрь каталога изображений. Если каталога нет, он будет создан.

  • nodesobject[]обязательный

    Узлы для получения в виде изображений.

  • pngScalenumber

    Масштаб экспорта для PNG-изображений. Необязательный параметр, по умолчанию 2, если не указан. Влияет только на PNG-изображения.

get_figma_dataтолько чтение

Получить полные данные Figma-файла, включая макет, контент, визуальные элементы и информацию о компонентах.

Получить данные Figma

Параметры
  • depthnumber

    НЕОБЯЗАТЕЛЬНО. НЕ используйте без явного запроса пользователя. Определяет, на сколько уровней вглубь обходить дерево узлов.

  • fileKeystringобязательный

    Ключ файла Figma, который нужно получить, часто находится в URL вида figma.com/(file|design)/<fileKey>/...

  • nodeIdstring

    Идентификатор узла для получения обычно передаётся как параметр URL node-id=<nodeId>, всегда используйте его, если он указан. Используйте формат '1234:5678' для стандартного узла или 'I5666:180910;1:10515;1:10336' для глубоко вложенного узла-экземпляра (путь, разделённый точкой с запятой, обозначает цепочку переопределений экземпляра; это всё ещё один идентификатор узла, а не несколько узлов).

0.13.2основная
0.13.1
0.13.0
0.12.0
0.11.0
0.10.1
0.10.0
0.9.0
0.8.1
0.8.0
0.7.1
0.7.0
0.6.6
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.3
0.4.2
0.5.0-beta.0
0.4.1
0.4.0
0.3.1
0.3.0
0.2.2
0.2.2-beta.1
0.2.2-beta.0
0.2.1
0.2.0
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0

Выберите клиент, чтобы установить GLips/Figma-Context-MCP:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

{
  "mcpServers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}
CursorCursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}
VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"glips-figma-context-mcp-wfvfcob5xk\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"figma-developer-mcp\",\"--figma-api-key=YOUR-KEY\",\"--stdio\"]}"
ClaudeClaude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}
Claude CodeClaude Code

Добавьте сервер одной командой в терминале:

claude mcp add glips-figma-context-mcp-wfvfcob5xk -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Либо через JSON-конфиг:

claude mcp add-json glips-figma-context-mcp-wfvfcob5xk "{\"command\":\"npx\",\"args\":[\"-y\",\"figma-developer-mcp\",\"--figma-api-key=YOUR-KEY\",\"--stdio\"]}"
CodexCodex

Добавьте сервер командой в терминале:

codex mcp add glips-figma-context-mcp-wfvfcob5xk -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.glips-figma-context-mcp-wfvfcob5xk]
command = "npx"
args = ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
PerplexityPerplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

  1. Откройте Настройки аккаунта → Connectors.
  2. Установите вспомогательное приложение PerplexityXPC (один раз).
  3. Нажмите Add Connector → вкладка Simple.
  4. В поле Server Name укажите GLips/Figma-Context-MCP, а в поле команды запуска — строку ниже:
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Нажмите Save и дождитесь статуса Running.

WindsurfWindsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}
ClineCline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}
Continue

Создайте файл в .continue/mcpServers/ (например glips-figma-context-mcp-wfvfcob5xk.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: glips-figma-context-mcp-wfvfcob5xk
    command: npx
    args:
      - "-y"
      - "figma-developer-mcp"
      - "--figma-api-key=YOUR-KEY"
      - "--stdio"
Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "glips-figma-context-mcp-wfvfcob5xk": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

Похожие MCP-сервера

musepy/genable

musepy/genable

от musepy

Genable — MCP сервер, превращающий текстовый запрос в редактируемые слои Figma: авто-макет, переменные цветов и шрифтов, светлая и темная темы. Полезен дизайнерам и разработчикам для агентных инструментов (Claude Code, Cursor). Совместим с Gemini, Claude, OpenAI.

Astro⭐ 3
vkhanhqui/figma-mcp-go

vkhanhqui/figma-mcp-go

от vkhanhqui

Открытый Figma MCP-сервер с полным доступом на чтение и запись через плагин. Не требует API и не имеет лимитов — подходит дизайнерам и разработчикам. Работает с AI-инструментами. Управляйте стилями...

Go⭐ 1178
themesberg/flowbite-mcp

themesberg/flowbite-mcp

от themesberg

MCP сервер для работы с компонентами Flowbite на Tailwind CSS. Даёт доступ к 60+ UI-элементам, умеет генерировать тему по hex-цвету и превращать Figma-макет в код. Помогает разработчикам быстрее создавать интерфейсы.

JavaScript⭐ 42
kenneives/design-token-bridge-mcp

kenneives/design-token-bridge-mcp

от kenneives

MCP сервер для трансляции дизайн-токенов: извлекает из Tailwind, CSS, Figma или W3C DTCG и генерирует темы под Kotlin, SwiftUI, Tailwind и CSS-переменные. Полезен разработчикам и дизайнерам в пайплайне v0 → Figma → Claude Code.

TypeScript⭐ 5
pzfreo/build123d-mcp

pzfreo/build123d-mcp

от pzfreo

MCP сервер для 3D CAD на build123d, позволяющий AI-агентам создавать, инспектировать и итерировать геометрию. Закрывает цикл обратной связи: AI видит результат, а не пишет вслепую. Полезен инженера...

Python⭐ 121
ethbak/icon-composer-mcp

ethbak/icon-composer-mcp

от ethbak

MCP-сервер для быстрой генерации иконок, логотипов и изображений с эффектами Liquid Glass (iOS 26+). Управляет .icon-бандлами, задаёт стеклянные блики, тени, размытие и тёмную тему. Полезен дизайне...

TypeScript⭐ 61
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин