Как создать 200+ уникальных персонажей в Figma

Мы в REB8T делаем цифровые продукты, геймифицируем сервисы и превращаем обучение в увлекательные симуляции. Делимся кейсами с метриками, процессами и визуалом, а ещё практическими гайдами — от ChatGPT-анимации и mini app до Tilda/Shopify. Здесь только то, что можно применить завтра — честно, по делу и с любовью к деталям.

figmaгенераторперсонажи

На связи Слава Дьячков (ведущий дизайнер):

Дано: Разработка игры с историями от лица 248 разных персонажей.

Задача: Создать портреты этих 248 человек, быть готовыми к их изменению, запустить проект вовремя и не раздуть бюджет 🙂

В 2021 году был бум nft, тогда дропались большие коллекции объектов сгенерированных автоматически по заранее созданным правилам. Для этого изображение разбивалось на слои (лицо, прическа, убор, одежда) и потом генератором собирались рандомные состояния на тысячи уникальных объектов.

Мы сделали подобный генератор внутри Figma и рассказываем как:

  • ➡️ Рассчитываем кол-во слоев. У нас вышло 9 причесок, 6 портретов, 9 одёжек, и аксессуары, которые можно использовать опционально: 4 шляпы, 2 вида бороды, украшения 7 штук. Рисуем их и согласовываем на примере 2-3 персонажей.
  • ➡️ Создаем компоненты с элементами из которых будет состоять наш персонаж: силуэт, головной убор, прическа, одежда, аксессуары и тд.
  • ➡️ Собираем из всех этих компонентов главный компонент, назовем его, например, «Person».
  • ➡️ В компоненте Person назначаем булевые значения на те элементы, которые являются не обязательными.
  • ➡️ Ставим настройку Nested instance и ставим галочки напротив всех используемых компонентов.

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

#creativecorner #process #figma #uxui

Скриншот в Figma: миниатюрный аватар‑персонаж в рамке на тёмном фоне, интерфейс выделяет объект для генерации и редактирования.
Миниатюрный аватар в рабочей области Figma — выбранный компонент Person.
Сетка вариантов элементов в тёмной теме: ряды с бородами, причёсками, шляпами, портретами и одеждой для генератора персонажей.
Набор слоёв и вариантов: бороды, причёски, шляпы, портреты и одежда.
Панель компонентов Figma слева и область превью справа: компонент «Person» выбран, отображается итоговый портрет на зелёном фоне с рамкой трансформации.
Компонент «Person» и его превью в макете.
Диалог создания свойства компонента в Figma: поле Name заполнено «Show hat», значение установлено False и кнопка Create property на тёмном фоне интерфейса.
Создание булевого свойства компонента («Show hat» = False).
Панель свойств компонента в Figma с выделенной опцией Nested instances, видна миниатюра компонента Person и список доступных свойств.
Опция Nested instances в панели свойств для управления вложенными компонентами.

Читайте так же