Год назад я потратил полдня, чтобы заставить Claude читать макеты из Figma. Сейчас на это уходит меньше трёх минут. Всё изменилось после выхода официального Figma MCP Server. Я расскажу, как подключить Claude к Figma, и покажу, как с помощью этой связки собирать интерфейсы быстрее, чем когда-либо.
Что такое MCP и почему без него вас ждёт боль
MCP - это протокол, который соединяет Claude с внешними инструментами. В случае с Figma он даёт модели доступ к структуре макета. Не к картинке, а к слоям, группам, стилям, переменным, компонентам и Auto Layout. Для Claude это как открыть исходный код дизайна.
Раньше для такого уровня интеграции приходилось использовать сторонние MCP-серверы. Они требовали Personal Access Token, ломались после обновлений Figma и не имели официальной поддержки. Теперь всё по-другому. Figma выпустила собственный сервер, и он работает из коробки.
Официальный плагин Figma для Claude Code
Самый простой способ подключить Claude к Figma - установить официальный плагин. Для этого достаточно выполнить одну команду в терминале:
claude plugin install figma@claude-plugins-official
Плагин автоматически настраивает MCP и добавляет Agent Skills для типовых сценариев. Вам не придётся вручную прописывать конфиги. После установки запустите новую сессию Claude Code. Чтобы убедиться, что всё работает, введите /mcp в чате. Вы увидите подключённый сервер figma.
Подключение через команду без плагина
Если вы не хотите ставить плагин, можно подключить сервер напрямую командой:
claude mcp add --transport http figma
Такая команда привяжет Figma только к текущему проекту. Если нужна глобальная настройка для всех проектов, добавьте флаг --scope user:
claude mcp add --scope user --transport http figma
Кстати, при ручном добавлении сервера не устанавливаются официальные навыки Figma. Если вам нужны Agent Skills, лучше использовать плагин. Но для базовых сценариев и простого анализа макетов этого достаточно.
Авторизация через OAuth: ещё один важный нюанс
После подключения сервера нужно авторизоваться. Запустите новую сессию Claude Code, введите /mcp, выберите сервер figma и нажмите Authenticate. Браузер откроет страницу авторизации Figma. Кликните Allow access и вернитесь в терминал. Там появится сообщение Authentication successful.
Если снова ввести /mcp, вы увидите, что сервер подключён и готов к работе.
Обратите внимание: официальный remote MCP использует только OAuth. Personal Access Token не работает с этим сервером. Многие привыкли к PAT, потому что он нужен для сторонних серверов. Но здесь он просто не нужен. Если вы тратите время на поиски, как вставить токен, не тратьте. Просто авторизуйтесь через браузер.
Что Claude Code видит в вашем Figma-файле
После подключения у Claude появляется доступ к:
- слоям и их иерархии
- компонентам и их вариантам
- стилям и переменным
- Auto Layout и его настройкам
- данным экспорта и метаданным
Всё это передаётся в структурированном виде, поэтому Claude понимает, как устроен макет. Например, он может вычислить отступы, размеры, типичные паттерны и даже найти несоответствия в дизайн-системе.
Правда, есть важное условие. Чем чище ваш файл, тем точнее результат. Слои должны называться осмысленно, вместо жёстких координат используйте Auto Layout, а цвета и отступы выносите в Variables. Тогда Claude превращается в полноценного помощника, который анализирует макет, как опытный разработчик.
Как я собираю проекты: реальный воркфлоу
Мой рабочий процесс с момента выхода официального MCP-сервера выглядит так. Подключаю плагин, авторизуюсь через OAuth, а дальше просто общаюсь с Claude в терминале.
Сначала прошу изучить макет и составить план. Claude анализирует структуру, разбивает её на компоненты, выгружает стили в CSS или Tailwind. Потом я прошу его генерировать компоненты поочерёдно. Когда основа готова, он собирает страницы. В конце сверяет результат со скриншотом через встроенную функцию get_screenshot.
Выглядит это примерно так: я даю ссылку на фрейм, а Claude уже знает его структуру. Мне не нужно объяснять, где кнопка, а где форма. Он видит всё сам. Скорость вёрстки вырастает в разы, а количество правок сокращается на треть.
Обратный цикл: из Figma в код и обратно
Интеграция работает и в обратную сторону. Вы можете создавать интерфейсы через Claude Code, а затем захватывать экран или целый флоу из браузера и вставлять их в Figma.
В Figma появляются редактируемые фреймы на холсте, а не просто картинка. Их можно перестраивать, дублировать, комментировать, использовать в дизайн-системе. Если сценарий многошаговый, например оплата или регистрация, можно захватить последовательность экранов и сохранить логику переходов.
Дизайнеры и разработчики получают непрерывный цикл. Нарисовали макет и отдали Claude в код. Сгенерировали прототип и вернули в Figma. Всё без ручного переноса данных.
Типичные ошибки при подключении
Первая ошибка - попытка использовать Personal Access Token. На Reddit то и дело всплывают жалобы от разработчиков, которые пытаются вставить PAT в официальный MCP и не понимают, почему сервер молчит. Ответ прост: официальный MCP использует только OAuth, PAT не подходит. Не тратьте время на поиски поля для токена.
Вторая ошибка - старая версия Figma Desktop. Если вы не видите пункт Enable desktop MCP server в Dev Mode, значит приложение нужно обновить. Убедитесь, что вы используете актуальную версию.
Третья ошибка - грязный макет. Если слои называются Frame 1, Group 3 и Rectangle 4, Claude будет работать, но качество анализа будет ниже. Потратьте 10 минут на структурирование файла, и вы сэкономите часы на правках.
Когда стоит обратить внимание на сторонние MCP-серверы
Официальный сервер покрывает 90% задач. Но бывают случаи, когда нужен особый сценарий. Например, вы хотите подключаться с помощью PAT, чтобы автоматизировать процесс в CI/CD. Тогда смотрите в сторону сторонних решений, таких как GLips/Figma-Context-MCP. Они дают больше гибкости, но вы сами отвечаете за безопасность данных.
Я бы посоветовал сначала освоить официальный способ. Он стабильнее, проще и получает новые фичи раньше остальных. Сторонние серверы можно рассматривать как запасной вариант.
А теперь немного личного: как я использую Claude и Figma в 2026 году
Эта связка стала моим рабочим инструментом. Я вожусь не только с кодом, но и с дизайном. Claude помогает мне выравнивать элементы, подбирать отступы, проверять контрастность. Он замечает вещи, которые я пропустил бы взглядом. За счёт этого я успеваю вёрстку и дизайн в одном лице.
Но есть проблема. В России доступ к Claude ограничен. Официальный API не принимает наши карты, а аккаунты Anthropic блокируют через IP. Регистрироваться через VPN и потом мучиться с каждым запросом - не метод. Нужно нормальное решение, которое работает стабильно.
Где взять Claude в России: сервис 3GPT
Я давно пользуюсь сервисом 3GPT от 3SELLER. Это роутер по нейросетям, который даёт доступ ко всем последним флагманским моделям из России. Никаких иностранных карт не нужно, оплата российской картой, СБП или криптой. Стоимость всего 149 рублей.
В 3GPT доступны Chat GPT 6 Astra, Claude Fable 5 и 5.1, Claude Opus 5.5, Chat GPT 5.5, Chat GPT 6.1 Sol. Плюс генерация изображений Nano Banana и видеороликов. Это отличный вариант, если вам нужен Claude для работы с Figma, текстами, аналитикой или любыми другими задачами.
Особенно удобно, что в 3GPT есть готовые ИИ-агенты под конкретные задачи. Выбираете агента и начинаете работать. Модель агента можно менять прямо в чате, не теряя контекст. Это помогает в бизнесе, маркетинге и разработке. Посмотрите, например, на этот скрин:
Все нейросети собраны в одном интерфейсе. Никаких VPN, прокси и блокировок. Открыл сайт, выбрал модель, работаешь. Получить доступ можно на официальной странице:
Если вам нужны не отдельные модели, а готовые агенты под задачи, загляните на страницу ИИ-агентов. Выберите нужного, и он сам приведёт вас к результату.
Как подключить Claude к Figma и не сломать себе мозг
Установите плагин командой claude plugin install figma@claude-plugins-official, авторизуйтесь через OAuth, и вы получите мощнейшую связку дизайна и кода. Подготовьте файл, дайте Claude контекст, и он сделает 80% рутинной работы за вас.
Если вы находитесь в России и не можете получить доступ к Claude напрямую, попробуйте 3GPT. Это сэкономит вам часы на настройке обходных путей. За 149 рублей вы получаете доступ к лучшим нейросетям, включая последние версии Claude и ChatGPT. И да, связка с Figma тогда будет работать где угодно.
Начните с простого: подключите плагин и попросите Claude изучить ваш макет. Дальше он сам предложит, что улучшить. Первый же запуск покажет, насколько быстрее пойдёт работа.