✨ Саммари кейса
Задача
Команде нужны были 3D-иллюстрации для баннеров и лендингов. Бюджета на иллюстратора не было — делали MVP.
Проблема
Дизайнеры брали картинки со стоков. Результат — визуальный хаос:
Автор собрал систему из четырёх частей:
1. Готовая сцена в Blender
Как перенести вектор в объём, добавить модель, экспортировать в Figma.
Как работает
Дизайнер открывает Blender-файл, находит модель через поиск, размещает перед камерой, жмёт рендер — готово. Или создаёт новую модель из вектора в Figma, переносит в Blender, задаёт параметры — получает объём.
Результат
Продуктовый дизайнер решает не только визуальные задачи. Он видит процессы, узкие места, боль команды — и строит инфраструктуру, которая работает без него.
Команде нужны были 3D-иллюстрации для баннеров и лендингов. Бюджета на иллюстратора не было — делали MVP.
Проблема
Дизайнеры брали картинки со стоков. Результат — визуальный хаос:
- Стили не совпадали с айдентикой
- Часы на поиск, обтравку фона, цветокоррекцию
- 7 минут на одну иллюстрацию
- Команда выгорала
Автор собрал систему из четырёх частей:
1. Готовая сцена в Blender
- Настроенный свет и камера
- Библиотека материалов
- Работает одинаково на Mac и Windows
- Геометрические формы
- Объекты по категориям
- Поиск внутри программы
- Готовые иллюстрации с прозрачным фоном
- Единое именование
- Цветовые маски синхронизированы с дизайн-системой
Как перенести вектор в объём, добавить модель, экспортировать в Figma.
Как работает
Дизайнер открывает Blender-файл, находит модель через поиск, размещает перед камерой, жмёт рендер — готово. Или создаёт новую модель из вектора в Figma, переносит в Blender, задаёт параметры — получает объём.
Результат
- Время на иллюстрацию: с 7 минут до 1 минуты
- Единый стиль: металл + стекло + фирменный красный
- Консистентность на всех уровнях
- Система живёт без автора — дизайнеры продолжают учиться и создавать новое
Продуктовый дизайнер решает не только визуальные задачи. Он видит процессы, узкие места, боль команды — и строит инфраструктуру, которая работает без него.
Как я Дизайнеров 3d учил и внеДрил 3Д-Дизайн-систему сфера
Что: дизайн-система
Где: комус
Роль: продуктовый дизайнер
С чего всё началось
Мы в команде решили добавить 3D-иллюстрации в продукт. Баннеры, лендинги, акции — везде хотелось объёма и современности.
Я работал на стыке двух направлений — маркетинга и интерфейсов. Маркетинг отвечал за креативные концепции и все баннеры на сайте. Моя задача была помочь им быстро масштабировать 3D в продукте. Для этого я написал короткую инструкцию про поиск иллюстраций на стоках. Но быстро стало ясно, что этого недостаточно.
Контекст:
Я работал на стыке двух направлений — маркетинга и интерфейсов. Маркетинг отвечал за креативные концепции и все баннеры на сайте. Моя задача была помочь им быстро масштабировать 3D в продукте. Для этого я написал короткую инструкцию про поиск иллюстраций на стоках. Но быстро стало ясно, что этого недостаточно.
Контекст:
- Две команды дизайнеров.
- Много точек применения (от баннеров до продуктовых страниц).
- MVP без бюджета на иллюстратора.
Проблема
Дизайнеры брали картинки со стоков. Вроде быстро и удобно. На деле — головная боль.
Стиль не совпадал с айдентикой. Ракурсы не подходили под концепции. Стоки завалены мультяшной ерундой, которая создавала визуальный мусор. На картинку могли уходили часы: поиск, обтравка фона, цветокоррекция, подгонка под общий тон.
Со временем визуал начал разъезжаться. Дизайнеры выгорали, бизнес ворчал, пользователи видели хаос.
Можно было нанять 3D-иллюстратора. Но мы делали MVP — тратить бюджет было рано.
Больное место: много время на одну иллюстрацию — от поиска на стоке до размещения в баннере.
Стиль не совпадал с айдентикой. Ракурсы не подходили под концепции. Стоки завалены мультяшной ерундой, которая создавала визуальный мусор. На картинку могли уходили часы: поиск, обтравка фона, цветокоррекция, подгонка под общий тон.
Со временем визуал начал разъезжаться. Дизайнеры выгорали, бизнес ворчал, пользователи видели хаос.
Можно было нанять 3D-иллюстратора. Но мы делали MVP — тратить бюджет было рано.
Больное место: много время на одну иллюстрацию — от поиска на стоке до размещения в баннере.
Что я сделал
Решил собрать свою 3D-систему. Не просто папку с картинками, а рабочий инструмент.
Как устроена система
1. Готовая сцена в Blender
Выбрал Blender, потому что он бесплатный и одинаково работает на Mac и Windows. У нас не все на макбуках, а платить за Cinema 4D в контексте MVP — бессмысленно.
Создал файл-сцену, где уже всё настроено:
Выбрал Blender, потому что он бесплатный и одинаково работает на Mac и Windows. У нас не все на макбуках, а платить за Cinema 4D в контексте MVP — бессмысленно.
Создал файл-сцену, где уже всё настроено:
- Свет
- Камера
- Библиотека материалов
- Библиотека моделей
2. Библиотека моделей
Внутри Blender собрал коллекцию объектов:
Поиск работает прямо в программе. Нашёл модель, разместил перед камерой, нажал рендер — готово.
Внутри Blender собрал коллекцию объектов:
- Базовые геометрические формы.
- Реальные объекты по категориям (для канцелярии: скрепки, ручки, карандаши).
- Модели-компаньоны для композиций (крестики, круги, абстрактные формы).
Поиск работает прямо в программе. Нашёл модель, разместил перед камерой, нажал рендер — готово.
Прости за качество:(
3. Библиотека в Figma
Все готовые иллюстрации свёл в Figma по правилам дизайн-систем:
Все готовые иллюстрации свёл в Figma по правилам дизайн-систем:
- Единое именование
- Настройка через варианты
- Прозрачный фон
4. Инструкция
Написал подробный гайд: как перенести плоскую векторную графику в объём, как добавить модель в библиотеку, как экспортировать картинку в Figma. Инструкция оказалась понятна даже тем, кто никогда не открывал Blender.
Написал подробный гайд: как перенести плоскую векторную графику в объём, как добавить модель в библиотеку, как экспортировать картинку в Figma. Инструкция оказалась понятна даже тем, кто никогда не открывал Blender.
Стиль
Выбрал строгий подход: металл + стекло с акцентами на фирменный красный. Никакой мультяшности — только чистота.
Важный момент: синхронизировал материалы с токенами дизайн-системы. Цвет Dark300 из UI-кита = такой же материал в Blender. Консистентность на всех уровнях.
Важный момент: синхронизировал материалы с токенами дизайн-системы. Цвет Dark300 из UI-кита = такой же материал в Blender. Консистентность на всех уровнях.
Как это работает
Есть два сценария для дизайнеров:
Сценарий 1: Использование готовой библиотеки
Сценарий 1: Использование готовой библиотеки
- Открыл Blender-файл
- Нашёл модель через поиск
- Разместил перед камерой
- Сделал рендер
- Апрув от меня
- Экспортировал png в Figma
Сценарий 2: Создание новой модели
Система позволяет строить сложные композиции — комбинировать объекты, создавать многослойные сцены.
- Нарисовал иконку в Figma
- Мы с дизайн-директором делаем апрув
- Перенёс её в Blender
- Указал параметры: толщина, масштаб, материал
- Модель стала объёмной
- Сделал рендер
- Апрув от меня
- Экспортировал png в Figma
Система позволяет строить сложные композиции — комбинировать объекты, создавать многослойные сцены.
Слева: вектор из Figma. Справа: этот вектор превратился в 3 модели и скомбинировался в одну картинку
Вот так из плоских они становятся объёмными
Пример баннера построенный на это системе
Что получилось
Цифры
Было: 7 минут на иллюстрацию
Стало: 1 минута
Ускорение в 7 раз. Замерял среднее время от создания до размещения в баннере. Уточнение: сравнивал использование стоковых картинок с готовыми моделями из библиотеки (не рендер с нуля, а работу с существующими ассетами в Figma). Найти на стоке и создать свою 3D — разные процессы.
Со стоками время всегда плавало: где-то цветокоррекция, где-то обтравка, где-то сразу подходит. Теперь картинки выходят с прозрачным фоном, настроенными масками и правильными цветами.
Стало: 1 минута
Ускорение в 7 раз. Замерял среднее время от создания до размещения в баннере. Уточнение: сравнивал использование стоковых картинок с готовыми моделями из библиотеки (не рендер с нуля, а работу с существующими ассетами в Figma). Найти на стоке и создать свою 3D — разные процессы.
Со стоками время всегда плавало: где-то цветокоррекция, где-то обтравка, где-то сразу подходит. Теперь картинки выходят с прозрачным фоном, настроенными масками и правильными цветами.
Что изменилось
Для дизайнеров:
Для менеджеров:
Для бренда:
- Не нужно искать на стоках
- Не нужно настраивать свет и камеру
- Работа в привычной Figma
- Консистентный стиль
- Быстрое создание композиций
Для менеджеров:
- Система задаёт правила
- Предсказуемый результат
- Меньше споров про «а давайте вот так»
Для бренда:
- Единый визуальный язык
- Узнаваемость
- Профессиональный вид
- Никакого визуального мусора
Что это значило для меня
Это был опыт построения инструмента, а не просто дизайна интерфейса. Я создал систему, которая работает без меня. Хороший продуктовый дизайнер решает не только визуальные задачи. Он видит процессы, узкие места, боль команды. И строит инфраструктуру.
👌 Освоил Blender до уровня, когда могу настроить production pipeline для команды. Это расширило мой инструментарий за пределы Figma. Раньше я пользовался только 3DS Max.
Когда твоя система продолжает жить после тебя — вот это настоящий успех. Зайди на сайт, ты везде увидишь эти иллюстрации.