AI и софт

5 мая

Нейросети встроенные в Figma: make an image, first draft, rename layers и другие

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

Сначала мы долго рисовали. Потом начали копировать. Потом — компоненты, автолэйауты, дизайн-системы. Всё это экономило секунды, минуты, а иногда и дни. Но по-прежнему за каждым макетом стоял человек, который рылся в слоях, придумывал названия, вычищал фон у картинок, уговаривал прототипы работать как надо.

И вот в этот утомительный процесс Figma подлила машинного масла — и неожиданно стало… легко.

Теперь ты можешь одним кликом:

сгенерировать картинку с нужной сценой;
поднять её качество до вменяемого;
заменить фон, пересветить, удалить ненужный объект;
создать макет по описанию;
автоматически назвать слои;
связать экраны интеракциями;
а если не понравился текст — просто сказать «сделай покороче» или «перепиши это, чтобы звучало умнее».

И всё это — в той же Figma, где ты рисуешь кнопки с 2016 года.

ИИ-инструменты не придумывают за тебя интерфейс и не знают, где разместить CTA, но умеют прекрасно ускорять и дополнять. Они не убивают креатив, а наоборот — дают тебе меньше поводов страдать от рутинных мелочей. С ними не надо вручную переписывать 48 слоёв в проекте клиента, потому что он внезапно решил, что слово «Menu» лучше звучит как «Navigation».

Но и не стоит думать, что это волшебная палочка. Все генерации — это версии, а не финал. Иногда приходится перегенерировать. Иногда — уточнять промт. А иногда ты просто возвращаешься к рукам, потому что знаешь: быстрее сделать самому.

ИИ в Figma — не вместо дизайнера, а как вторая рука, пока первая держит кофе. Полезно, удобно, но всё ещё требует ума и вкуса.

Инструменты генерации и редактирования дизайна

First Draft: генерация интерфейса по текстовому описанию

Когда ты видишь кнопку First Draft в панели Figma, хочется нажать на неё, как на автоматическую дверь в метро: вдруг за ней уже готов макет, где всё удобно, красиво и по делу. Спойлер: не всегда красиво, но очень часто удобно.

Суть простая: ты вводишь, например, «экран профиля пользователя с аватаркой, списком интересов и кнопкой редактирования» — и через пару секунд у тебя появляется готовый фрейм. С текстами-заглушками, иконками, layout’ом. Никакой магии — просто GPT знает, как выглядят типовые интерфейсы, и делает логичную заготовку.

У этой функции есть несколько козырей:

Она умеет в контекст. Если в проекте уже есть дизайн-система или стиль, First Draft старается подстроиться. Не всегда идеально, но базовые шрифты и цвета может унаследовать.
Можно выбирать стили. Хочешь нейтрально — получишь как в гайдлайнах Apple. Хочешь что-то с характером — напиши в промте «в стиле Telegram» или «как Dribbble UI 2020-х».
Она ускоряет старт. Если ты фрилансер или делаешь pet-проект — это просто подарок. Не надо час рисовать структуру экрана, перемещать заглушки и выравнивать блоки. Всё уже есть.

Что важно понимать — First Draft не заменит твоё мышление. Он не знает, какие у тебя ограничения по бизнесу, как думает твой пользователь и зачем тебе вообще этот экран. Он просто выдает шаблон. Умный, гибкий, но всё ещё шаблон.

Так что идеальный сценарий: ты описал, получил черновик, быстро адаптировал под задачу, добавил нюансов — и пошёл дальше. First Draft как быстрый повар в бургерной: собрал основу, а ты уже добавляешь соус и жаришь котлету до корочки.

Главное — не забывай, что дизайнер в этой паре всё ещё ты.

Генерация и редактирование изображений

Вот ты сидишь, делаешь заглушку. По брифу там должен быть «уютный кофейный уголок с окном, через которое падает мягкий свет». И что ты делаешь? Идёшь на Unsplash, вбиваешь «coffee corner», листаешь 200 картинок и всё равно выбираешь первую попавшуюся.

А теперь можно по-другому.

В Figma появилась генерация изображений по текстовому описанию — прямо внутри редактора. Написал запрос — получил картинку. Не понравилось? Измени промт или нажми regenerate. Всё это работает на модели от OpenAI, той самой, которая в конце марта 2025 научилась понимать, что такое «скандинавский минимализм с котом на подоконнике».

Но это только начало.

Сами изображения можно редактировать:

Adjust lighting — осветлить, затемнить, сделать картинку живее.
Remove object — стереть лишнее (например, странного чувака на фоне или вилку, которую зачем-то положили в миску с супом).
Restyle — сменить стилистику, не переписывая промт. Было фото, стало как обложка книжки.
Replace background — меняешь фон, не трогая основной объект. Прям как в TikTok, только без танцев.
Boost resolution — увеличиваешь чёткость, и всё перестаёт быть мыльной кашей.

