Пошаговый мануал по созданию конструктора иллюстраций в Figma

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

Расскажу на примере одного из персонажей для конструктора иллюстраций «Атвинты», как сделать его автоматизированным в Figma. То есть пользователь в несколько кликов сможет выбрать персонажа и настроить его внешний вид, начиная одеждой и заканчивая положением бровей.

В конце статьи приведу практический кейс, как конструктор иллюстраций решает задачи серьезной IT-платформы.

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

Конструктор иллюстраций актуален в таких ситуациях:

• Точное количество иллюстраций не известно или исчисляется сотнями.
• Иллюстрации должны иметь много одинаковых или схожих элементов, которые могут повторяться.
• Иллюстрации будут постоянно пополняться.
• Проект будет передан другому дизайнеру или вести его будет не дизайнер. И нужно избежать потерь в стилистике.
• Нужно создавать иллюстрации быстро.

Самый простой и дешевый способ сделать набор иллюстраций — приобрести готовый пак или воспользоваться сайтом-конструктором.

Вот несколько хороших сайтов.

• VECTOR CREATOR — сайт-конструктор иллюстраций
• Open Peeps — конструктор персонажей
• Stubborn Generator — конструктор персонажей
• Smash Illustrations — конструктор иллюстраций

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

Если нужно по-настоящему уникальное решение, лучше сделать пак иллюстраций самостоятельно.

Рассказываю на примере одного из персонажей конструктора для Атвинты.

Сначала определяемся со стилистикой и отрисовываем первого персонажа. Как работала над стилистикой, рассказывала в предыдущей статье на VC.ru.

После отрисовки выбираем, какие детали мы хотим сделать изменяющимися, и приступаем к разработке конструктора. Для примера рассмотрим глаза и волосы.

Выделяем элементы и объединяем их в компонент, нажав на кнопку, выделенную на первом скриншоте. Например, будем работать с глазами персонажа.

Задаем имя компонента на русском, английском или так, как будет понятно пользователям. Я назвала компонент с глазами «Светлые».

Компоненты нужно разместить и назвать определенным образом, чтобы все правильно работало.

Для этого создаем рядом с персонажем фрейм и называем по имени компонента: «Глаза».

Затем нам нужно продублировать компонент с глазами и оставить в исходной иллюстрации дочерний компонент — ту копию, которую вы только что создали. А главный компонент, с которого делали копию, переносим в новый фрейм «Глаза».

Отрисуем еще парочку вариантов глаз. Самый простой вариант — скопировать наши светлые глаза и добавить заливку зрачкам.

Для этого создаем копию компонента на фрейме «Глаза». Это удобно сделать, выделив нужный нам компонент и перетащив его мышью выше или ниже с зажатым при этом Shift и Alt. После этого делаем копию некомпонентом, кликнув по нему правой кнопкой мыши и выбрав «Detach Instance» из меню.

Добавляем зрачкам цвет и преобразуем группу обратно в компонент с названием «Темные». Новая разновидность элемента готова!

Давайте не будем останавливаться на этом и создадим еще и закрытые глаза. Повторяем алгоритм: копируем любой компонент, делаем его некомпонентом, редактируем. Для закрытых глаз удаляем все содержимое и рисуем пару дугообразных линий. Снова делаем группу компонентом и называем «Закрытые».

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

Обратите внимание на два момента:

• Редактирование нужно начинать всегда на копиях главного компонента, чтобы случайно не избавиться от какого-нибудь из главных.
• Все новые компоненты должны находиться во фрейме «Глаза» и быть главными, а не дочерними. Понять это можно по иконке возле компонента слева: у главного компонента это 4 ромбика.

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

Делать это можно в панели справа. Любой новый компонент, который вы в будущем добавите подобным образом, появится в вариантах элементов при настройке компонента глаз.

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

Но бывают исключения. Например, компонент «Волосы» в моем примере находится на верхнем слое и перекрывает остальные элементы на лице персонажа.

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

Эту проблему можно обойти снятием галочки «Сlip content» в панели справа.

Теперь можно делать новые варианты причесок.

Помните, каждый новый фрагмент должен совпадать по расположению с предыдущими. Лично мне удобнее рисовать новые элементы прямо на месте их будущего расположения, заимствуя размеры фрейма у уже имеющегося элемента.

Насколько детальной будет иллюстрация, зависит только от текущей задачи и вашей фантазии.

Для каждого нового изменяемого элемента создаем отдельный фрейм, отрисовываем и настраиваем варианты. После чего пользователь сможет самостоятельно создать персонажа. если бы каждого персонажа отрисовывал вручную дизайнер, это занимало бы от получаса до нескольких часов. А так пользователь создаст нужный образ за 5 минут. Если не залипнет в подборе причесок, нарядов, выражений лица.

Главное понять принцип создания, расположения и добавления компонентов, а также не нарушать правила их размещения.

Важные принципы:

• На иллюстрации размещаем дочерний элемент, а все главные храним в предназначенном для них фрейме.
• Размер для компонентов определенного элемента задается заранее. Все последующие компоненты должны совпадать по размеру с исходным.
• Названия фреймов и компонентов подбираем так, чтобы пользователь легко ориентировался в конструкторе. Не забывайте следить за этим.
• Нужно контролировать расположение линий внутри элемента и следить, чтобы они совпадали с остальными элементами иллюстрации. Например, чтобы линии элемента руки не залезали на элемент футболки и т.п.

Теперь вы можете самостоятельно создать конструктор иллюстраций в Figma.

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

Для такого сервиса мы разрабатывали интерфейсы всех разделов.

Масштабный веб-сервис не обходится без онбординга, кучи документации, разъясняющих материалов, инструкций, чтобы пользователи правильно заполняли данные в сервисе в соответствии с законодательством.

И в процессе проектирования интерфейсов столкнулись с задачами:

• Все мануалы на платформе нужно иллюстрировать. Тогда пользователям будет удобнее разобраться, как работать с сервисом.
• Количество документации растет от месяца к месяцу: что-то нужно обновить, потому что изменилось законодательство, что-то нужно дописать, потому что появились новые фичи. И везде нужны поясняющие иллюстрации.
• Иллюстрации будут делать штатные сотрудники, а не компетентные дизайнеры. Причем важно сохранить единую стилистику и генерировать изображения быстро.

Решили создать для платформы кроме классической дизайн-системы еще и конструктор иллюстраций. Отрисовали множество персонажей, предметов, вариантов фона. Всего в конструкторе 150 элементов.

Вот несколько персонажей из конструктора в различных позах:

К конструктору написали Гайд с правилами использования. Теперь сотрудники веб-сервиса генерируют иллюстрации под задачи платформы самостоятельно, не нарушая фирменный стиль.

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

Без конструктора владельцы платформы тратили бы в разы больше денег на профессионального иллюстратора. А если иллюстраторы будут разные, возникнет еще и проблема, что разные страницы выглядят по-разному, и теряется стилистическое единство платформы в восприятии пользователей.