Пошаговый мануал по созданию конструктора иллюстраций в Figma
Как сделать и автоматизировать конструктор, чтобы без дизайнера генерировать несчетное количество персонажей и готовых иллюстраций в едином стиле. Особенно актуально для многофункциональных веб-сервисов или IT-компаний с целой экосистемой продуктов.
Расскажу на примере одного из персонажей для конструктора иллюстраций «Атвинты», как сделать его автоматизированным в Figma. То есть пользователь в несколько кликов сможет выбрать персонажа и настроить его внешний вид, начиная одеждой и заканчивая положением бровей.
В конце статьи приведу практический кейс, как конструктор иллюстраций решает задачи серьезной IT-платформы.
Нужен ли вам конструктор иллюстраций
Создание такой штуки требует денежных затрат от заказчика, и затрат времени — от дизайнера. Поэтому нужно четко осознавать, оправдано ли это решение.
Конструктор иллюстраций актуален в таких ситуациях:
- Точное количество иллюстраций не известно или исчисляется сотнями.
- Иллюстрации должны иметь много одинаковых или схожих элементов, которые могут повторяться.
- Иллюстрации будут постоянно пополняться.
- Проект будет передан другому дизайнеру или вести его будет не дизайнер. И нужно избежать потерь в стилистике.
- Нужно создавать иллюстрации быстро.
Самый простой и дешевый способ сделать набор иллюстраций — приобрести готовый пак или воспользоваться сайтом-конструктором.
Вот несколько хороших сайтов.
- VECTOR CREATOR — сайт-конструктор иллюстраций
- Open Peeps — конструктор персонажей
- Stubborn Generator — конструктор персонажей
- Smash Illustrations — конструктор иллюстраций
Минус готовых решений: похожие иллюстрации будут у других компаний, а значит, выделиться и отстроиться за счет них не выйдет.
Если нужно по-настоящему уникальное решение, лучше сделать пак иллюстраций самостоятельно.
Пошаговая разработка конструктора
Рассказываю на примере одного из персонажей конструктора для Атвинты.
Сначала определяемся со стилистикой и отрисовываем первого персонажа. Как работала над стилистикой, рассказывала в предыдущей статье на VC.ru.
После отрисовки выбираем, какие детали мы хотим сделать изменяющимися, и приступаем к разработке конструктора. Для примера рассмотрим глаза и волосы.
Шаг 1. Выбираем изменяемый элемент и превращаем его в «Компонент»
Выделяем элементы и объединяем их в компонент, нажав на кнопку, выделенную на первом скриншоте. Например, будем работать с глазами персонажа.
Задаем имя компонента на русском, английском или так, как будет понятно пользователям. Я назвала компонент с глазами «Светлые».
Компоненты нужно разместить и назвать определенным образом, чтобы все правильно работало.
Для этого создаем рядом с персонажем фрейм и называем по имени компонента: «Глаза».
Затем нам нужно продублировать компонент с глазами и оставить в исходной иллюстрации дочерний компонент — ту копию, которую вы только что создали. А главный компонент, с которого делали копию, переносим в новый фрейм «Глаза».
Шаг 2. Добавляем варианты элементов
Отрисуем еще парочку вариантов глаз. Самый простой вариант — скопировать наши светлые глаза и добавить заливку зрачкам.
Для этого создаем копию компонента на фрейме «Глаза». Это удобно сделать, выделив нужный нам компонент и перетащив его мышью выше или ниже с зажатым при этом Shift и Alt. После этого делаем копию некомпонентом, кликнув по нему правой кнопкой мыши и выбрав «Detach Instance» из меню.
Добавляем зрачкам цвет и преобразуем группу обратно в компонент с названием «Темные». Новая разновидность элемента готова!
Давайте не будем останавливаться на этом и создадим еще и закрытые глаза. Повторяем алгоритм: копируем любой компонент, делаем его некомпонентом, редактируем. Для закрытых глаз удаляем все содержимое и рисуем пару дугообразных линий. Снова делаем группу компонентом и называем «Закрытые».
Проследите, чтобы размер компонента не изменился и совпадал с теми первыми глазами, что мы оставили на своей иллюстрации.
Обратите внимание на два момента:
- Редактирование нужно начинать всегда на копиях главного компонента, чтобы случайно не избавиться от какого-нибудь из главных.
- Все новые компоненты должны находиться во фрейме «Глаза» и быть главными, а не дочерними. Понять это можно по иконке возле компонента слева: у главного компонента это 4 ромбика.
Возвращаемся к иллюстрации. Если все компоненты настроены правильно, сможете изменять элемент с глазами в пару кликов на те варианты, которые добавили во фрейм.
Делать это можно в панели справа. Любой новый компонент, который вы в будущем добавите подобным образом, появится в вариантах элементов при настройке компонента глаз.
Шаг 3. Следим, чтобы элементы не перекрывали друг друга
Как правило, компоненты по размеру совпадают с их содержимым. И важно отследить, чтобы элементы конструктора не слишком пересекались друг с другом, иначе пользователю будет сложно кликнуть на нужную область.
Но бывают исключения. Например, компонент «Волосы» в моем примере находится на верхнем слое и перекрывает остальные элементы на лице персонажа.
Выход «в лоб» — создать более компактную прическу. Но тогда придется жертвовать разнообразием: например, уже не получится создать варианты с длинными волосами.
Эту проблему можно обойти снятием галочки «Сlip content» в панели справа.
Теперь можно делать новые варианты причесок.
Помните, каждый новый фрагмент должен совпадать по расположению с предыдущими. Лично мне удобнее рисовать новые элементы прямо на месте их будущего расположения, заимствуя размеры фрейма у уже имеющегося элемента.
Шаг 4. Добавляем варианты для других элементов
Насколько детальной будет иллюстрация, зависит только от текущей задачи и вашей фантазии.
Для каждого нового изменяемого элемента создаем отдельный фрейм, отрисовываем и настраиваем варианты. После чего пользователь сможет самостоятельно создать персонажа. если бы каждого персонажа отрисовывал вручную дизайнер, это занимало бы от получаса до нескольких часов. А так пользователь создаст нужный образ за 5 минут. Если не залипнет в подборе причесок, нарядов, выражений лица.
Суммируем инструкцию
Главное понять принцип создания, расположения и добавления компонентов, а также не нарушать правила их размещения.
Важные принципы:
- На иллюстрации размещаем дочерний элемент, а все главные храним в предназначенном для них фрейме.
- Размер для компонентов определенного элемента задается заранее. Все последующие компоненты должны совпадать по размеру с исходным.
- Названия фреймов и компонентов подбираем так, чтобы пользователь легко ориентировался в конструкторе. Не забывайте следить за этим.
- Нужно контролировать расположение линий внутри элемента и следить, чтобы они совпадали с остальными элементами иллюстрации. Например, чтобы линии элемента руки не залезали на элемент футболки и т.п.
Теперь вы можете самостоятельно создать конструктор иллюстраций в Figma.
Мини-кейс: конструктор иллюстраций для интерфейсов IT-платформы
Представьте, что у вас веб-сервис на несколько миллионов пользователей из коммерческих организаций и госструктур. Сервис нужен для автоматизации ряда процедур, прописанных в законодательстве.
Для такого сервиса мы разрабатывали интерфейсы всех разделов.
Масштабный веб-сервис не обходится без онбординга, кучи документации, разъясняющих материалов, инструкций, чтобы пользователи правильно заполняли данные в сервисе в соответствии с законодательством.
И в процессе проектирования интерфейсов столкнулись с задачами:
- Все мануалы на платформе нужно иллюстрировать. Тогда пользователям будет удобнее разобраться, как работать с сервисом.
- Количество документации растет от месяца к месяцу: что-то нужно обновить, потому что изменилось законодательство, что-то нужно дописать, потому что появились новые фичи. И везде нужны поясняющие иллюстрации.
- Иллюстрации будут делать штатные сотрудники, а не компетентные дизайнеры. Причем важно сохранить единую стилистику и генерировать изображения быстро.
Решили создать для платформы кроме классической дизайн-системы еще и конструктор иллюстраций. Отрисовали множество персонажей, предметов, вариантов фона. Всего в конструкторе 150 элементов.
Вот несколько персонажей из конструктора в различных позах:
К конструктору написали Гайд с правилами использования. Теперь сотрудники веб-сервиса генерируют иллюстрации под задачи платформы самостоятельно, не нарушая фирменный стиль.
Количество иллюстраций исчисляется сотнями и в перспективе будет расширяться практически неограниченно. При этом сюжеты получаются разными, хотя присутствуют те же персонажи и объекты.
Без конструктора владельцы платформы тратили бы в разы больше денег на профессионального иллюстратора. А если иллюстраторы будут разные, возникнет еще и проблема, что разные страницы выглядят по-разному, и теряется стилистическое единство платформы в восприятии пользователей.
Комментарий недоступен
Класс! Большое спасибо, отправила своим дизайнерам!
Спасибо взаимное, рады, что полезно :)
Хотел прочитать, но споткнулся на фразе «чтобы без дизайнера генерировать несчетное количество персонажей и готовых иллюстраций в едином стиле». Заход неудачный
Почему народ всегда думает, что можно классно отработать профильную вещь без профильного спеца? Точнее не так: отработать-то можно, но единично, а если настраиваемся на то, что должно быть качественно и работать на долгий срок, то будьте добры, привлекайте к этому нормальных специалистов, головняка будет меньше. Врачом стать самому себе, следуя советам Геннадия Малахова, тоже можно, но надо ли?
Зря вы дальше первого предложения не прочитали :) Наш дизайнер рассказала, в каких ситуациях конструктор уместен и классно решает задачу. Если совсем упрощать до вашего примера с врачом, то эта ситуация уровня "Ставить самому себе горчичники, прописанные врачом". :)
серьезно? для простой презентации, которую надо разбавить графикой на конференции надо нанимать профессионального дизайнера? Вам походу обидно, что ваш хлеб едят :)
Возможно однообразные статичные иллюстрации могут иметь смысл и быть экономически оправданы, как и бессмысленные пустые тексты для СЕО или однотипные бюрократические речевые обороты.
Ага, если не читать статью и сразу начинать отвечать на комментарии.
Впервые вижу такой подход к созданию конструкторов, но это крайне интересно и креативно. С помощью нативных инструментов создать что-то абсолютно новое — это много стоит.
🔥
Спасибо :)
Перешел на ваш сайт и просто вау! У вас очень крутое агенство
Серьезно, ваши кейсы просто огонь. Читал про IoT мед инкубатор и это просто нереально. И сайт родов ну просто крутецкий. Денег своих 100% стоит
Однако верстка на mobile имеет парочку неровностей
Спасибо, приятно :) С версткой разберемся :)
Так-то быстрее пройдет мода на всех этих человечков. И так уже достало донельзя.
мода циклична :)
Через 20 лет будет совсем другая технология всего.
Комментарий недоступен
Спасибо :) Реально удобная штука получается
Спасибо за информацию