Figma Context MCP — felixAnhalt

Figma Context MCP — felixAnhalt

felixAnhaltMIT
3 звёзд
Figma-Context-MCP (ранее Figma To Code MCP) — это MCP-сервер для интеграции Figma с AI-ассистентами. Он извлекает из Figma-файлов только те данные, которые нужны языковым моделям для построения UI и генерации кода. Сервер удаляет внутреннюю разметку Figma (bounding boxes, constraints, прототипы) и сводит файл к чистому описанию дизайна: компоновка, стили, текст, компоненты. Размер данных уменьшается на 99,5% — типичный файл 65 МБ сжимается до 128 КБ. Имена свойств приводятся к CSS-стандарту (backgroundColor, flexDirection и т.д.), что улучшает понимание нейросетью. Сервер подходит разработчикам, которые используют Cursor, Claude Desktop и другие инструменты с MCP для превращения макетов в код. Сервер автоматически разрешает переменные Figma в финальные значения, обрабатывает SVG и сворачивает повторяющиеся паттерны. Всё это AI быстрее и точнее создаёт компоненты на основе дизайн-систем.
ДизайнAI и машинное обучениеFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить Figma Context MCP — felixAnhalt

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

Куда подключить

3

Скопируйте и проверьте

Claude

Official Figma remote MCP server with OAuth.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "figma-context-mcp-felixAnhalt": {
      "url": "https://mcp.figma.com/mcp",
      "transport": "http"
    }
  }
}

Official docs include Claude Code, Codex, Cursor, VS Code, and Xcode setup.

Claude Code plugin and Codex app plugin are preferred paths where available.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Figma Context MCP — felixAnhalt

Figma Context MCP — felixAnhalt относится к Дизайн, AI и машинное обучение, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
TypeScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 1.

Характеристики

Общее

  • СтатусСообщество
  • РазработчикfelixAnhalt
  • ЛицензияMIT

Технологии

  • Языки
    TypeScript
  • Транспорт
    stdio

Описание

Возможности

  • Извлекает данные дизайна из Figma-файла через инструмент get_figma_design — на выходе CSS-совместимая структура, готовая к использованию LLM.
  • Сокращает размер передаваемых данных на 99,5% без потери значимой для UI информации.
  • Приводит имена свойств к CSS: вместо Figma-атрибутов использует backgroundColor, flexDirection, padding и т.д.
  • Сохраняет полную информацию для построения интерфейса: расположение, стили, текст, вложенность компонентов.
  • Автоматически сжимает повторяющиеся UI-паттерны (pattern collapsing), уменьшая дублирование.
  • Экспортирует векторную графику в SVG-файлы на диск для встраивания иконок и иллюстраций в код.
  • Извлекает URL заливок изображений (get_image_fills) — удобно для скачивания ассетов.
  • Рендерит любые узлы Figma в PNG (render_node_images) для быстрой визуализации.
  • Конвертирует векторные узлы в читаемый SVG-код (read_vector_svg) для точного переноса графики.
  • Разрешает переменные Figma в реальные значения (опционально, для Enterprise-планов).

Как подключить

  1. Установите сервер через npx:
    npx -y @tmegit/figma-developer-mcp
  2. Получите персональный токен доступа Figma (Personal Access Token) с правами file_content:read, library_content:read и, опционально, file_variables:read
  3. Добавьте сервер в конфигурацию MCP-клиента, например Claude Desktop. Пример настройки в файле claude_desktop_config.json: { "mcpServers": { "figma-to-code": { "command": "npx", "args": ["-y", "@tmegit/figma-developer-mcp"], "env": { "FIGMA_ACCESS_TOKEN": "ваш_токен_здесь" } } } }
  4. Перезапустите клиент, чтобы сервер начал работу.

Примеры запросов

  • «Покажи структуру главного экрана из Figma в формате для AI-генерации кода»
  • «Извлеки все изображения из макета и дай ссылки на файлы»
  • «Преобразуй все векторные элементы в SVG и сохрани в отдельную папку»
  • «Сгенерируй React-компонент карточки на основе выделенного фрейма»
  • «Создай CSS-стили из этого Figma-файла, используя оптимизированные данные»

Технические детали

  • Язык реализации: TypeScript
  • Транспорт: stdio (встроенный в MCP)
  • Лицензия: MIT
  • Совместимые клиенты: Claude Desktop, Cursor, Continue.dev, и любые MCP-хосты
  • Необходим доступ к API Figma и персональный токен

Поделиться