Нейросеть для дизайна: Figma AI, плагины и связка макета с Claude Code

Кому эта статья и что вы из неё унесёте

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

Что вы унесёте: карту того, где ИИ реально помогает в работе над макетом, разбор функций Figma AI с ценами и кредитами, порядок подключения MCP-сервера Figma к Claude Code или Cursor, мой замер связки «экран в код» с двумя снимками и цифрами по времени и деньгам, а также подборку генераторов интерфейса и честный список того, что ИИ за вас не сделает.

Отдельно оговорюсь про генерацию картинок. Это соседняя тема, у неё свой разбор: нейросеть для карточек товара. Здесь речь про инструменты, которые живут в вашем рабочем файле.

Где ИИ помогает дизайнеру, а где мешает

Работу над интерфейсом я раскладываю на шаги, и ИИ заходит не в каждый.

Заметьте, где выигрыш максимальный. Не в рисовании, а на стыке с разработкой и в дизайн-системе, то есть там, где работа механическая и проверяемая.

Тот же приём работает и до макета, на этапе исследования рынка: анализ конкурентов через ИИ-агента — агент собирает данные с сайтов конкурентов и сводит их в таблицу за минуту.

Figma AI: что появилось внутри самой Figma

Список беру с официальной страницы Figma AI на 7 сентября 2026 года.

Агент прямо на холсте: он предлагает новые направления макета, строит диаграммы, правит изображения и ищет по вашим файлам. Работает в Figma Design.

Figma Make: превращает ваш макет в прототип с кодом. Дальше интереснее: к Make подключается ваша кодовая база, вы правите функциональность промптом, а из Make создаётся пул-реквест в ваш репозиторий. То есть путь от макета до ветки с изменениями закрывается внутри Figma.

Генеративные плагины (бета): вы описываете словами функцию, которой вам не хватает, и агент собирает плагин под ваш процесс прямо на холсте. Раньше для этого нужен был разработчик.

Weave tools (бета): готовые цепочки под творческие задачи. Редактирование изображений, векторов, видео без ухода из файла.

Шейдеры по описанию: размытия, меш-градиенты и паттерны вы описываете словами и сразу видите на холсте.

Кредиты ИИ: общий пул на команду. Можно платить по факту, можно подпиской, видно, кто сколько потратил.

Отдельно стоит Code Connect. Он связывает компоненты в макете с реальными компонентами в вашем коде, и тогда сгенерированный код собирается из ваших компонентов, а не из абстрактного HTML. Для команды с дизайн-системой это главное, что стоит настроить.

Сколько стоит Figma и её ИИ-кредиты

Цены со страницы тарифов на 7 сентября 2026 года, за одно место в месяц.

Organization и Enterprise продаются только с годовой оплатой. Дополнительные кредиты покупаются отдельно и делятся на всю команду.

Что из этого следует для одиночки. Бесплатный Starter даёт 500 кредитов в месяц, и на пробу функций этого хватает. Как только ИИ становится частью ежедневной работы, вы упрётесь в лимит за неделю.

Плагины: чем догоняют то, чего нет в самой Figma

Плагины остаются главным способом закрыть дыры. По популярности в каталоге сообщества картина такая: Iconify собрал 4,6 млн установок, Unsplash 3,73 млн, html.to.design 2,6 млн, Figma to Code 2,36 млн, Anima 1,87 млн.

Отдельная ветка это плагины с ИИ внутри. Что стоит знать про них сразу:

• Codia AI Design превращает скриншот в редактируемый макет Figma, 330 тысяч установок;
• UX Pilot собирает интерфейсы, вайрфреймы и дизайн-системы, 314 тысяч;
• Figr Identity отдаёт дизайн-систему с компонентами и переменными, 134 тысячи;
• Stark проверяет контраст и доступность по стандарту WCAG, 592 тысячи;
• Builder.io отдаёт чистый код из макета и собирает прототипы, 1,29 млн.

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

MCP-сервер Figma: связка с Claude Code и Cursor

