ИИ внутри Figma: встроенные функции, агент, плагины и code layers

В Figma уже встроен целый набор ИИ-функций, о которых многие дизайнеры не знают, хотя пользуются Figma каждый день. Всё ниже вызывается через меню Actions в тулбаре или правым кликом по выделению. Устанавливать ничего не нужно. Общее ограничение для всего раздела: права на редактирование файла и, для большинства функций, платный тариф. На бесплатном Starter отдельных инструментов из Actions нет, но Figma Agent и функции, которые он вызывает, доступны на всех тарифах. Пул ИИ-кредитов на Starter небольшой: 500 в месяц и не больше 150 в день. ИИ-поиск и Rename layers кредиты не тратят. Сами ИИ-функции расходуют общий пул ИИ-кредитов аккаунта, который делится между всеми продуктами Figma (Design, FigJam, Slides). Общая логика лимитов — в теме «Тарифы и лимиты».

Перевод, изменение тона, сокращение текста. Функция Rewrite, translate and shorten работает с выделенным текстовым слоем, а не со всем документом целиком. «Сократить» не требует промпта и просто ужимает текст под то же место. «Перевести» предлагает выбрать язык из списка. «Переписать» принимает свободный промпт на смену тона или даже написание текста с нуля:

Перепиши этот текст более уверенным, экспертным тоном, сохрани длину примерно такой же

Практическая оговорка ровно под тот случай, который первым приходит в голову: «перевести огромный документ». Функция работает по одному слою, поэтому для большого документа придётся пройтись по каждому текстовому слою отдельно. Одного клика на весь файл здесь нет. Если слоёв действительно много, разумнее экспортировать текст и прогнать через обычный чат с ИИ одним запросом. А если это регулярная задача, собери под неё свой плагин (тема «Вайбкодинг: арт и инструменты», раздел про вайбкодинг плагина для Figma).

Заполнение плейсхолдеров реалистичным контентом. Функция Replace content нужна, когда надо быстро заполнить повторяющиеся карточки, списки или таблицы правдоподобным текстом вместо «Lorem ipsum» или одинаковых заглушек. В отличие от Rewrite, она работает сразу на нескольких одинаковых объектах за одно действие. И тоже принимает уточняющий промпт:

Замени плейсхолдерный текст на реалистичные названия и описания товаров для интернет-магазина спортивной одежды

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

Rewrite: переписать, перевести, сократить

Replace content: заполнить повторы

Генерация и редактирование изображений. Make an image генерирует картинку прямо в выделенной фигуре или как новый слой по текстовому промпту. Edit image дорабатывает уже готовое изображение тем же разговорным способом, что и в теме «Редактирование изображений и ретушь». Рядом набор точечных инструментов для фото. Remove background убирает фон. Boost resolution поднимает чёткость мелкого изображения. Expand image дорисовывает пространство за исходными границами кадра. Isolate and erase objects выделяет объект в отдельный слой или стирает его из кадра. Vectorize превращает растровую картинку в редактируемый вектор:

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

Результат будет растровым. Для интерфейса его нужно векторизовать (и генерация, и Vectorize — только на платных планах) или взять готовую иконку из библиотеки вроде Phosphor.

Make an image

Expand image

Isolate and erase

Vectorize и соседи

Автоматические имена слоёв. Rename layers смотрит на содержимое слоя, его расположение и связь с соседними выделенными слоями и сам подбирает осмысленное имя. Без промпта, одним кликом: здесь нет текстового поля, только выделение и клик. Уже вручную переименованные слои функция не трогает. Если один и тот же безымянный слой повторяется в нескольких фреймах (например, карточка товара), она переименует все совпадения разом. Это важно для Smart Animate между экранами, которому для плавного перехода нужны одинаковые имена слоёв.

Первый черновик экрана по промпту. С мая 2026 Figma переводит эту функцию в Figma Agent (см. ниже); у части аккаунтов пункт First Draft в Actions уже заменён агентом. First Draft собирает черновой, полностью редактируемый макет из встроенных библиотек компонентов по текстовому описанию. Пример такого промпта — в разделе «Примеры команд для практики» ниже. Три ограничения, которые лучше знать заранее. First Draft не умеет собирать макет на основе твоей собственной дизайн-системы, только на встроенных библиотеках. Он плохо справляется с нетиповыми форматами: книжная вёрстка, приглашения, всё, что не «типичный сайт/апп». И правки через сам First Draft доступны только пока не закрыто меню Actions. После этого редактировать можно только обычными инструментами Figma, а не повторным промптом.

Поиск ассетов по смыслу, а не по названию файла. Find assets and designs ищет по командным файлам, всей организации или Figma Community. Искать можно по части макета, скриншоту или словесному описанию, а не только по точному названию. Это полезно, когда нужен «похожий компонент, который явно уже кто-то делал», но неизвестно, как он называется:

Найди компонент карточки товара с ценой, рейтингом и кнопкой «в корзину», похожий на этот экран

Автогенерация интерактивности. Add interactions сама расставляет связи между экранами прототипа по угадываемой логике макета, вместо ручной прокидки каждой стрелки. Это черновой проход, который потом нужно проверить и поправить руками. Текстового промпта здесь тоже нет: только выделение экранов и клик.

