Figma MCP Server

Сервер, реализующий протокол MCP (Model Context Protocol) для взаимодействия с API Figma. Предоставляет полный набор методов Figma API в виде инструментов MCP. При работе с большими файлами Figma может потребоваться указать depth = 1 для figma_get_file, а затем увеличивать глубину по мере необходимости.

Инструменты

Сервер реализует все методы Figma API как инструменты MCP.

Методы пользователя

• figma_get_me — получить информацию о текущем пользователе

Методы файлов

• figma_get_file — получить файл Figma по ключу
• figma_get_file_nodes — получить конкретные узлы из файла Figma
• figma_get_images — отрендерить изображения из файла Figma
• figma_get_image_fills — получить заливки изображений в файле Figma
• figma_get_file_versions — получить историю версий файла Figma

Методы комментариев

• figma_get_comments — получить комментарии в файле Figma
• figma_post_comment — добавить комментарий в файл Figma
• figma_delete_comment — удалить комментарий из файла Figma
• figma_get_comment_reactions — получить реакции на комментарий
• figma_post_comment_reaction — добавить реакцию на комментарий
• figma_delete_comment_reaction — удалить реакцию с комментария

Методы команд и проектов

• figma_get_team_projects — получить проекты в команде
• figma_get_project_files — получить файлы в проекте

Методы компонентов

• figma_get_team_components — получить компоненты в команде
• figma_get_file_components — получить компоненты в файле
• figma_get_component — получить компонент по ключу
• figma_get_team_component_sets — получить наборы компонентов в команде
• figma_get_file_component_sets — получить наборы компонентов в файле
• figma_get_component_set — получить набор компонентов по ключу

Методы стилей

• figma_get_team_styles — получить стили в команде
• figma_get_file_styles — получить стили в файле
• figma_get_style — получить стиль по ключу

Методы вебхуков (V2 API)

• figma_post_webhook — создать вебхук
• figma_get_webhook — получить вебхук по ID
• figma_update_webhook — обновить вебхук
• figma_delete_webhook — удалить вебхук
• figma_get_team_webhooks — получить вебхуки команды

Методы аналитики библиотек

• figma_get_library_analytics_component_usages — данные об использовании компонентов
• figma_get_library_analytics_style_usages — данные об использовании стилей
• figma_get_library_analytics_variable_usages — данные об использовании переменных

Установка

Через Smithery

Автоматическая установка для Claude Desktop:

npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude

Вручную

Требования: Node.js v16 или новее, npm или yarn.

# Клонировать репозиторий
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Установить зависимости
npm install

# Собрать пакет
npm run build

Настройка

Для работы сервера требуется токен Figma API. Его можно передать одним из трёх способов:

1. Переменная окружения — создать файл .env в корне проекта или установить переменную напрямую:

   FIGMA_API_KEY=your_figma_api_key
   

2. Аргумент командной строки — при запуске сервера:

   node dist/index.js --figma-token YOUR_FIGMA_TOKEN
   # или короткая форма:
   node dist/index.js -ft YOUR_FIGMA_TOKEN
   

Использование с Claude Desktop

Добавьте в claude_desktop_config.json одну из конфигураций:

Через npx:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

Через Node.js с переменной окружения:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

Через Node.js с аргументом командной строки:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
    }
  }
}

Замените /path/to/mcp-figma на фактический путь к репозиторию.

Примеры

Получить файл Figma

const result = await callTool("figma_get_file", {
  fileKey: "abcXYZ123"
});

Получить комментарии из файла

const comments = await callTool("figma_get_comments", {
  fileKey: "abcXYZ123",
  as_md: true
});

Создать вебхук

const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

Разработка

# Установить зависимости
npm install

# Запустить сервер в режиме разработки
npm start

# Собрать сервер
npm run build

# Запустить с токеном Figma
npm start -- --figma-token YOUR_FIGMA_TOKEN

Лицензия

MIT. Подробнее — в файле LICENSE в репозитории проекта.