Весь процесс — это как если бы Midjourney и Photoshop пожали друг другу руки и договорились работать в фрейме Figma.

Идеально это работает для:

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

Но, конечно, есть нюансы. Иногда генератор уходит в сюрреализм: просишь «ноутбук на столе», а он рисует ноутбук в столе. Иногда кнопки редактирования теряют контекст и стирают не то.

Так что, как и в случае с текстами, генерация и правка — это не финал, а черновик. Зато какой: за минуту можно получить то, что раньше требовало час в фотобанках и ещё полчаса в редакторе.

ИИ-инструменты для изображений в Figma — это не просто быстро. Это момент, когда ты говоришь: «А можно вот так?..» — и сразу видишь, как это выглядит.

Инструменты поиска и управления контентом

Визуальный поиск и поиск по активам

Когда в проекте 200 экранов, 18 вариантов кнопки и 47 иконок иконки фильтра — поиск нужного элемента превращается в игру на выживание. Особенно если ты не тот, кто всё это проектировал. Тут начинается квест: «А как автор назвал этот компонент? Button/Primary/Default или BTN_01?»

ИИ-поиск в Figma приходит на помощь как разумный ассистент, который не цепляется к неймингу, а смотрит на суть.

Теперь можно искать не по названию, а по внешнему виду. Например:

Кликаешь на фрейм с нужным элементом → вызываешь Search with image or selection → и Figma показывает все похожие элементы в проекте.
Или пишешь текст вроде: «поиск иконки загрузки файла» — и система ищет по визуальному смыслу, а не по слову “upload”.

Это работает почти как в Google Lens, только внутри твоей дизайн-библиотеки. Особенно ценно для больших команд, где десятки файлов, несколько версий UI-кита, и каждый дизайнер называет вещи по-своему.

Что даёт визуальный поиск:

Экономит время. Не нужно вспоминать точное название компонента или открывать сто файлов, чтобы найти «вот ту серую кнопку с иконкой».
Снижает зависимость от порядка в файлах. Даже если в проекте бардак, ИИ поможет найти нужное по визуальному соответствию.
Ускоряет онбординг. Новый дизайнер может быстро понять, что уже есть в проекте, и не изобретать велосипед.

Есть и обратная сторона. Если у тебя всё в стиле «да хоть бы как-то», а элементы друг на друга не похожи — поиск будет путаться. Идеально он работает, когда есть хоть какая-то система и повторяемость.

В общем, визуальный поиск — это как «Ctrl+F», только для глаз. Наконец-то ты можешь искать интерфейс глазами, а не пытаться угадать, как твой коллега назвал шапку экрана.

Замена и редактирование текста

Есть такой вид боли, который знает каждый дизайнер: делаешь макет, клиент смотрит и говорит — «А давайте текст будет не “Sign up”, а “Зарегистрируйтесь на бесплатную консультацию”». И ты такой: ага, сейчас всё полетит.

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

Переписать текст — через команду Rewrite this…. Figma предложит один или несколько вариантов, которые звучат мягче, убедительнее, живее или просто менее по-роботски.
Сократить — функция Shorten удаляет всю вербальную воду и делает так, чтобы надпись на кнопке не вылезала за рамки.
Перевести — Translate to… переводит фрагмент на любой язык. Хочешь немецкий — пожалуйста. Хочешь испанский с мягким маркетинговым флером — тоже можно.
Сменить тон — неформальный на деловой, сухой на вдохновляющий. Это полезно, если у тебя есть два сценария: для лендинга и для внутренней админки.

Чем это полезно:

Можно тестировать варианты текста без копирайтера.
Ускоряется A/B-тестирование текстов: вставил, переформулировал, сравнил.
Легче делать мультиязычные интерфейсы, особенно если нет локализатора под рукой.
Можно быстро проверить, поместится ли текст в UI, не потеряв смысл.

Но важно помнить — ИИ не знает контекста глубоко. Он не поймёт, что «Зарегистрироваться» у тебя запускает 3 шага, а не просто открывает форму. Он не знает, как разговаривает твоя аудитория. Поэтому финальный вариант — всё ещё твоя ответственность.

ИИ-редактор текста в Figma — это как нейросетевой напарник, который вечно говорит: «А можно я попробую по-другому?» Иногда это гениально. Иногда — мимо. Но почти всегда — быстрее, чем самому выдумывать с нуля.

Инструменты для прототипирования и автоматизации

Автоматическое создание прототипов

Это когда ты соединял экраны вручную, а теперь просто нажал кнопку — и всё протянулось само. Магия? Почти. На самом деле — ИИ, который знает, как обычно связывают кнопки с экранами и формы с результатами.

Теперь в Figma появился инструмент, который автоматически создает интерактивный прототип. То есть ты выбираешь несколько фреймов, вызываешь Auto Prototype, и система сама:

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

