figma-clipboard-mcp

Чтение макетов Figma прямо из Claude Code: экраны, дерево слоёв со стилями, компоненты дизайн-системы с вариантами, переменные, картинки. Без REST API Figma и без токенов.

Работает на любом месте Figma, включая View: данные берутся из того, что Figma сама кладёт в буфер обмена при копировании.

Как это устроено

При ⌘C Figma кладёт в HTML-флейвор буфера обмена macOS полный бинарный дамп выделенных узлов — контейнер fig-kiwi: схема kiwi под deflate, сцена под zstd. Тот же формат у файлов, сохранённых через File → Save local copy. Сервер разбирает его и отдаёт по MCP.

Claude Code ──stdio/MCP──▶ src/index.js ──▶ буфер обмена (⌘C) или файл .fig

| Файл | Роль | |---|---| | src/index.js | MCP-сервер: инструменты и текущая сцена | | src/lib/figparse.js | контейнер fig-kiwi, чтение HTML- и PNG-флейворов буфера | | src/lib/scene.js | иерархия узлов, деревья слоёв и компонентов, переменные | | src/lib/style.js | стили: автолэйаут, скругления, краски, типографика, эффекты | | src/lib/link.js | разбор ссылок Figma в node_id |

Установка

claude mcp add figma-clipboard --scope user -- npx -y figma-clipboard-mcp

Для работы над самим пакетом: npm install в корне, тогда сервер запускается как node src/index.js, а .mcp.json в корне репозитория подхватится Claude Code автоматически.

Работа

1. В Figma выделить экран, фрейм или компонент → ⌘C.
2. Попросить Claude Code прочитать макет. После каждого нового копирования — load_clipboard заново.

Для всего файла целиком: File → Save local copy → load_fig_file с путём к .fig. Это снимок на момент выгрузки, живой синхронизации нет.

Инструменты

| Инструмент | Назначение | |---|---| | load_clipboard | прочитать скопированное в Figma, сделать текущей сценой | | load_fig_file(path) | то же из сохранённого .fig — весь файл, все страницы; ~ раскрывается | | list_frames | верхнеуровневые узлы с node_id | | get_layer_tree(node_id, max_depth=4, style='layout') | слои: типы, размеры, тексты и стили; style: none — только структура, layout — автолэйаут, гэпы, паддинги, скругления, full — плюс заливки, обводки, типографика, эффекты | | get_node_styles(node_id) | все стили одного узла разом | | get_component_tree(node_id, max_depth=6) | только инстансы компонентов ДС: компонент, вариант, свойства | | get_component_definition(node_id \| component_key) | свойства, варианты и слои компонента | | list_variables | переменные: коллекция, тип, значения по режимам, алиасы | | resolve_link(url) | найти узел в текущей сцене по ссылке Figma с node-id | | get_clipboard_png | PNG из буфера (⌘⇧C — Copy as PNG) |

Сцена загружается автоматически из буфера, если ещё не загружена.

Цвета отдаются именем переменной (text/primary), если краска к ней привязана, hex остаётся рядом. Типографика — вместе с именем текстового стиля, а в нём дизайнеры обычно указывают целевой компонент кода: Paragraph/16–24 Primary Medium (Typography.Text view='primary-medium').

Порядок для вёрстки: style: 'layout' с max_depth 2–3 на весь экран, затем full точечно на нужный блок или get_node_styles на конкретный узел.

Ограничения

• Ссылка Figma — только адрес узла: скачать по ней файл нечем, это REST API, который здесь не используется.
• Внутренности библиотечных инстансов Figma в копию не кладёт: дерево компонентов идёт по явной вложенности.
• Определение библиотечного компонента доступно, только если сам компонент попал в копию или в .fig.
• Имена свойств инстанса остаются id, если определение компонента вне сцены.
• Чтение буфера — через osascript, то есть только macOS. Файлы .fig читаются на любой системе.
• Растровые ассеты не извлекаются: у картиночных красок виден image.hash, данные лежат в блобах сцены.

Путь через плагин Figma (WebSocket-мост на порту 3055) удалён: плагины требуют Full-места Figma Design, которого у аккаунта нет. Код остался в истории — коммит 2db8712.

Проверка без Claude Code

{
  printf '%s\n' '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"probe","version":"1"}}}'
  sleep 1
  printf '%s\n' '{"jsonrpc":"2.0","method":"notifications/initialized"}'
  printf '%s\n' '{"jsonrpc":"2.0","id":2,"method":"tools/call","params":{"name":"load_clipboard","arguments":{}}}'
  sleep 3
} | node src/index.js

Сервер логирует только в stderr: stdout занят протоколом MCP.

English version: README.md · MIT