Обложки, фирменный файл и 60 эмодзи: как Claude работает в Figma через MCP

Claude работает с Figma через официальный MCP-сервер Figma. MCP — это способ подключить к ИИ внешний сервис, чтобы он сам читал и менял в нём данные. С таким подключением Claude открывает твои макеты и рисует прямо в файле: фреймы, компоненты, цвета, текстовые стили. Так у нас в VIBERZ сделаны обложки блога, фирменный файл с цветами и шрифтами сайта и пак из 60 эмодзи для Telegram. Я директор по маркетингу VIBERZ, и ниже рассказываю, как это подключить, сколько стоит, где мы ошибались и какими промптами пользуемся сами.

Обновлено 28 октября 2026.

Что Claude умеет делать в Figma через MCP

• 👀Читать макет

  Видит страницы, фреймы, компоненты, цвета и отступы. Можно спросить «что на этом экране» или «какие цвета в файле».

• ✏️Рисовать в файле

  Создаёт и правит фреймы, компоненты, варианты, переменные и автолейаут. У Figma это называется запись на холст.

• 🖼Делать картинки

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

• 🧩Переводить макет в код

  Отдаёт по выбранному фрейму структуру и код-заготовку. Claude Code дальше верстает по ней страницу.

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

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

1. 1В приложении Claude

   Настройки → Коннекторы → Figma → войти в аккаунт Figma и разрешить доступ.

2. 2В Claude Code

   Поставить плагин Figma одной командой или добавить сервер вручную, затем войти через /mcp.

3. 3Проверить

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

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

В Claude Code Figma советует ставить свой плагин: в нём кроме подключения есть скиллы — инструкции, по которым агент аккуратнее работает с файлом.

claude plugin install figma@claude-plugins-official

Если нужен только сервер, без скиллов:

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

После этого перезапусти Claude Code, набери /mcp, выбери figma и нажми «Authenticate». Чем скилл, MCP и плагин отличаются друг от друга, разобрано в гайде Скиллы, MCP и плагины для Claude Code. Если ты ещё не запускал Claude Code, начни с бесплатного продукта Из чата — в агента: первый запуск Claude Code за 10 минут.

Тарифы и лимиты Figma MCP

Подключить Figma MCP можно на любом тарифе, но количество запросов зависит от тарифа и места в команде. Место (seat) — это тип доступа человека в Figma: «Full» или «Dev» могут редактировать и работать с кодом, «View» и «Collab» в основном смотрят и комментируют. Данные из документации Figma на 28 октября 2026:

Тариф	Место View или Collab	Место Full или Dev
Starter (бесплатный)	до 20 запросов в месяц	нет
Professional	до 20 запросов в месяц	до 200 в день, 10 в минуту
Organization	до 20 запросов в месяц	до 200 в день, 15 в минуту
Enterprise	до 20 запросов в месяц	до 600 в день, 20 в минуту

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

Двадцати запросов в месяц хватит, чтобы попробовать. Для обложек каждую неделю этого мало: даже простая правка — это несколько запросов подряд.

Как мы работаем с Claude и Figma в VIBERZ

Четыре задачи, которые Claude делал в нашем Figma-файле. По каждой — что получилось и где споткнулись.

