Конструктор украшений, 2026

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

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

Opportunity

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

Предположения, которые лежат в основе проекта:

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

План

Roadmap

1. Исследование предметной области
2. Проектирование редактора
3. Разработка дизайн-системы
4. Интерактивный прототип
5. Тестирование
6. Разработка веб-приложения.

Предварительная логика редактора

1. Выбор изделия
2. Выбор основы
3. Выбор длины
4. Добавление компонентов
5. Изменение порядка
6. Проверка ограничений
7. Просмотр результата
8. Сохранение конфигурации
9. Отправка клиенту

Интерактивная модель

Пользователь должен иметь возможность:

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

Дизайн-система

Планируется разработать:

• дизайн-токены
• UI Kit
• библиотеку компонентов
• состояния элементов
• правила отображения украшений
• адаптивные сценарии использования
• принципы масштабирования системы.

MVP

Первая версия продукта должна решить одну задачу: собрать украшение из компонентов и согласовать его с клиентом. В MVP войдут:

• каталог элементов
• редактор сборки
• визуализация изделия
• сохранение вариантов
• экспорт для согласования.

Валидация

После создания прототипа планируется проверить:

• насколько быстро пользователь собирает украшение
• понимает ли клиент принцип работы конструктора
• сокращается ли количество правок
• влияет ли инструмент на скорость принятия решения.

Процесс

Что уже реализовано:

• Была отрисована продуктовая библиотека компонентов (каждому элементу присвоен артикул - порядковый номер номер + тип камня)
• Подготовлен бюст для визуализации изделий
• Реализована концепция базовой цепочки и метод настройки ее длинны.

Для подготовки цифровой библиотеки компоненты были отрисованы в Adobe Illustrator, экспортированы в SVG и перенесены в Figma. Внутри Figma была построена иерархическая компонентная система: камни, оправы и декоративные элементы реализованы как вложенные компоненты. Это позволяет автоматически распространять изменения на все производные элементы — это формирует основу для дальнейшей разработки веб-приложения.

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

Цепочка в системе конструктора

Цепочка реализована как параметрическая кривая, основанная на деформации. Берётся простая геометрия — окружность или кривая, и она используется как «каркас»:

• задаётся длина (периметр / масштаб кривой)
• задаётся форма (окружность, овал, свободная кривая)
• применяются параметры натяжения и провиса
• на эту кривую “садятся” элементы (звенья, подвесы)

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

• это дает стабильную топологию (нет начала и конца)
• равномерное распределение сегментов
• лёгкое масштабирование (увеличил радиус → увеличил длину)
• предсказуемую геометрию.

Якорные точки

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

Компоненты привязываются к свободным якорным точкам, получая координаты и угол поворота автоматически. Это обеспечивает корректное расположение элементов при изменении длины цепочки, её деформации или смене типа основы. Такой подход позволяет:

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

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

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

Визуализация параметрической модели в Figma

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

При попытке воспроизвести такое поведение в Figma, столкнулся с ограничением. Абсолютное позиционирование (top/botom) не сработало: при деформации кривой её геометрия смещается, тогда точки не попадают на кривую.

Для имитации поведения параметрической модели в Figma использовал Grid Layout. Контейнер состоит из одной колонки и трёх строк:

• 1 и 3 строки содержат якорные точки. Размеры строк задаются в процентах относительно общей высоты контейнера)
• 2 строка занимает всё оставшееся пространство и выступает в качестве деформируемой области.

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

Продолжение следует ...