Задачи:
- Расширить возможности редактора: перейти от плоского списка к неограниченной вложенности;
- Ввести новый элемент «Контейнер» (аналог Frame из Figma) с собственными свойствами;
- Пересобрать UI/UX панели слоёв: сделать её компактнее, понятнее и ближе к профессиональным инструментам.
Краткий итог: перешли от «группировки в один уровень» к полноценной иерархии слоёв, добавили «Контейнер» (аналог Frame) и обновили список слоёв в сайдбаре. В результате редактор стал пригоден для профессиональной аудитории: проще собирать сложные структуры, быстрее ориентироваться в дереве и делать по‑настоящему кастомные макеты.
Контекст
Craftum — конструктор сайтов с визуальным редактором, в котором пользователи собирают страницы из блоков и элементов: настраивают стили, сетки, позиционирование, анимации и публикуют готовые сайты.
Со временем в продукт пришла новая аудитория, которую можно охарактеризовать как «профи»: фрилансеры, дизайнеры, маркетологи. Чтобы привлечь и удержать таких пользователей, редактору нужно было дать больше свободы: возможность работать не только ограниченным набором готовых блоков, но и собирать креативные, полностью кастомные структуры.
На тот момент в редакторе была «панель слоёв», но по сути она являлась плоским списком. Вложенности не существовало: можно было только объединить элементы в группу, но сама группа не имела собственных свойств (кроме совместного позиционирования и вращения) и не решала главную проблему — навигацию и управление сложными структурами.
Ограничения проявлялись сразу, как только пользователь пытался собрать что-то чуть сложнее лендинга из пары блоков: появлялись десятки слоёв, в которых трудно ориентироваться, сложно быстро найти нужный элемент, а некоторые сценарии (например, оборачивание части контента в «секцию» с фоном/отступами) требовали костылей.
Целью редизайна было приблизить редактор к привычным для дизайнеров и мейкеров подходам (Figma, Framer, Webflow и т. п.): дать неограниченную вложенность, ввести контейнеризацию как базовый паттерн и привести панель слоёв в вид, подходящий для ежедневной работы с большими деревьями.
Процесс
Я начал с двух направлений: с одной стороны — сбор проблем и типовых сценариев пользователей (где именно «ломается» работа с плоским списком), с другой — изучение решений в инструментах, где панели слоёв и иерархия доведены до абсолюта: Figma, Framer, Webflow и других.
После ресёрча я зафиксировал базовые требования к новой модели:
- Иерархия должна быть неограниченной (вложенность внутри вложенности, без «потолка»).
- Должен появиться отдельный структурный элемент, который живёт не как «условная группа», а как полноценный объект со свойствами.
- Панель слоёв должна поддерживать ежедневные сценарии: быстрое перемещение, сворачивание веток, понятную индикацию структуры и состояний.
Новый элемент: «Контейнер»
Ключевым решением стал новый элемент «Контейнер» — аналог Frame в Figma. Он решал сразу две проблемы: давал предсказуемую структуру и открывал путь к собственным параметрам, которых у «группы» не было.
У контейнера появились собственные свойства: паддинги, фон, бордер, радиусы и другие параметры оформления (по сути, привычный для пользователей Figma набор). Это позволило легко собирать «секции» и карточки, делать сложную вложенность и не плодить технические слои ради подложек и отступов.
В дальнейшем контейнеры открыли нам путь к следующему шагу: внедрению раскладки на основе CSS‑flexbox (аналог Auto Layout в Figma) и относительных размеров/отступов (проценты, em, rem и т. п.). До этого пользователи оперировали почти исключительно абсолютными значениями в px и вручную выставляли позиции/размеры на каждом брейкпоинте.
Неограниченная вложенность
Дальше я пересобрал правила вложенности и операции над деревом:
- «вложить» элемент в контейнер или другой слой;
- «вынести» на уровень выше;
- перемещать ветку целиком;
- сохранять ожидаемое поведение выделения (когда кликаешь по элементу на холсте и видишь его место в дереве).
Важной частью стала аккуратная миграция от старой логики групп: на первом этапе группы сохранили только для уже существующих сайтов/макетов, чтобы ничего не сломать. Позже мы провели миграцию и превратили группы в контейнеры, расширив их возможности.
Редизайн панели слоёв
Параллельно с новой моделью я обновил интерфейс списка слоёв в сайдбаре: сделал его компактнее и «профессиональнее» для работы с большими деревьями. Здесь я ориентировался на баланс между плотностью информации и читаемостью: чтобы дерево быстро сканировалось взглядом и не разъезжалось по вертикали.
Реализацию разделили на два этапа: сначала редизайн панели слоёв, затем добавление нового элемента «Контейнер» и логики дерева. Вся разработка заняла три недели работы одного сеньор‑фронтендера. Мы держали плотную связь, регулярно созванивались, синхронизировали поведение и сверяли детали на реальных сценариях.
Результат
Редактор получил полноценную иерархию слоёв и новый базовый строительный блок — «Контейнер». Пользователи смогли собирать сложные структуры без обходных решений: появилась предсказуемая вложенность, стало проще оборачивать контент в секции/карточки и управлять группами элементов через свойства контейнера.
Панель слоёв стала компактнее и удобнее в повседневной работе: в ней легче ориентироваться, быстрее находить нужные элементы и контролировать структуру страницы.
По отзывам профессиональной аудитории скорость создания «сложных/креативных» макетов выросла в 2–5 раз, а конструктор заметно реже стали называть «слишком примитивным».