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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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