Humaaans — это бесплатная онлайн-библиотека для сборки векторных иллюстраций людей по принципу конструктора. Сервис создан дизайнером Джорди ван ден Ниувендейк и распространяется под лицензией MIT, что позволяет использовать полученные материалы в коммерческих проектах без обязательного указания авторства. В каталоге представлено более 800 модульных элементов: головы, туловища, руки, ноги, прически, элементы одежды и аксессуары, которые сочетаются в миллионы уникальных комбинаций.
Что такое Humaaans и как это работает
Платформа представляет собой веб-редактор, где пользователь собирает персонажа из отдельных слоёв. Каждый элемент — независимый векторный объект, который можно перекрасить, повернуть, масштабировать или заменить на другой вариант из библиотечного набора. Интерфейс разделен на панель выбора частей тела, холст для сборки и панель свойств выбранного элемента. Работа не требует регистрации: достаточно открыть humaaans.com в браузере и начать сборку. Готовые иллюстрации экспортируются в PNG (растровый формат для быстрой вставки) и SVG (векторный формат для бесшовного масштабирования и дальнейшего редактирования в графических редакторах).
Основные возможности редактора
- Модульная система: более 800 элементов, разделенных на категории — головы, туловища, конечности, одежда, аксессуары и позы.
- Цветовая настройка: каждый слой окрашивается индивидуально; поддерживается выбор по HEX, RGB, HSL или использование пипетки для точного попадания в палитру бренда.
- Позы и жесты: предустановленные комбинации положений рук, ног и корпуса для типичных сценариев (работа за ноутбуком, разговор, презентация, отдых).
- Разнообразие внешности: наборы тонов кожи, форм глаз, причесок, бород, очков и головных уборов для создания инклюзивных команд.
- Готовые сцены: библиотека композиций из нескольких персонажей для быстрого старта: командная встреча, онбординг, поддержка клиентов или мозговой штурм.
- История изменений: локальный стек отмены/повтора в рамках текущей сессии браузера.
Пошаговый старт: от открытия сайта до вставки в макет
- Перейдите на humaaans.com. Регистрация не требуется.
- В левой панели выберите категорию (например, «Heads») и кликните по понравившемуся варианту — он появится на холсте.
- Добавьте туловище, руки, ноги и одежду аналогичным образом. Элементы автоматически выстраиваются в правильном порядке слоёв.
- Кликните по любой части на холсте — в правой панели откроются её свойства: цвет, поворот, масштаб, зеркалирование или замена на другой ассет.
- Используйте пресеты позы (кнкнопка «Poses») для быстрой смены жеста всего персонажа.
- При необходимости добавьте второго персонажа кнопкой "+" над холстом — это позволяет создавать многопользовательские сцены.
- Нажмите «Export» в верхнем меню. Выберите формат: PNG (с выбором множителя разрешения) или SVG.
- Перетащите файл в Figma, Sketch, Illustrator, Canva, PowerPoint, Notion, Webflow или любой другой инструмент, принимающий вектор или растр.
Лицензия MIT: что можно и чего нельзя
Все ассеты и собранные из них иллюстрации распространяются под лицензией MIT. Это означает:
- Полную свободу использования в личных, образовательных и коммерческих целях.
- Право модифицировать, адаптировать и комбинировать элементы с другими материалами.
- Возможность распространения готовых работ как части вашего продукта (сайта, приложения, презентации, печатной продукции или мерча).
- Отсутствие обязательства указывать авторство (хотя создатели приветствуют упоминание).
Ограничения лицензии стандартны: нельзя продавать сами ассеты как отдельный товар (стоковые паки или NFT-коллекции из необработанных элементов), использовать в незаконных целях или выдавать примитивные графические элементы за свои собственные разработки.
Интеграции с рабочими инструментами
| Инструмент | Тип интеграции | Преимущества |
|---|---|---|
| Figma | Официальный плагин (Community) | Импорт SVG прямо на фрейм, сохранение слоёв, применение локальных стилей цвета. |
| Canva | Приложение в маркетплейсе | Поиск и вставка персонажей без выхода из редактора, реколоринг под бренд-кит. |
| Adobe Illustrator / Express | Импорт.svg /.ai | Полное векторное редактирование каждого пути, работа с градиентами и масками. |
| Sketch | Drag-and-drop SVG | Сохранение в качестве символов (Symbols) для использования в дизайн-системах. |
| Webflow | Вставка SVG в Embed | Анимация через Interactions, стилизация CSS-фильтрами и адаптивность. |
| Notion, PowerPoint, Google Slides | Стандартный диалог вставки | Быстрое оформление документов, слайдов и вики-страниц. |
Для командной работы удобно опубликовать собранные персонажи как общую библиотеку (Team Library) — тогда коллеги смогут использовать утвержденные варианты без необходимости повторной сборки.
Сценарии использования по профессиям
UI/UX-дизайнеры и продуктовые команды
Создание экранов пустых состояний (empty states), онбординг-потоков, иллюстраций для чек-листов, аватарки-плейсхолдеры и микровзаимодействий. SVG-формат обеспечивает минимальный вес файлов, что критично для производительности интерфейса.
Маркетологи и SMM-специалисты
Подготовка обложек постов, сторис, баннеров для рассылок и лид-магнитов. Возможность быстрой смены цвета под кампанию ускоряет выпуск кретевов в несколько раз по сравнению с поиском на фотостоках.
Специалисты по презентациям и обучению
Оформление слайдов для спикеров, обучающих модулей и инфографики. Формат PNG высокого разрешения обеспечивает четкость на проекторах, а SVG позволяет менять цвета под тему слайдов без потери качества.
Веб-разработчики и no-code-специалисты
Встраивание SVG в HTML как inline-код дает контроль через CSS (изменение цвета при наведении или в тёмной теме). Это эффективно работает в Webflow, Framer, Tilda и WordPress.
Бренд-дизайнеры и арт-директора
Создание маскотов, паттернов и систем иконографики. Единый стиль линий и углов гарантирует визуальную согласованность всех материалов бренда.
Преимущества и ограничения: честный баланс
Сильные стороны
- Нулевая стоимость и открытая лицензия без скрытых платежей.
- Работа в браузере без установки ПО; кроссплатформенность.
- Минималистичный, но выразительный стиль, подходящий для современных цифровых продуктов.
- Глубина кастомизации: цвет, поза, пропорции и аксессуары полностью редактируются.
- Легкие файлы: типичный SVG одного персонажа весит всего несколько килобайт.
Ограничения, о которых стоит знать
- Фиксированный стиль: тонкая линия и плоские цвета. Для фотореализма сервис не предназначен.
- Отсутствие встроенной анимации: для создания движения нужно экспортировать слои отдельно и анимировать в сторонних программах.
- Зависимость от интернета: офлайн-версии не существует.
- Ограниченный набор поз: сложные взаимодействия (например, рукопожатие) требуют ручной сборки.
Сравнение с популярными альтернативами
| Сервис | Лицензия | Редактирование | Стиль | Экспорт | Цена |
|---|---|---|---|---|---|
| Humaaans | MIT (коммерческая бесплатно) | Да, конструктор | Минимализм | PNG, SVG | Бесплатно |
| Blush.design | Своя (Pro для коммерции) | Да, коллекции авторов | Разнообразный | PNG, SVG | Freemium |
| Open Peeps | CC0 (Public Domain) | Через Figma | Ручной набросок | PNG, SVG | Бесплатно |
| Undraw | MIT | Нет (только цвет) | Плоский | PNG, SVG | Бесплатно |
Humaaans выигрывает сочетанием полной свободы лицензии, возможности глубокой кастомизации в браузере и нулевой цены. В то время как другие сервисы часто требуют подписки для коммерческого использования или предлагают только готовые сцены без возможности сборки.
Практические советы и лучшие паттерны
Создайте дизайн-токены для цветов бренда
В Figma определите Color Styles (Primary, Secondary, Skin-tone). При импорте SVG примените их к свойствам fill — это позволит одной кнопкой менять тему всего набора иллюстраций.
Собирайте персонажей как компоненты с вариантами
В Figma создайте компонент «Avatar/Person» с вариантами (Variants) по свойствам: Pose, Outfit и SkinTone. Это позволит вашей дизайн-системе мгновенно выдавать нужный образ.
Оптимизируйте SVG перед продакшеном
Пропустите экспортированный файл через SVGO. Удаление метаданных и округление координат сокращает размер файла на 30–50% без потери визуального качества.
Используйте currentColor для монохромных иконок
Если нужен силуэт персонажа в цвете текста, замените `fill="#..."` на `fill=«currentColor»` в коде SVG. Это позволит цвету наследоваться от CSS-свойства `color` родителя.
Частые вопросы
Нужно ли платить за коммерческое использование?
Нет. Лицензия MIT разрешает любое коммерческое использование бесплатно.
Могу ли я продавать мерч с персонажами Humaaans?
Да, если персонажи являются частью вашего дизайна (футболка, кружка, упаковка). Нельзя продавать сами наборы SVG как отдельный товар.
Как обновить библиотеку элементов?
Веб-версия всегда актуальна. Плагин для Figma необходимо обновлять через Community.
Заключение
Humaaans остается уникальным инструментом на пересечении открытой лицензии и функционального браузерного конструктора. Он закрывает задачи продуктовых команд, маркетологов и дизайнеров, позволяя быстро получить согласованный по стилю набор иллюстраций под брендбук. При правильном подходе (использование компонентов и оптимизация SVG) Humaaans становится полноценным модулем визуального языка вашего продукта.
Информация обновлена — 19.07.2026.
