Figwright: двухсторонний MCP-сервер Figma для кодинг-агентов

Если ты пробовал подключить современных консольных кодинг-агентов — будь то Cursor, Claude Code, Cline или Windsurf — к реальному рабочему макету интерфейса, то наверняка упирался в неприятную финансовую стену. Официальный плагин Figma для протокола Model Context Protocol (MCP) намертво привязан к платной подписке Dev Mode. Для живого разработчика двадцать пять долларов в месяц — понятный рабочий расход. Но когда в проекте крутится пять независимых фоновых ботов, тестирующих варианты верстки, оплачивать отдельное рабочее место под каждого виртуального помощника становится откровенным безумием.

Меня в этой истории всегда раздражала односторонняя природа существующих интеграций. Большинство утилит умеют только выгружать картинку или выдергивать сырой CSS. Но ведь настоящий инженерный диалог требует обратной связи: если компонент не укладывается в сетку Tailwind или требует адаптивной перестройки, агент должен иметь возможность подвинуть фрейм или переключить тему прямо в файле дизайна.

Именно эту задачу решает Figwright — полностью открытый проект под лицензией MIT, созданный разработчиком под ником awdr74100. Он строит двусторонний мост между Figma и кодинг-агентами по открытому протоколу MCP, не требуя ни копейки за лицензии Dev Mode и работая на обычном бесплатном стартовом тарифе Starter.

Локальный WebSocket-мост вместо облачных лицензий

Давай разберем архитектуру этой связки по винтикам. Каким образом Figwright обходит ограничения закрытого облачного API Figma, не нарушая правил платформы?

Секрет кроется в разделении системы на два независимых звена:

1. Локальный процесс MCP-сервера: пакет @figwright/mcp, запускаемый на машине разработчика через Node.js. Он общается со средой разработки (Cursor или Claude Code) через стандартные потоки ввода-вывода (stdio) по протоколу JSON-RPC.
2. Плагин для десктопного приложения Figma: легковесное расширение на Vue 3, исполняемое в изолированной песочнице (sandbox iframe) внутри самого редактора.

Между собой эти два компонента связываются через локальный WebSocket-сервер на адресе 127.0.0.1:3055. Чтобы тяжелые деревья макетов со сложной иерархией слоев не превращали передачу данных в слайд-шоу, обмен упакован в компактный бинарный формат MessagePack (msgpack).

С точки зрения безопасности здесь все чисто: данные макетов вообще не покидают твой компьютер и не утекают в сторонние облачные прокси. Сервер валидирует заголовок Host: 127.0.0.1 и строго сверяет идентификатор источника Origin, отсекая попытки атак класса DNS-rebinding из открытых вкладок браузера.

135 инструментов: от инспекции стилей до векторного рисования

Большинство сторонних MCP-серверов ограничиваются парой банальных команд вроде «сделай скриншот экрана» или «верни текст узла». В Figwright разработчики заложили внушительный арсенал из 135 специализированных инструментов, разделенных на три функциональные группы:

• Группа чтения (Read): агент может запросить не просто снимок экрана, а полное синтаксическое дерево выбранного узла, проинспектировать переменные дизайна (Figma Variables), стили типографики, эффекты теней и скруглений. Доступны инструменты экспорта в PNG, SVG, PDF и даже рендеринг предпросмотра векторных анимаций в MP4 и GIF.
• Группа записи (Write): вот здесь начинается настоящая магия. Агент получает право создавать и модифицировать узлы на канвасе. Он может на лету настраивать параметры Auto Layout, менять выравнивание, генерировать векторные контуры через инструмент Figma Draw по координатам SVG-путей, менять текстовые метки и переключать режимы тем оформления (Dark Mode / Light Mode).
• Группа контекстной привязки (Grounding): чтобы модель не придумывала компоненты с нуля, инструменты component_map и token_map связывают токены макета с существующими компонентами твоего фронтенд-репозитория (например, кнопками из shadcn/ui или цветами Tailwind). А функция design_diff сравнивает текущее состояние макета с предыдущим снапшотом, избавляя от повторной перегенерации нетронутого кода.

Подобная связка превращает агента из слепого переписчика стилей в полноценного ассистента верстки. В связке с многоагентными менеджерами рабочих пространств вроде инструмента codeg, о котором мы говорили ранее, Figwright берет на себя роль графического терминала.

Координация нескольких агентов и выборы лидера

Что происходит, если в твоем проекте одновременно работают два или три агента? Например, один рефакторит компонент авторизации в Cursor, а второй в это же время набрасывает дашборд через Claude Code в терминале.

Каждый клиент неизбежно попытается запустить собственный процесс @figwright/mcp. Если бы они начали слепо воевать за порт 3055, соединение с плагином рухнуло бы с ошибкой EADDRINUSE. Авторы Figwright элегантно обошли эту проблему с помощью механизма выборов лидера (Leader Election).

Первый запущенный процесс захватывает сокет и становится ведущим узлом (leader). Последующие процессы определяют, что порт занят, переводят себя в режим ведомых (followers) и прозрачно перенаправляют все вызовы инструментов лидеру через локальный HTTP-эндпоинт /rpc. А чтобы агенты не перебивали контекст друг друга при случайном клике мышкой в окне Figma, введена команда use_file: агент жестко закрепляется за UUID открытого документа и опрашивает именно его, игнорируя переключение вкладок пользователем.

Настройка окружения и первый запуск

Для работы связки тебе понадобится среда Node.js версии 20.19.0+ или 22.12.0+ (более ранние версии не поддерживают нативный WebSocket-клиент с требуемыми параметрами) и десктопное приложение Figma.

Первым делом прописываем сервер в конфигурационном файле твоего MCP-клиента (например, в файле .mcp.json в корне рабочего проекта для Claude Code или в настройках Cursor):

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": ["-y", "@figwright/mcp@latest"]
    }
  }
}

После настройки клиента необходимо подключить плагин к десктопной Figma:

1. Зайди в раздел релизов официального репозитория проекта на GitHub и скачай архив с готовой сборкой плагина.
2. Распакуй папку в удобное место на диске.
3. В десктопной версии Figma открой меню: Plugins -> Development -> Import plugin from manifest... и выбери файл manifest.json из распакованной директории.
4. Запусти плагин через Plugins -> Development -> Figwright. В открывшемся окне плагина статус подключения сменится на зеленый маркер Connected.

Чтобы агент понимал специфику твоего стека и не генерировал абстрактный HTML, разработчики подготовили набор агентных сценариев (Skills), которые загружаются через открытую систему дистрибуции навыков:

# Установка специализированных скиллов кодогенерации под React, Vue и Tailwind
npx skills add awdr74100/figwright/skills

Теперь в диалоге с агентом достаточно написать: «Проверь статус соединения с Figma через figwright:ping и найди во фрейме авторизации все текстовые поля ввода». Агент считает точные отступы, сопоставит цвета с твоим tailwind.config.js и выдаст готовый JSX-компонент.

Границы применимости и подводные камни

Несмотря на очевидное удобство, у Figwright есть особенности, о которых важно помнить перед внедрением в командный пайплайн.

Во-первых, плагин пока не опубликован в официальном каталоге Figma Community и требует ручного импорта манифеста разработчика. Это накладывает ограничение: верстка должна быть открыта именно в установленном десктопном клиенте Figma, так как веб-версия в браузере не имеет прямого доступа к локальному порту 127.0.0.1:3055 из-за строгих политик Mixed Content.

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