Например, если у тебя есть экран со списком и экран с деталями — кнопка «>» или карточка сама протянется в нужный фрейм. Если есть кнопка «Submit» и следующий экран — система догадается связать их. Она даже понимает back-кнопки и логику возврата.

Что это даёт:

Экономию времени. Особенно в проектах, где десятки экранов и все они соединяются по одной и той же схеме.
Мгновенный результат для тестов. Нужно показать клиенту или команде, как всё работает? Буквально через минуту после импорта фреймов у тебя уже кликабельный прототип.
Упрощение UX-ревью. Теперь можно фокусироваться не на том, что забыл соединить экраны, а на сценариях, логике и удобстве.

Есть, конечно, нюансы. Auto Prototype не всегда угадывает, какая кнопка за что отвечает. Иногда придётся поправить связи вручную, особенно в сложных сценариях с модалками и условными переходами.

Но в 80% случаев он экономит кучу времени и позволяет тебе быстрее перейти к главному — тестированию гипотез, а не перетаскиванию стрелочек.

Это как если бы ты разложил карточки на доске, и кто-то за тебя аккуратно связал их ниточками. Тебе остаётся только потянуть — и увидеть, как оно работает.

Автоматическое переименование слоёв

Если бы у дизайна был свой ад, он бы начинался со слоя Frame 342 → Rectangle 5 → Group 29 → Vector. И ты в нём — потому что вчера ночью срочно собирал макет, а сегодня в него залез твой коллега. Или, ещё хуже, разработчик.

Figma решила спасти нас от этого безобразия и добавила AI Rename Layers — функцию, которая автоматически переименовывает слои. Прямо внутри редактора. Без плагинов, без костылей, без вечной надежды на дисциплину.

Как это работает:

Выделяешь фрейм или несколько.
Жмёшь кнопку.
Слои получают нормальные, читаемые названия: Button / Primary, Image / Avatar, Text / Description. Не идеально, но в 100 раз понятнее, чем Group 17.

ИИ не просто называет слои «по виду», он анализирует контекст:

если элемент похож на кнопку — он станет кнопкой;
если это изображение с аватаркой — будет Avatar;
если текст с датой — будет Date label.

Почему это важно?

Экономия времени на ручное переименование. Особенно когда у тебя фрейм на 80 слоёв, и ты открыл его в 3 ночи перед дедлайном.
Уважение к коллегам. Теперь, открывая файл, никто не будет кричать в чат: «Кто это делал и почему у нас три слоя Rectangle 1 подряд?»
Упрощение передачи проекта в разработку. Переименованные слои = меньше вопросов от фронтов. А меньше вопросов = меньше созвонов в Zoom.
Чистота в проектах. Нормальные имена слоёв — это как вытереть крошки со стола перед тем, как звать гостей.

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

AI Rename Layers — это как если бы у тебя был стажёр, который с утра пораньше прошёлся по твоему файлу и всё аккуратно подписал. Мелочь, а порядок чувствуется.

Заключение

ИИ в Figma — это не революция, а грамотная эволюция. Не «всё теперь за нас делает машина», а «мы наконец перестали тратить жизнь на Rename Layer (145)». Это инструменты, которые не про замену человека, а про уважение к его времени, вниманию и нервной системе.

Вот что они дают на практике:

Ускоряют старт: First Draft и генерация прототипов — как запуск с уже натянутым трамплином.
Упрощают визуальный порядок: автопереименование и визуальный поиск делают чистку файлов не поводом для медитации, а делом трёх кликов.
Помогают с контентом: редактирование текста, перевод, смена тона — без писем копирайтеру и переводчику в 23:57.
Делают mockup живыми: генерация и правка изображений прямо в Figma — и не надо бегать между Midjourney, Photoshop и старым добрым Paint.

Как внедрить это в рабочий процесс?

Начни с одного сценария. Например, подключи AI Rename Layers для старых проектов. Или генерируй картинки для заглушек. Маленькие шаги, большой эффект.
Сформируй шаблоны промтов. Особенно для First Draft и генерации изображений. Это экономит нервы и даёт стабильные результаты.
Не верь с первого раза. Всё, что делает ИИ, — это черновик. Проверь, уточни, подредактируй. Машина помогает, но не думает за тебя.
Внедри в команду через демонстрацию пользы. Покажи, как за 10 минут можно накидать прототип, и все захотят попробовать.

ИИ в Figma — не волшебник, а ускоритель. Он не даст тебе идеального дизайна, но даст фору тем, кто продолжает рисовать кнопки вручную и ищет «ту самую иконку» по папке из 300 svg.

И если раньше ты говорил себе «ну, я и сам справлюсь», то теперь пора говорить: «Я справлюсь. Только быстрее. И с кайфом».

до конца ≈ из