Если вы дизайнер или фронтендер, то знаете, как выглядит передача макета из Figma в код. Скриншоты, стикеры, комментарии, бесконечные созвоны. Claude Code умеет читать макет напрямую, превращая дизайн в рабочий код. Показываю, как подключить Figma к Claude быстро и без боли.
Зачем подключать Figma к Claude Code
Claude Code - это инструмент от Anthropic для работы с кодом прямо в терминале. Без доступа к макету он слеп. MCP сервер (Model Context Protocol) - это мост между Figma и Claude. Через него нейросеть видит слои, текстовые стили, цвета и даже комментарии. Это не магия, а обычная настройка, которую можно сделать за 10 минут.
Что понадобится для подключения
Свежая версия Claude Code с поддержкой MCP. Аккаунт Figma - хватит бесплатного. Терминал с базовыми навыками командной строки. Никаких сторонних плагинов не нужно, все делается стандартными средствами.
Устанавливаем плагин Figma в Claude Code
Откройте терминал и выполните команду:
claude plugin install figma@claude-plugins-official
Это официальный плагин от Anthropic, он включает настройки MCP сервера и набор Agent Skills для типовых задач. После установки вы получите доступ к командам, которые понимают структуру Figma-файлов. Например, Claude сможет получить список слоев и их свойства.
Настраиваем десктопный MCP сервер
Дальше нужно добавить сервер для десктопного приложения Figma. Выполните в терминале:
claude mcp add --transport http figma-desktop
Здесь вы указываете Claude Code, что хотите общаться с Figma через HTTP. После этого перезапустите Claude Code, чтобы конфигурация подхватилась. Без перезапуска команды могут не появиться.
Авторизуем Figma в терминале
Когда Claude Code запущен, введите /mcp, чтобы убедиться, что сервер figma отображается в списке. Затем выполните /plugin и перейдите на вкладку Installed. Используйте стрелку вниз, чтобы выбрать сервер figma, нажмите Enter - откроется страница авторизации. Нажмите Enter еще раз, и в браузере появится запрос на доступ. Кликните Allow access.
После авторизации вернитесь в терминал и снова выполните /plugin. Теперь все команды активны. В списке появятся новые возможности: описание макета, генерация кода по выбранному фрейму, сравнение стилей.
Проверяем подключение
Наберите /mcp в Claude Code. Если видите figma-desktop в списке серверов - все в порядке. Попробуйте простую команду, например, попросить Claude описать текущий макет. Получили ответ - связь работает.
Помните, что MCP сервер не передает всю картинку целиком. Claude получает структуру, атрибуты, координаты. Для сложных визуальных задач может не хватить контекста, но для верстки и переноса дизайн-системы этого достаточно. В обсуждениях на Reddit практикующие верстальщики подтверждают: для сложных визуальных эффектов лучше дополнительно прикреплять скриншот к запросу.
Частые проблемы и их решение
Сервер не появляется в /mcp. Проверьте, точно ли вы перезапустили Claude Code после добавления конфигурации. Иногда помогает перезайти в терминал полностью.
Ошибка авторизации. Убедитесь, что вы залогинены в Figma в том же браузере, где открывается страница доступа. Иногда браузер блокирует всплывающие окна - разрешите всплывающие окна для домена Anthropic.
Если команды плагина не работают, обновите Claude Code до последней версии. Официальная документация Figma рекомендует именно свежие сборки.
Жизнь без ограничений: доступ к Claude из России
Для работы из России есть нюанс. Если вы находитесь в России, стандартный способ подключения упирается в оплату подписки Claude. Зарубежные карты не работают, а верификация аккаунта превращается в квест. Я для таких случаев использую сервис 3GPT от 3SELLER. Это универсальный роутер к нейросетям, который дает доступ к последним флагманским моделям: Chat GPT 6 Astra, Claude Fable 5, Claude Fable 5.1, Claude Opus 5.5, Chat GPT 5.5, Chat GPT 6.1 Sol, Nano Banana для изображений и генерации видео. Пополнить баланс можно российской картой, через СБП или крипту. Без VPN и зарубежных карт.
Кстати, для работы с Figma это тоже отличный вариант. Вы можете скопировать структуру макета, отправить ее в Claude через 3GPT и получить код, не настраивая локальный MCP. А если нужен готовый агент под конкретную задачу, у 3SELLER есть каталог ИИ-агентов: https://3seller.com/ai/agents
Получить доступ ко всем флагманским моделям нейросетей из России можно на официальном сайте 3GPT: https://3seller.com/3gpt
Практический сценарий: макет в код через Figma и Claude
Допустим, у вас есть готовый лендинг в Figma. Вы выбираете фрейм, вызываете команду Claude Code "сгенерируй HTML и CSS для этого фрейма" - и получаете прототип, который можно сразу открыть в браузере. Такой подход экономит часы ручной верстки. Особенно полезно, когда нужно быстро проверить концепцию или сделать несколько вариантов одного блока.
Интеграция с MCP также позволяет синхронизировать токены дизайна. Claude может обновлять цвета, шрифты и отступы прямо в Figma через API, если вы дадите соответствующие права. Так что дизайнеры и разработчики могут работать в одном цикле без потерь.
Что дальше
Следующий шаг: возьмите реальный макет и попросите Claude Code сверстать его. Если упретесь в ограничения по оплате, подключите 3GPT - он дает доступ к Claude и другим моделям из России по 149 рублей. Навык настройки MCP останется с вами и пригодится для других инструментов.