Фирменный файл из кода сайта. Я дала Claude доступ к коду viberz.ru и пустой файл в Figma. Он вынес из стилей сайта 15 цветов (лайм #CCF22E, почти чёрный #111210, кремовый #F3F0E6 и другие), собрал 13 текстовых стилей и 3 тени со сдвигом. Потом нарисовал компоненты: плашку-маркер для заголовков, надзаголовки, кнопки, теги, окно с промптом, фоны. На отдельную страницу перенёс логотип, 11 пиксельных стикеров и 9 статуй с сайта, каждый ассет стал компонентом. Как описать такие правила для агента словами, есть в гайде Мини-дизайн-система.

Споткнулись дважды. На бесплатном Starter закончились запросы посреди работы, и шаблоны для соцсетей не собрались. Перешли на Professional, и дальше лимит не мешал. Второе: заголовочного шрифта сайта Inter Tight в Figma не оказалось, и Claude поставил похожий Inter Extra Bold. Теперь я знаю, что шрифт сначала загружают в аккаунт.

Обложки блога. Обложки статей блога VIBERZ рисует Claude. В файле лежит шаблон 1200×630, каждая обложка — фрейм с именем Cover/адрес-статьи. Claude копирует подходящий фрейм, меняет надзаголовок, заголовок в две строки и маркер, ставит статую и фон из нашей палитры. Восемнадцать обложек для подборок «Нейросети для…» по профессиям он собрал из одного шаблона. Новых персонажей Claude генерирует в Figma в стиле набора: мраморная статуя, один цветной аксессуар, белая обводка как у наклейки. Готовую обложку он снимает скриншотом и переносит на сайт картинкой JPG на 110–135 КБ.

Что пришлось записать в правила: стикеры не заходят на лицо статуи и на заголовок, соседние карточки в блоге разного цвета, после каждой правки Claude делает новый скриншот. Скриншот, снятый сразу после правки, иногда показывает старое состояние, и без повторной проверки на сайт уходила устаревшая картинка.

60 эмодзи для Telegram. Пиксельные значки 100×100 в стиле стикеров сайта: стрелки, статусы, метки «новое», замок, часы. Здесь мы ошиблись сильнее всего. Сложные значки Claude рисовал формулами и не посмотрел их крупно. Двадцать из шестидесяти вышли кривыми: рваные диагонали, лишние пиксели. Я уже загрузила весь пак в Telegram вручную, и эти двадцать пришлось перезаливать.

После этого появилось правило: каждый пиксельный значок Claude проверяет увеличенным, сверяет сетку автоматически и показывает весь набор в размере 24 px, как его увидят в сообщении. Только потом отдаёт файлы.

Макет страницы до кода. Продающие страницы новых продуктов Claude сначала рисует в Figma: десктоп 1440 и мобильная версия 390 на одной сетке. Справа от макета лежит SEO-паспорт: заголовки, запросы и карта ссылок. Правки по макету дешевле правок по готовому коду. Как собрать бриф для такого макета, есть в гайде Дизайн-бриф лендинга.

Промпты для Claude и Figma

Три промпта, которыми мы пользуемся. Подставь свои данные в квадратные скобки.

Обложка по шаблону.

Открой файл Figma [ссылка]. На странице [название страницы] есть шаблон обложки [имя фрейма].

Сделай копию шаблона рядом и назови её Cover/[адрес статьи]. Поменяй:
- надзаголовок: [текст];
- заголовок в две строки: [текст];
- фон: [цвет из палитры файла], не такой, как у соседних обложек;
- персонажа: [какой компонент взять].

…

Фирменный файл из кода сайта.

Вот код моего сайта: [папка проекта или ссылка на репозиторий]. Вот пустой файл Figma: [ссылка].

1. Найди в стилях сайта все цвета, шрифты, размеры заголовков и тени. Покажи мне список до того, как что-то рисовать.
2. Заведи в Figma цвета как переменные и текстовые стили с понятными названиями.
3. Нарисуй компоненты, которые повторяются на сайте: кнопки, теги, карточки, плашки. Текст в них должен меняться в правой панели.
4. Если шрифта нет в моём аккаунте Figma, не подменяй молча: скажи, какого шрифта нет.
…

Проверка макета перед версткой.

Проверь фрейм [имя фрейма] в файле [ссылка] на ширине 390 и 1440. Найди:
- текст, который обрезается или налезает на другие элементы;
- элементы ближе 16 px к краю экрана;
- цвета и шрифты, которых нет в стилях файла;
- кнопки меньше 44 px по высоте.

Ничего не исправляй, дай список: где, что не так, как исправить.
…

Чтобы агент делал с первого раза, задачу удобно описывать по шаблону из статьи Как написать ТЗ для ИИ-агента. А принимать работу — по гайду Приёмка без поблажек: отдельная проверка в новой сессии ловит то, что агент сам себе простил.

Частые ошибки при работе с Figma через Claude

Что случилось	Что делать
Закончились запросы на бесплатном тарифе посреди задачи	Для регулярной работы нужен Professional с местом Full или Dev
Шрифт подменился похожим	Загрузи шрифт в аккаунт Figma до работы и попроси агента сообщать о подменах
Картинка выглядит ровно в превью, а крупно — с рваными линиями	Просить скриншот крупным планом и проверку в реальном размере
Скриншот показывает старую версию	После правки снимать скриншот ещё раз
Агент не находит слой по старому id	Искать фреймы и слои по имени, имена давать понятные
Правка испортила рабочий файл	Первые задачи — на копии файла, перед крупной правкой делать копию

Из Figma в код сайта

Когда макет готов, Claude Code может сверстать по нему страницу: берёт структуру фрейма, цвета и шрифты из файла и пишет код в твоём проекте. Хорошо работает, если в проекте уже есть свои компоненты и правила оформления, иначе агент собирает страницу «как у всех». Список примет сайта, сделанного нейросетью, и замену для каждой мы собрали в бесплатном файле Антишаблон: 30 примет сайта, сделанного нейросетью. После вёрстки проверь страницу на телефоне по гайду Почини вёрстку на телефоне.

Если выбираешь, где вообще верстать, в редакторе или с агентом, сравнение есть в статье Cursor и Claude Code для тех, кто начинает с нуля.

Что взять дальше

• 🔌MCP для Claude

  Как подключить к Claude ещё четыре сервиса: аналитику каналов, задачи, тренды и библиотеку VIBERZ. Шаги на 15 минут.

  Бесплатно
• 📐Лендинг Мастер

  Структура страницы, тексты всех блоков и 2–3 варианта первого экрана. Готовый файл можно отдать агенту на макет и вёрстку.

  990 ₽
• 🌐Сайт за выходные

  Семь файлов с промптами для Claude Code: от идеи до сайта по ссылке.

  990 ₽
• 🎯Свой лендинг по референсу

  Даёшь ссылку на сайт, который нравится, и Claude собирает твой сайт на тех же приёмах, с твоими текстами.

  Бесплатно

Гайды ниже открываются после бесплатной регистрации.

• Собрать правила оформления для агента — Мини-дизайн-система, бесплатно после регистрации.
• Описать лендинг до макета — Дизайн-бриф лендинга, бесплатно после регистрации.
• Обновить дизайн и ничего не сломать — Редизайн без потерь, бесплатно после регистрации.
• Подключить библиотеку VIBERZ к Claude — VIBERZ в Claude, бесплатно.
• Пройти путь от идеи до первого экрана по системе — курс Первый экран, 990 ₽.

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