Это самая недооценённая часть. MCP это общий протокол, по которому ИИ-агенты ходят в чужие данные. У Figma такой сервер есть, и он превращает ваш макет в источник правды для агента в редакторе кода.

Что говорит руководство Figma на 7 сентября 2026 года:

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

С чем работает: VS Code, Cursor, Windsurf, Claude Code, Codex.

Что умеет:

• генерировать код по выбранному фрейму;
• вытаскивать в редактор переменные, компоненты и данные раскладки;
• писать прямо на холст: агент создаёт и меняет фреймы, компоненты, переменные и автолейауты в ваших файлах, опираясь на вашу дизайн-систему;
• превращать живой интерфейс из браузера, включая локальный, в редактируемые слои Figma;
• доставать содержимое FigJam и файлов Make как контекст.

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

Подключаете вы его просто: включаете сервер в Figma, добавляете его как MCP-сервер в свой редактор, открываете файл и даёте агенту ссылку на фрейм. Дальше вы разговариваете с агентом текстом, а он видит ваш макет.

Практический смысл для дизайнера в другом. Раньше вы отдавали макет разработчику и ждали. Теперь вы сами можете попросить агента собрать по макету рабочую страницу и посмотреть, что получится, до того как отдавать задачу в работу.

Как подключить сервер к Claude Code или Cursor

Порядок одинаковый для всех редакторов, различается только место, где прописывается сервер.

1. Включите сервер в Figma. В настольном приложении Figma откройте меню файла и включите MCP-сервер в разделе для разработчиков. Для удалённого сервера приложение не нужно.
2. Пропишите сервер в редакторе. В Claude Code это делается командой добавления MCP-сервера с адресом сервера Figma, в Cursor и VS Code — через файл настроек MCP. Список поддерживаемых клиентов Figma держит у себя в каталоге.
3. Авторизуйтесь. При первом обращении редактор попросит вход в аккаунт Figma и разрешение на доступ к файлам.
4. Скопируйте ссылку на фрейм. В Figma выделите нужный фрейм и скопируйте ссылку на выделение, а не на весь файл.
5. Дайте задание агенту. Вставьте ссылку в чат и опишите, что нужно: код по фрейму, список переменных, проверка на соответствие дизайн-системе.

🪤 Две вещи, на которых спотыкаются в первый раз. Ссылка на файл целиком заставляет агента тянуть всё подряд и упираться в лимиты, поэтому ссылайтесь на конкретный фрейм. И второе: без настроенного Code Connect агент соберёт код из абстрактных div, а не из ваших компонентов, даже если компоненты в макете есть.

Что просить у агента: пять рабочих формулировок

Общее правило то же, что с любым ИИ: точная задача вместо пожелания. Вот формулировки, которые дают предсказуемый результат.

Перенос экрана: «Собери React-компонент по этому фрейму. Используй наши компоненты из дизайн-системы, отступы бери из переменных, свои значения не выдумывай».

Аудит макета: «Пройди по фрейму и найди места, где цвет или отступ задан числом вместо переменной. Выведи списком с именами слоёв».

Наведение порядка: «Переименуй слои в этом фрейме по правилу: тип, назначение, состояние. Компоненты не трогай».

Сборка токенов: «Собери из этого файла палитру и типографическую шкалу в переменные Figma. Одинаковые оттенки объедини, разницу меньше трёх процентов считай одинаковой».

Обратный путь: «Возьми страницу по адресу на локальном сервере и перенеси её в Figma слоями, чтобы я поправил вёрстку в макете».

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

Мой прогон: экран в код за 21 секунду

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

Что делал. Снял первый экран сайта в разрешении 1440 на 900 и отдал этот снимок модели Claude Sonnet 5 через нашу платформу. Задание было такое: повторить раскладку, пропорции, отступы и иерархию размеров, цвета взять с картинки, тексты перенести дословно, изображения заменить серыми прямоугольниками, ширина макета 1440.

Что отдал:

Что получил через 21 секунду:

Цифры прогона:

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

