Claude и Figma: как работать через официальный коннектор в 2026

Claude и Figma можно связать напрямую через официальный Figma MCP server. Он передаёт агенту структуру выбранного макета, а в поддерживаемых клиентах позволяет читать и изменять нативные объекты на холсте. Если коннектор недоступен или доступ к файлу давать нельзя, экспортируйте нужный экран в PNG и приложите его к чату: Claude разберёт изображение, но не получит компоненты, переменные и слои.

Что именно связывает Figma и Claude

Официальная связка работает через сервер Model Context Protocol от Figma. В каталоге Figma MCP для Claude и Claude Code указаны удалённый и локальный серверы, поддержка Figma Design, Figma Make и FigJam, а также чтение и запись. Отдельная страница коннектора Anthropic описывает двусторонние сценарии: из макета в код, из работающего интерфейса в редактируемый дизайн и обратно.

У Figma есть удалённый и настольный варианты MCP. Для большинства пользователей сама Figma рекомендует удалённый сервер: он работает без запущенного настольного приложения и даёт самый широкий набор возможностей. В официальной справке Figma удалённый сервер указан как доступный для всех типов рабочих мест и на всех тарифах, а настольный вариант требует Dev или Full seat на платном плане.

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

Карта результата перед подключением

Исходная ситуация: у вас есть файл Figma, право открыть его и Claude или Claude Code. Ожидаемый результат: Claude получает контекст конкретного фрейма, выполняет одну ограниченную задачу и возвращает результат, который можно сравнить с исходным макетом. Для работы через код также нужен проект, где понятно, какие компоненты и стили разрешено менять.

• Определите один результат: объяснить макет, реализовать выбранный экран, создать объекты в Figma или проверить расхождения.
• Выберите один фрейм или компонент, а не весь большой файл.
• Проверьте, что ссылка открывается именно под тем аккаунтом Figma, который будет проходить авторизацию.
• Запишите ограничения проекта: технология, готовые компоненты, адаптивность, недопустимые изменения.
• Подготовьте способ проверки: исходный скриншот, состояния кнопок и перечень обязательных элементов.

По теме: Claude Context: как управлять чатом, Projects и Claude Code

Как подключить Figma к Claude Code

Для Claude Code официальный путь Figma начинается с плагина из официального каталога Anthropic. Плагин добавляет настройки MCP и навыки для типовых дизайн-задач. Команда приведена в инструкции Figma по удалённому серверу.

claude plugin install figma@claude-plugins-official

Если плагин установить нельзя, та же инструкция разрешает ручное подключение официального удалённого сервера Figma. Флаг пользовательской области делает соединение доступным в разных проектах, поэтому применяйте его только на личном доверенном компьютере.

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

1. Установите официальный плагин или добавьте удалённый MCP вручную.
2. Перезапустите Claude Code и откройте команду /mcp.
3. Выберите Figma, нажмите Authenticate и подтвердите доступ в открывшемся окне Figma.
4. Снова откройте /mcp и убедитесь, что сервер figma подключён.
5. В Figma выделите нужный фрейм, скопируйте ссылку на выделение и вставьте её в задачу Claude.
6. Попросите сначала назвать полученный фрейм, его основные компоненты и границы задачи, а уже затем менять код или холст.

Ссылка на выделение передаёт идентификатор конкретного узла. Официальная инструкция объясняет, что клиент извлекает из URL node-id и запрашивает нужный объект у MCP server. Если отправить ссылку на файл без точного выделения, контекст может оказаться слишком широким.

Как работать в Claude без терминала

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

Для подготовки самого макета полезен отдельный маршрут как сделать сайт в Фигме, а устройство MCP без привязки к дизайну разобрано в статье что такое Claude MCP. Связка не исправляет неясный макет автоматически: сначала приведите в порядок структуру и состояния.

Безопасный запасной путь через экспорт или скриншот

Если прямого коннектора нет, в Figma экспортируйте только нужный фрейм в PNG или сделайте скриншот без комментариев, имён клиентов и закрытых данных. Claude официально поддерживает загрузку JPEG, PNG, GIF и WebP через кнопку добавления файлов, перетаскивание или вставку из буфера: справка Anthropic по загрузке файлов.

1. Сделайте копию рабочего фрейма или скройте слои с конфиденциальной информацией.
2. Экспортируйте отдельные состояния: обычное, наведённое, открытое меню и мобильный экран, если они важны.
3. Приложите изображения к одному чату и подпишите каждое состояние простым именем.
4. Попросите Claude сначала перечислить видимые элементы и неизвестные параметры, не генерируя код.
5. Добавьте точные размеры, шрифты и цвета текстом, если они критичны.
6. После результата сравните расположение, переносы, состояния и поведение на узком экране.

Скриншот передаёт пиксели, но не правила макета. Из него нельзя надёжно узнать, какой элемент является компонентом, какое значение связано с переменной, как ведёт себя Auto Layout и что скрыто за пределами кадра. Поэтому этот путь подходит для аудита, объяснения и чернового прототипа, но не заменяет точный контекст MCP.

По теме: Claude Code локально в 2026: что на компьютере, а что в облаке

Проверка результата по трём уровням

Используйте проверочный треугольник. На уровне соединения Claude должен видеть именно выбранный объект. На уровне структуры результат обязан переиспользовать компоненты и токены проекта. На уровне поведения нужно пройти состояния и размеры экрана. Красивое статичное совпадение не подтверждает работу меню, формы или клавиатурной навигации.

• В /mcp сервер figma отмечен как подключённый, а повторная авторизация не требуется.
• Claude правильно называет выделенный фрейм и не смешивает его с соседними экранами.
• В коде нет случайных замен готовых компонентов на новые аналоги.
• Цвета и отступы берутся из существующих переменных или токенов, если они есть.
• Изображения сохранены в проект, а не зависят от временной ссылки.
• Результат сравнен с эталоном на основном и узком экране.

Figma предупреждает, что MCP выдаёт дизайн-контекст, а не готовый производственный код. Генерацию под конкретную технологию выполняет агент, поэтому итог нужно адаптировать к проекту и проверить: пояснение Figma о коде из MCP. Если нужно сначала улучшить саму структуру экрана, используйте план создания макета сайта.

Диагностика частых сбоев

Если Figma не появляется в /mcp, проверьте точный адрес сервера и перезапустите Claude Code. Если соединение есть, но файл не читается, откройте ссылку в браузере под тем же аккаунтом и проверьте права. Если выбран не тот экран, заново скопируйте ссылку после выделения фрейма. Если ответ слишком общий, сузьте задачу до одного компонента и попросите сначала вернуть структуру, а не код.

По теме: Claude в терминале с нуля: как открыть окно команд в 2026

Когда способ не подходит

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

Частые вопросы

Нужен ли Claude Code для работы с Figma?

Нет. Официальный коннектор доступен и в Claude. Claude Code удобнее, когда задача связана с существующим кодовым проектом, командами и проверкой реализации.

Можно ли дать Claude просто ссылку на Figma?

Да, если официальный коннектор уже подключён и аккаунт имеет доступ к файлу. Для точности сначала выделите нужный фрейм и скопируйте ссылку на выделение.

Claude может менять Figma сам?

Поддерживаемые клиенты официального удалённого MCP умеют записывать нативные объекты на холст. Перед такой задачей сделайте копию и ограничьте изменение одним фреймом.

Что делать без коннектора?

Экспортируйте нужные состояния в PNG, приложите их к Claude и передайте размеры и правила текстом. Этот путь годится для разбора и черновой реализации, но не передаёт слои и переменные Figma.