Отдельно от Actions живёт Figma Agent. Это разговорный ИИ-агент, который сам создаёт и правит объекты на канвасе по диалогу. По духу он ближе к Claude Design и Google Stitch из темы «Дизайн-мышление до кода», чем к точечным инструментам выше. У него есть отдельная, более техническая способность: генерировать собственные плагины и шейдеры прямо по промпту (шейдеры на момент подготовки материала в открытой бете). Она разобрана ниже.

Есть ещё один способ получить свой инструмент внутри Figma, кроме сборки плагина руками через Figma Plugin API вместе с CLI-агентом (тема «Вайбкодинг: арт и инструменты»). Попроси сделать это прямо Figma Agent. Открой вкладку «Agents» в навигации и напиши «Build me a plugin» или «Build me a shader» с описанием задачи. Дальше агент сам пишет и тестирует код, без выхода из Figma и без ручной настройки manifest.json.

Разница между двумя понятиями:

• Плагины расширяют функциональность файла. Что-то создают (например, визуализатор аудиодорожки), меняют существующие слои (массовая перекраска иконок) или наводят порядок в файле (пакетное переименование, проверка прототипных связей).
• Шейдеры (тема «Вайбкодинг: арт и инструменты», тот же термин, что и в WebGL) — программы, которые считают визуальный эффект. Либо самостоятельная заливка (паттерн, градиент, процедурная текстура), либо эффект поверх готового слоя (блюр, искажение, зерно, пикселизация).

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

Собери плагин: проверяет контраст текста и фона на всех текстовых слоях в выделении по стандарту WCAG AA и подсвечивает те, что не проходят

Промпт для шейдера:

Собери шейдер: топографические контурные линии, которые медленно перетекают, в холодной синей палитре

Панель шейдеров в файле

Шейдер «топография»

Ограничения на момент подготовки материала. Функция в открытой бете. Создание и правка через агента тратят ИИ-кредиты, а запуск готового шейдера бесплатен. Готовый плагин или шейдер можно опубликовать в Figma Community или приватно внутри организации (монетизировать шейдеры пока нельзя). Код шейдера можно посмотреть; шейдер экспортируется через MCP в Figma Make, но экспортированная копия теряет связь с оригиналом. Готовый шейдер живёт внутри Figma и не переносится как есть в вайбкодинг-проект. Для рендеринга шейдеров нужен браузер и система с поддержкой WebGPU.

Похожий принцип, но для сайтов, а не для канваса вообще, — code layers в Figma Sites. Это продукт Figma для публикации сайтов, сосед Framer и paper.design из темы «Вайбкодинг: сайты». Обычный слой Figma — статичная форма. Code layer — тот же визуальный объект, но реально написанный кодом (React, TypeScript, Tailwind CSS). Поэтому он способен на настоящее поведение: анимацию, реакцию на курсор, состояния.

Нарисовать code layer можно инструментом Make в тулбаре (или горячей клавишей E). Либо с нуля, описав желаемое поведение словами, либо превратив в него уже готовый статичный дизайн, которому нужна интерактивность. Двойной клик по code layer открывает окно-редактор. Там можно вести диалог с ИИ, писать код руками или сразу смотреть превью. Это рабочая среда, где промпт и ручная правка кода равноправны, а не только автоматическая генерация.

Преврати этот статичный блок с карточками в code layer: карточки должны увеличиваться и показывать тень при наведении курсора, с плавным переходом

Практическая деталь: у code layer, как и у обычного компонента, можно вынести настраиваемые свойства в отдельную панель. Так человек, который не трогает код напрямую, сможет менять поведение через понятные переключатели. Готовые code layers можно превращать в переиспользуемые компоненты и множить инстансами, как обычные компоненты Figma.

Ложная дорожка: «рандомизация» — это не встроенная функция. Если нужно случайно перемешать варианты компонента (например, разные фото в сетке карточек), в официальном наборе ИИ-инструментов Figma такой функции нет. То, что для этого обычно ищут («shuffle», рандомайзер инстансов), — сторонние community-плагины, а не часть Figma AI. Если готовый плагин из Community не подходит под конкретную задачу, это ровно тот случай, когда лучше собрать свой через вайбкодинг (тема «Вайбкодинг: арт и инструменты»).

Ложная дорожка: спелчек — не ИИ. В Figma есть встроенная проверка орфографии (меню Text → Spell check, подчёркивает ошибку красной волнистой линией прямо в режиме редактирования текста). Но это обычный словарный спелчекер уровня операционной системы, а не ИИ-функция. Он не понимает контекст и не предложит переформулировать неудачную фразу. За смысловую правку и исправление корявых формулировок отвечает уже упомянутый Rewrite.

Сравни, что я могу сделать с плагином ИИ внутри Figma и что — только через отдельный чат-бот.

Какой из встроенных ИИ-инструментов Figma подойдёт для моей задачи: нужно быстро заполнить 12 карточек с товарами реалистичным текстом вместо заглушек?

Объясни, почему First Draft не подойдёт для сборки экрана на моей собственной дизайн-системе, и что использовать вместо него в этом случае

Экран оформления заказа для магазина, который продаёт мангалы и угли

Build me a plugin: проходит по всем текстовым слоям в выделении, находит двойные пробелы, обычный пробел после коротких предлогов (в, к, с, о, у, и, а) и кавычки-лапки вместо ёлочек и показывает список с кнопкой „исправить всё“: двойной пробел — в одинарный, пробел после предлога — в неразрывный, лапки — в ёлочки