Что потеряла. Фоновую иллюстрацию в тёмном блоке заменила плоской заливкой, хотя в задании об этом не просили. Ширину контейнера взяла шире оригинала, из-за чего поля по краям съелись. Вертикальные пропорции растянула: герой-блок вышел выше, и следующая секция уехала за границу первого экрана. Скругления карточек и общий серый фон под секцией не воспроизвела. Шрифт поставила системный, потому что по картинке гарнитуру не опознать.

Честный вывод. За 21 секунду и 2 рубля получается каркас, который снимает первый час работы: структура блоков, порядок элементов, тексты на местах. Дальше нужен человек, потому что ровно те вещи, по которым отличают хороший макет от посредственного, ИИ и потерял: поля, ритм по вертикали, гарнитура, фон.

И отсюда практическое правило. Отдавайте агенту то, что проверяемо: структуру, повторяющиеся блоки, тексты, перенос макета в код. Оставляйте себе то, что решается вкусом и замером: сетку, отступы, типографику.

Генераторы интерфейса без Figma

Если задача не «нарисовать макет», а «получить работающую страницу», Figma вообще не нужна. Тут другой класс инструментов.

Ноя. Начну со своего инструмента, потому что для дизайнера, который работает с российским бизнесом, у него есть то, чего нет у зарубежных: Ноя собирает сайт по описанию, а дальше отдаёт то, что клиенту реально нужно после сдачи макета. Оплата рублями с обычной карты, без VPN и посредников. Данные остаются в российском контуре, что для 152-ФЗ не мелочь. К сайту подключается свой домен, формы заявок уходят владельцу, а на входящие сообщения отвечает ИИ-агент от лица компании в Telegram, WhatsApp, Авито и других каналах. Тариф начинается с 990 ₽ в месяц, есть Standard 2 990 ₽ и Business 4 990 ₽, пробный период 7 дней, а по нашей ссылке при регистрации начисляется 1 000 ₽ на ответы агента вместо 500. Для дизайнера это способ отдать клиенту не картинку, а работающий сайт с приёмом заявок, и брать за это отдельные деньги.

v0 от Vercel: собирает интерфейсы на React и Tailwind и отдаёт готовый код. Сильная сторона в качестве кода, слабая в оплате из России.

Lovable и Bolt: собирают приложение целиком по описанию, включая базу данных и вход по паролю. Про доступ и оплату из России у нас есть отдельный разбор Lovable.

Figma Sites: тот же движок Figma с публикуемым сайтом на выходе. Пока бета и доступен на полном месте.

Общее правило выбора. Нужен макет для команды разработки — остаётесь в Figma. Нужен работающий сайт клиенту завтра — берёте генератор. Нужен сайт, который сам обрабатывает заявки, — берёте платформу с агентом.

ИИ для дизайн-системы

Самая скучная и самая выгодная часть. Дизайн-система это сотни повторяющихся действий, и как раз их я отдаю машине без потери качества.

Что я реально отдаю машине:

• Именование слоёв и компонентов: приведение сотни фреймов к единому правилу.
• Переменные и токены: сборка палитры, отступов и типографической шкалы в переменные Figma.
• Документация компонентов: описание того, когда какой вариант использовать.
• Проверка на отклонения: поиск мест, где цвет или отступ задан руками мимо системы.
• Связка с кодом: Code Connect подставляет ваши реальные компоненты в генерируемый код.

Из плагинов эту задачу закрывает Figr Identity, из встроенного — агент Figma с доступом к вашим переменным через MCP.

Картинки, иконки и мокапы

Эта часть у дизайнера обычно уже закрыта, поэтому коротко.

Иконки я беру из Iconify, фотографии из Unsplash или генерирую, фон снимаю плагином, мокапы ставлю из готовых наборов. Для генерации предметных кадров и фонов под макет у нас есть отдельный разбор с промптами и своими примерами: нейросеть для карточек товара.

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

Доступ и оплата из России

Сама Figma из России работает в браузере, регистрация проходит. Барьер, как обычно, в оплате: карты российских банков не принимаются.

Способы прежние. Своя зарубежная карта, если она есть. Виртуальная карта посредника, которая проходит через раз. Оплата через посредника с доступом к аккаунту, что дешевле и рискованнее.

