Веб-студия Девять квадратов 
Тендеры и лиды
Информация
Сейчас ежедневно дизайн-общество задаётся вопросом: заменит ли ИИ человека, начнут ли интерфейсы генерироваться по одной кнопке и что станет с профессией через пять лет? Безусловно, появление ИИ во многом облегчило повседневную рутину, но будем реалистами – создавать задуманное по одному нажатию он ещё не научился. Ну, а пока теоретики спорят, практики используют LLM-модели для куда более приземленной, но чертовски полезной задачи — сборки собственных микро-инструментов и плагинов для Figma.
Раньше создание даже простейшего внутреннего плагина для студии или продуктовой команды превращалось в бюрократический ад. Нужно было отвлечь разработчика от текущих задач, написать подробное ТЗ, согласовать архитектуру, дождаться релиза... В итоге 95% идей по автоматизации умирали на этапе «да ладно, мне проще самому».
Сегодня ситуация изменилась: дизайнер, который глубоко понимает внутренние производственные процессы команды, может пройти путь от идеи до первого рабочего прототипа плагина буквально за пару вечеров, при этом без знания JS/TS и без привлечения фронтендеров.
В сегодняшней статье мы разберём, как устроен этот процесс на практике, какие задачи действительно стоит автоматизировать и как правильно использовать нейросети в качестве персонального разработчика, чтобы не закопаться в багах.
Прежде чем браться за генерацию кода, нужно жёстко разделить задачи на «человеческие» и «конвейерные». Попытка заставить ИИ придумать концепт сложного интерфейса или выстроить логику пользовательского пути в комплексном B2B-продукте — это пустая трата времени.
Ценность продуктового дизайнера или арт-директора лежит в области аналитики, композиции, понимания бизнес-метрик и поиска нестандартных визуальных ходов. В этих точках требования к специалисту только растут.
Но как только концепт утвержден, начинается рутина:
Раскопировать мастер-макет на 30 различных ресайзов под требования рекламных сетей.
Подставить в готовые карточки товаров текстовые локализации на 15 языках и проверить, не поплыли ли автолейауты.
Переименовать вручную 400 слоев в старом проекте, чтобы привести его к стандартам обновленного UI-кита.
Заменить во всех макетах старые иконки рейтинга на новые из дизайн-системы.
Это не дизайн – это чистая механика. Именно на выполнение таких задач уходит до 70% рабочего времени штатных дизайнеров в пиковые периоды. Если дизайнер часами выполняет одну и ту же последовательность действий мышкой, значит, этот процесс пора упаковать в код.
Не каждый рутинный процесс требует написания собственного инструмента. Иногда проблема решается базово, и прежде чем садиться за промпты, проверьте процесс по четырем критериям:
1. Регулярность и массовость. Команда сталкивается с этой задачей каждую неделю или на каждом новом проекте, а объём макетов исчисляется десятками и сотнями.
2. Линейная логика. Вы можете пошагово, простыми словами описать алгоритм действий. Например: «Выбрать выделенный фрейм – Найти внутри него все текстовые слои с именем 'Price' – Заменить их значение на данные из третьей колонки CSV-таблицы – Экспортировать в PNG».
3. Человеческий фактор как главный источник ошибок. Из-за усталости и монотонной работы дизайнеры часто могут совершать очевидно глупые ошибки.
4. Стандартный функционал Figma бессилен.
Важно: Перед созданием плагина убедитесь, что вы выжали максимум из встроенных возможностей Figma. Часто проблему «семи тысяч ресайзов» можно решить правильной настройкой адаптивных компонентов, использованием Figma Variables и плагинов для импорта контента из Google Таблиц (например, Google Sheets Sync). Собственный инструмент стоит писать только тогда, когда стандартных связок уже не хватает для кастомной логики вашей студии.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13772 тендера
проведено за восемь лет работы нашего сайта.
Мы в команде выработали четкий алгоритм взаимодействия с LLM-моделями (вроде ChatGPT или Claude) для написания рабочего кода под Figma API. Весь процесс делится на четыре этапа.
Разбейте вашу задачу на атомарные операции. Объясите задачу ИИ так, будто обучаете джуну (а может и ещё тщательнее):
• Каков стартовый пункт (что должно быть выделено в Figma перед запуском плагина)?
• К каким типам объектов (Frame, Instance, Component, Text) плагин должен обращаться?
• Что именно он должен изменить (размер, имя слоя, цвет, текстовое значение)?
• Что должно произойти в финале?
Если задача простая, то для полноценного плагина нужно настроить базовое окружение:
1. Скачайте и установите Visual Studio Code (VS Code).
2. В Figma откройте вкладку Plugins – Development – New Plugin.
3. Выберите шаблон (например, с простым UI-интерфейсом или без него, если инструмент работает по горячей клавише).
4. Сохраните проект на компьютер. Figma создаст папку с файлами manifest.json, code.ts (или code.js) и ui.html.
Не пытайтесь заставить ИИ написать весь плагин целиком за один запрос. Двигайтесь короткими шагами:
• Запрос 1 (База): «Я пишу плагин для Figma. Мне нужно использовать Figma API. Напиши код для файла code.js, который берет выделенный пользователем фрейм, проверяет, является ли он фреймом, и выводит в консоль его ширину и высоту».
• Проверяете код в Figma (через Development – Run Last Plugin). Работает? Отлично.
• Запрос 2 (Усложнение): «Теперь допиши код так, чтобы плагин создавал копию этого фрейма, смещал её на 200 пикселей вправо и менял ширину копии на 1080 пикселей, а высоту на 1350 пикселей (формат Instagram Post)».
Такой итеративный подход позволяет вовремя локализовать ошибку. Если на третьем шаге все сломалось, вы точно знаете, какой именно кусок логики вызвал проблему.
Именно на этом этапе сыпется большинство ИИ-текстов и ИИ-кода. Нейросеть по умолчанию пишет код для «идеальных условий», но в реальной работе дизайнер обязательно забудет выделить фрейм перед запуском, или случайно выделит векторную точку или внутри компонента окажется скрытый слой.
Вам придется вручную «допрашивать» нейросеть на предмет устойчивости кода. Задавайте вопросы:
– «Что произойдет, если пользователь вообще ничего не выделил на холсте? Добавь проверку и вывод предупреждения 'Пожалуйста, выделите фрейм'».
– «Что если внутри фрейма нет текстового слоя с нужным именем? Сделай так, чтобы плагин не падал в ошибку, а просто пропускал этот элемент».
Чтобы не быть голословными, покажем, как автоматизация меняет экономику производства на реальном примере. На одном из наших проектов переход от ручной адаптации мастер-макетов к полуавтоматической сборке через внутренние скрипты полностью перекроил тайм-менеджмент команды.
Раньше в пиковые периоды (сезонные продажи, запуски крупных кампаний) дизайнеры тратили до 80% времени на монотонное масштабирование утвержденного креатива под требования разных площадок. Это приводило к выгоранию, замыленному глазу и глупым ошибкам в текстах или ссылках.
После внедрения связки «Figma Variables + кастомный плагин для подстановки локализаций» ситуация изменилась:
Главный итог автоматизации: дизайнеры перестали выполнять функцию механического рендерера. Их фокус сместился на аналитику результатов, улучшение UX и поиск более сильных визуальных концепций. То есть на ту работу, где человеческое мышление и насмотренность незаменимы.
Если вы хотите внедрить этот подход в своей команде, не пытайтесь сразу спроектировать сложный комбайн, который решает все проблемы студии. Начните с малого:
· Соберите команду и откройте рабочий процесс за последнюю неделю.
· Найдите одно конкретное, максимально унылое и повторяющееся действие, которое дизайнеры выполнили в сотый раз.
· Откройте Claude или ChatGPT и попробуйте декомпозировать это действие на понятные шаги.
Возможно, этот маленький шаг сэкономит вашей команде десятки часов рутины уже на следующем проекте.
