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

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

В закладки
Слушать
Алёна Юрьева
UI/UX-дизайнер digital-агентства «Атвинта»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ "author_name": "Digital-агентство Атвинта", "author_type": "self", "tags": [], "comments": 20, "likes": 129, "favorites": 528, "is_advertisement": false, "subsite_label": "design", "id": 157193, "is_wide": false, "is_ugc": true, "date": "Thu, 10 Sep 2020 12:08:04 +0300", "is_special": false }
Маркетинг
Турбо-страницы «Яндекс.Директа»: отличный инструмент для тестирования ниши и не только
Показываю реальные примеры применения турбостраниц. В том числе конкретные цифры. Рассказываю о плюсах и минусах…
Объявление на vc.ru
0
20 комментариев
Популярные
По порядку
Написать комментарий...
6

🔥

Ответить
5

Класс! Большое спасибо, отправила своим дизайнерам!

Ответить
0

Спасибо взаимное, рады, что полезно  :)

Ответить
1

Хотел прочитать, но споткнулся на фразе «чтобы без дизайнера генерировать несчетное количество персонажей и готовых иллюстраций в едином стиле». Заход неудачный
Почему народ всегда думает, что можно классно отработать профильную вещь без профильного спеца? Точнее не так: отработать-то можно, но единично, а если настраиваемся на то, что должно быть качественно и работать на долгий срок, то будьте добры, привлекайте к этому нормальных специалистов, головняка будет меньше. Врачом стать самому себе, следуя советам Геннадия Малахова, тоже можно, но надо ли?

Ответить
2

Зря вы дальше первого предложения не прочитали :) Наш дизайнер рассказала, в каких ситуациях конструктор уместен и классно решает задачу. Если совсем упрощать до вашего примера с  врачом, то эта ситуация уровня "Ставить самому себе горчичники, прописанные врачом". :)

Ответить
1

серьезно? для простой презентации, которую надо разбавить графикой на конференции надо нанимать профессионального дизайнера? Вам походу обидно, что ваш хлеб едят :)

Ответить
0

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

Ответить
2

Ага, если не читать статью и сразу начинать отвечать на комментарии.

Ответить
1

Впервые вижу такой подход к созданию конструкторов, но это крайне интересно и креативно. С помощью нативных инструментов создать что-то абсолютно новое — это много стоит.
🔥

Ответить
1

Перешел на ваш сайт и просто вау! У вас очень крутое агенство

Ответить
1

Серьезно, ваши кейсы просто огонь. Читал про IoT мед инкубатор и это просто нереально. И сайт родов ну просто крутецкий. Денег своих 100% стоит

Ответить
1

Однако верстка на mobile имеет парочку неровностей

Ответить
0

Спасибо, приятно :) С версткой разберемся :)

Ответить
1

Так-то быстрее пройдет мода на всех этих человечков. И так уже достало донельзя.

Ответить
0

мода циклична  :)

Ответить
0

Через 20 лет будет совсем другая технология всего.

Ответить
0

Очень круто! Разрабатываю свой платный конструктор, как раз думал еще о его реализации на Figma

Ответить
0

Спасибо :) Реально удобная штука получается

Ответить
0

Спасибо за информацию 

Ответить

Комментарии

null