Figma Context MCP — GLips

Figma Context MCP — GLips

GLipsMIT
15k звёзд1.2k форков
Сервер Figma-Context-MCP подключает AI-ассистента (Cursor, Claude Desktop и других) к данным из Figma. Вы даёте ссылку на дизайн — ассистент получает структурированное описание макета: расположение элементов, размеры, отступы, цвета, шрифты и другие CSS-свойства. В отличие от передачи скриншотов, этот подход передаёт точные метрики и атрибуты. Модель может в один запрос сгенерировать код, совпадающий с дизайном до пикселя. Сервер автоматически сокращает передаваемые данные, оставляя только значимую информацию для конкретного фрейма или компонента.
ДизайнРазработкаFigma
Подключить MCPОткрыть на GitHub
Подключение

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

Выберите способ запуска и свой 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": {
      "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 — GLips

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

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

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

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

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

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

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

Общее

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

Технологии

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

Описание

Возможности

  • Принимает ссылку на Figma-файл, фрейм или группу и возвращает структурированные данные.
  • Передаёт AI-модели точные CSS-свойства: размеры, отступы, цвета, типографику.
  • Фильтрует избыточную информацию, оставляя только релевантные данные для заданного фрейма.
  • Поддерживает иерархию элементов: вложенные группы и слои передаются в виде древовидной структуры.
  • Экспортирует данные о текстовых стилях, заливках, обводках, эффектах теней.
  • Запрашивает информацию как для всего документа, так и для отдельных компонентов.
  • Упрощает ответ модели, уменьшая количество токенов без потери точности.

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

1. Установите Node.js, если он ещё не установлен.

2. Получите персональный токен доступа к Figma API в настройках профиля (Settings > Personal Access Tokens).

3. Добавьте следующую конфигурацию в файл настроек вашего MCP-клиента (для Cursor — .cursor/mcp.json, для Claude Desktop — claude_desktop_config.json):

{ "mcpServers": { "figma-mcp": { "command": "npx", "args": ["-y", "figma-developer-mcp"], "env": { "FIGMA_ACCESS_TOKEN": "ваш_токен" } } } }

4. Перезапустите клиент, чтобы сервер подключился.

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

  • «По этой ссылке [URL] реализуй дизайн главной страницы на React с Tailwind CSS.»
  • «Получи данные из фрейма «Login Form» и создай форму в HTML/CSS без фреймворков.»
  • «Найди в макете все заголовки и выпиши их стили (шрифт, размер, цвет) в виде SCSS-переменных.»
  • «Разбей интерфейс на компоненты на основе Figma-структуры и сгенерируй React-файлы.»

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

  • Язык: TypeScript
  • Транспорт: stdio
  • Лицензия: MIT
  • Установка: npx -y figma-developer-mcp
  • Совместимость: Cursor, Claude Desktop и любые MCP-клиенты (поддерживающие stdio)

Поделиться