На что смотреть при выборе посредника: срок работы, отзывы вне его собственного сайта, наличие чека, и главное — что будет со вторым списанием через месяц. Подписка продлевается автоматически, и если посредник исчез, вы теряете доступ вместе с рабочими файлами.

Бесплатный Starter при этом остаётся полноценным: безлимитные черновики, библиотеки, UI-киты и 500 кредитов ИИ в месяц. Для фрилансера, который работает соло, этого хватает надолго.

Сколько стоит стек дизайнера в месяц

Считаю по курсу ЦБ на 5 сентября 2026 года, 86,59 рубля за доллар (источник).

К зарубежным подпискам добавьте комиссию посредника, обычно 10–20% сверху.

Чего ИИ не сделает за дизайнера

Не примет решение о структуре: что показать первым и ради чего, решает человек, который говорил с заказчиком.

Не соберёт сетку и ритм: мой прогон это показал наглядно, поля и вертикальные интервалы поехали первыми.

Не подберёт гарнитуру: по картинке шрифт не опознаётся, а в макете он половина впечатления.

Не поймёт контекст бизнеса: почему в этой нише нельзя красный, а вот эта кнопка обязана быть выше сгиба.

Не защитит макет перед клиентом: аргументация решения остаётся вашей работой.

С чего начать: порядок на первую неделю

1. Включите бесплатный Starter и потратьте дневной лимит кредитов на агента: посмотрите, что он делает с вашим файлом.
2. Поставьте три плагина под свои частые задачи, начните с иконок, проверки контраста и переноса макета в код.
3. Подключите MCP-сервер Figma к своему редактору кода, даже если вы не пишете код. Он нужен, чтобы отдавать макет агенту.
4. Прогоните один свой готовый экран через связку «макет в код» и посмотрите, что теряется. У меня список потерь получился из четырёх пунктов, у вас будет свой.
5. Соберите переменные и токены своей дизайн-системы через агента, это разовая работа с большой отдачей.
6. Решите, какие задачи вы отдаёте машине навсегда, и запишите это правилом для себя.

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

Заменит ли нейросеть дизайнера?
Она забирает механическую часть: перенос макета в код, именование слоёв, сборку токенов, проверку контраста. Решения о структуре, сетке и типографике остаются за человеком.

Что такое MCP-сервер Figma простыми словами?
Это мост между вашим макетом и ИИ-агентом в редакторе кода. Агент видит фреймы, переменные и компоненты и может писать код по ним, а также менять сам макет.

Нужен ли платный тариф Figma ради ИИ?
Нет, удалённый MCP-сервер работает на всех тарифах, а бесплатный Starter даёт 500 кредитов в месяц. Платный нужен, когда кредиты кончаются и когда требуется настольный сервер.

Насколько точно ИИ повторяет макет?
По моему замеру структура и тексты переносятся точно, а поля, вертикальный ритм, шрифт и фон теряются. Каркас получается за 21 секунду, доводка остаётся человеку.

Работает ли Figma из России?
Сайт открывается, регистрация проходит. Проблема в оплате: карты российских банков не принимаются, нужен посредник или зарубежная карта.

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

Можно ли сделать сайт клиенту без разработчика?
Да, генераторами интерфейса. Если клиенту нужен не только сайт, но и обработка заявок, смотрите платформы с ИИ-агентом.

Вывод

Главный выигрыш от ИИ у дизайнера не в рисовании, а на двух стыках: с разработкой и с дизайн-системой. Там работа механическая, проверяемая и хорошо описывается словами.

Мой прогон показал границу честно. Каркас экрана собирается за 21 секунду и стоит 2 рубля, но поля, ритм и гарнитура теряются первыми. Значит машине отдаём структуру и перенос, себе оставляем композицию и типографику.

Начните с трёх вещей: включите агента в бесплатном тарифе, подключите MCP-сервер к редактору кода и прогоните один свой экран через связку «макет в код». Дальше решите сами, что отдаёте машине навсегда.