Реальные кейсы применения AI для автоматизации дизайн-задач
Я использую нейросети как персонального джуна-дизайнера, которому можно платить всего 30$ в месяц. Хочу рассказать о 4-х кейсах использования нейросетей в моей работе продуктового дизайнера.
Кейс 1. Уборка
Я работаю в фигме и пиксе, в процессе разработки макетов всегда появляются лишние группы, папки, слои без названий, которые по-хорошему нужно убрать перед передачей в разработку.
С помощью Codex я написал плагин для фигмы, а потом и для Pixso, который просматривает каждый макет на странице на наличие групп/слоев которые по факту не нужны и убирает их, переименовывает слои без названий в понятные наименования исходя из контекста их расположения.
Кейс 2. Первая стадия дизайн-ревью
Также с помощью ИИ я создал плагин для Figma и Pixso, который проводит проверку макетов на наличие кастомных компонентов не из дизайн-системы, на наличие текстовых элементов без привязки к стилю.
Там где он это находит – оставляет комментарий дизайнеру, что текст нужно обязательно привязать к стилю, а кастомный компонент лучше заменить компонентом из ДС. Когда я проводил ревью, тратил на ручную проверку минимум час времени, с таким плагином я сделаю это за секунды.
Кейс 3. Реальные данные
Я занимаюсь дизайном списков инструментов и рынка в Сбер инвесторе, и больше всего я взаимодействую с компонентом ячейки инструмента, из которого состоят списки и подборки инструментов на рынке.
Проблема была в данных, они всегда писались с головы «примерно», что иногда сказывалось на восприятии макетов менеджментом. Я написал плагин, с помощью которого я могу указать тикеры нужных мне инструментов, а плагин создаст ячейку заполненную актуальными данными с API ISS Moex.
Промпт для создания этого плагина:
Нужно написать плагин для фигмы. У меня есть компонент Product Cell, с ним будем работать. Нужен плагин, внутри которого есть input, в который я укажу тикер, один или несколько через запятую и нажму кнопку "ок". Нужно чтобы ты взял экземпляр компонента Product Cell под каждый из введенных тикеров и заполнил его актуальной информацией, которую можешь взять с API IIS MOEX Заполнять вот так:
Title = Название инструмента полученое по API
Ticker = Тикер который я указал
Chart = Если изменение за 24 часа положительное, то Change = up, если отрицательное то = Down, Variant = рандом.
Price = Текущая цена инструмента полученая по API, в формате 1 000,48 ₽, Animation = ставь рандом.
Change = текущее изменение цены за 24 часа с апи, в формате 12,34%, если изменение положительное то вариант компонента Change = Up, если отрицательное то Change = Down.
Emitent Logo = идешь на страницу Logos в этом же файле, и там ищещь картинку по тикеру, вставляешь ее заместо существующей в компоненте Img, если картинку соответствие тикеру не нашел то Emitent Logo Type = Placeholder, а буква, которая сейчас C должна стать первой буквой из названия эмитента, а фон Img рандомным стилем из Product Logo
Кейс 4. Работа с большим объёмом объектов
У меня есть свой проект – библиотека иконок криптовалют, их там сейчас около 400 вариантов в виде SVG иконок 24 на 24px, к каждой иконке стилем добавлен основной цвет проекта.
Я в один клик могу создавать новые варианты каждой из 400 иконок.
Массовый рендер
Для создания большого количества 3д-иконок я создал всего одну болванку в блендере и экспортнул цветные иконки из примера выше в png.
Затем дал нейросети задачу пройтись по картинкам, вставить их как текстуру в модель и отрендерить в разных ракурсах. Получилось 3600 рендеров за 1 час моей работы + 3 дня работы рендера. Идея 3D иконок была у меня давно, но вручную это делать я так и не решился, даже боюсь представить сколько времени это заняло бы, думаю, не один месяц.
В планах еще много интересного. Пишите в комментах как вы используете нейронки для упрощения рутинных процессов в дизайне?
Мой проект по иконкам – cryptoicon.io
Мой канал в тележке – @fintechui