🤖 Автоматизация визуального контента в Figma через AI

Автоматизация визуального контента с помощью AI и Figma

Ключевые тезисы:

Автоматизация через код (AI) позволяет массово создавать уникальный визуальный контент для маркетплейсов и карточек товаров.
Инструменты (код + Figma) дают «компьютерное зрение» и «руки» для работы в интерфейсах.
Ключевое преимущество — работа с редактируемыми макетами в Figma, а не со статичными изображениями (JPG).
Основная сложность и ценность — создание мастер-макетов на автолейаутах, адаптированных под множество переменных параметров.

История началась с клиента (продавец автомобильных шин), у которого было более 1.000 SKU. Создание уникального контента для каждого артикула:

Изначальное коммерческое предложение стоило >1 млн руб. и требовало 1.5-2 месяца работы.
Не подходило клиенту, так как у него были свои дизайнеры, но им нужна была дополнительная мощность для большого объёма.
Стало очевидно, что нужна автоматизация, которая сейчас возможна благодаря интеграции кода с Figma.

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

Мастер-макет: готовый редактируемый файл в Figma.
Промт для кода: «Создай серию изображений, где будут представлены все диоптрии от -25 до +25 с шагом 0.5, исключая 0 и 1 диоптрию».
Процесс: Код анализирует файл Figma, находит ID текстового блока с параметром «диоптрии» и автоматически создаёт новые фреймы с изменёнными значениями.
Результат: Быстрое (около 2 минут) создание всей серии изображений с соблюдением диапазона, шага и исключений.

Вывод: Автоматизация экономит огромное количество времени даже на простых задачах с одной переменной.

Задача: Создать уникальный контент для большого ассортимента шин с множеством характеристик.

Сложность: 4 модели шин, каждый с уникальным размерным рядом, сезонностью (лето/зима), индексом скорости и другими параметрами.
Риск ручной работы: высокая вероятность ошибок и путаницы при большом объёме.

Макет собран на автолейаутах и содержит 10 переменных параметров:

Автолейаут обеспечивает автоматическое изменение layout при изменении текста или параметров.

Источник данных: CSV-файл (номенклатура) с артикулом, моделью, серией, размером, сезоном и булетами.
Графические ресурсы: 4 изображения моделей шин, 2 фона (летний/зимний), 2 иконки.
Промт: Коду даётся задача создать уникальные фреймы для каждой строки таблицы, учитывая все параметры и их взаимосвязи (например, сезон влияет сразу на фон, иконку и цвет плашек).

Код создаёт полную серию изображений за ~4 минуты после первоначальных уточняющих вопросов.
На выходе — полностью уникальные карточки с изменёнными моделями шин, размерами, оформлением (сезонностью) и характеристиками.
Все созданные фреймы остаются редактируемыми в Figma.

Качество мастерマкет: Он должен быть собран на автолейаутах, адаптивным и подогнан под максимальные возможные значения параметров.
Инструменты: Для работы требуется определённый тариф на Figma и код, а также подключение MCP-серверов.
Перспективы: В следующих этапах планируется интеграция с генерацией изображений товаров через другие MCP (например, от Хьюстла) для создания карточек товара с полностью прогенерированными изображениями, интегрированными в среду.

Автоматизация визуального контента через AI и Figma решает проблему масштаба для больших ассортиментов (1000+ SKU).
Экономия времени колоссальная — минуты вместо месяцев ручной работы.
Ключ к успеху — правильно подготовленный мастер-макет на автолейаутах.
Этот подход меняет привычные процессы создания контента и открывает возможности для AI-first стратегии в дизайне.