beta
Москва
Кемерово

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

сложность:  

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

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

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

Нужен ли вам конструктор иллюстраций

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

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

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

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

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

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

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

Пошаговая разработка конструктора

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

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

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

Шаг 1. Выбираем изменяемый элемент и превращаем его в «Компонент»

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

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

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

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

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

Шаг 2. Добавляем варианты элементов 

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

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

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

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

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

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

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

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

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

Шаг 3. Следим, чтобы элементы не  перекрывали друг друга

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

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

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

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

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

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

Шаг 4. Добавляем варианты для других элементов

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

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

Суммируем инструкцию

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

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

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

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

Мини-кейс: конструктор иллюстраций для интерфейсов IT-платформы

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

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

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

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

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

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

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

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

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

Оцените пост:
3
Не очень
Комментарии:0
×