21 подписчик
Модульная вёрстка — это стратегический подход к созданию интерфейсов. Он позволяет собирать страницы из готовых блоков.
Это критически важно в проектах, где регулярно появляются новые разделы, типовые элементы и повторяющиеся паттерны. Но чтобы это работало, нужно изначально правильно подготовить дизайн-макеты.
В проекте кинофестеваля мы начали с создания страниц, позже вынесли устоявшиеся компоненты в дизайн-систему.
Дизайнер обязан не просто рисовать страницы, а проектировать и поддерживать систему компонентов. В каждом макете выделяются повторяющиеся элементы — карточки, кнопки, заголовки, формы в общий UI Kit. Это независимые модули с чёткими отступами, поведением и состояниями. Это основа для компонентной системы проекта и дальнейшего кода.
На этапе вёрстки мы изолировали каждый модуль: никакой жёсткой привязки к странице, только входные параметры и слоты. Компоненты гибкие, конфигурируемые и легко переиспользуемые. Все компоненты вынесли в Figma, чтобы вся команда — разработчики, контентщики и менеджеры — знали, что уже реализовано и как этим пользоваться.
Следующий поинт — интеграция с админ-панелью. Контент-менеджеры не обращаются к разработчику для каждой правки контента. Вместо этого страницы собираются из модулей прямо в админке: менять порядок блоков, заголовки, описания, включать и выключать элементы. Для этого у каждого модуля прописываются поля, которые напрямую передаются как props. Так бизнес сам управляет страницами и создает новые, не трогая код.
Чтобы это работало в долгую, нужно одно правило: никаких дубликатов. Каждый новый экран собирается из существующих компонентов. Если чего-то не хватает — создаётся новый модуль, добавляется в библиотеку и документируется. Это позволяет избежать мутации компонентов и хаоса.
Модульный подход — это не про “красоту интерфейса”. Это про эффективность, масштабируемость и контроль продукта. Он позволяет быстро запускать новые страницы, тестировать идеи, экономить ресурсы и масштабировать продукт без перегрузки команды.
Сейчас процесс позволяет быстро собрать новую страницу на дизайне, утвердить и собрать через админку минуя этап верстки.
Удобно, не так ли?
1 минута
9 декабря 2025