Зачем Tilda дизайн-система
На лендинге можно вручную настроить двадцать блоков и помнить все размеры. На сайте из 50-100 страниц такой подход быстро ломается: появляются разные отступы, версии кнопок, заголовки почти одного размера и несколько вариантов мобильного поведения.
Дизайн-система фиксирует ограниченный набор решений, из которых собирается сайт. Это ускоряет развитие и делает редизайн управляемым.
Как собрать дизайн-систему на Tilda
1. Зафиксируйте базовые токены
Минимальный набор:
- цвета фона, текста, границ и состояний;
- шрифты и веса;
- типографическая шкала;
- радиусы;
- контейнеры;
- базовые вертикальные отступы;
- скорости и принципы анимации.
Если используется кастомный CSS, эти значения удобно хранить в CSS custom properties. Тогда смена оттенка не требует поиска по десяткам блоков.
2. Определите компоненты
Кнопка, карточка, табы, аккордеон, форма, хлебные крошки, заголовочная секция, CTA - элементы, которые повторяются. Для каждого задайте варианты и состояния.
Не создавайте новый компонент, если отличие только в случайном отступе. Чем меньше система, тем легче ей следовать.
3. Отделите компонент от секции
Карточка услуги - компонент. Секция из трех карточек с заголовком - композиция. Такое разделение помогает переиспользовать элементы в разных страницах без полного копирования блока.
4. Создайте типы страниц
Для большого сайта обычно есть несколько шаблонов: услуга, кейс, статья, категория, карточка товара, город, контакты. Не нужно проектировать каждую страницу как уникальный лендинг.
Шаблон определяет обязательные зоны и данные, а конкретная запись - содержание. Это особенно хорошо сочетается с Tilda Streams и каталогом.
5. Зафиксируйте правила адаптива
Опишите не координаты каждого элемента, а поведение: четыре колонки превращаются в две и одну; меню переходит в мобильный вариант; галерея становится горизонтальной; таблица получает скролл.
Тогда новый блок можно адаптировать по системному принципу. Подробный QA есть в чек-листе адаптивного дизайна.
6. Не превращайте Zero Block в независимый мир
Zero Block дает свободу, но именно поэтому легко создать десятки почти одинаковых элементов с разными настройками. Используйте общие классы, повторяемые блоки и аккуратный кастомный CSS там, где это оправдано.
Если блок должен быть уникальным арт-дирекшеном, это нормально. Но базовая кнопка не должна заново рисоваться в каждом Zero Block.
7. Используйте штатные возможности там, где они выгоднее
Не каждый элемент нужно собирать в Zero. Формы, карточки каталога, потоки и стандартные блоки могут быть устойчивее для контента, который часто меняется. Дизайн-система должна учитывать возможности платформы, а не бороться с ними.
8. Документируйте правила рядом с проектом
Не нужен корпоративный портал на сто страниц. Достаточно рабочей страницы или Figma-файла, где есть:
- палитра;
- типографика;
- компоненты;
- отступы;
- примеры состояний;
- правила адаптива;
- что нельзя менять локально без причины.
9. Назначьте источник истины
Если цвет исправили в Tilda, но не обновили макет, через месяц старое значение вернется. Определите, где хранится актуальная система и кто имеет право менять базовые компоненты.
10. Система касается и SEO-шаблонов
Для CMS-страниц зафиксируйте H1, хлебные крошки, блок перелинковки, CTA, метаданные и структурированные данные. Это уже пересечение дизайна и контентной архитектуры.
Пример минимального набора токенов
| Группа | Что фиксировать | Пример логики |
|---|---|---|
| Цвет | Фон, основной текст, вторичный текст, акцент, состояния | Не hex по месту, а ограниченный набор ролей |
| Типографика | H1-H4, body, small, button | Размер, line-height, weight и поведение на брейкпоинтах |
| Spacing | Внутренние и внешние интервалы | Шкала, а не 27 случайных значений |
| Radius | Карточки, кнопки, формы | Несколько системных вариантов |
| Container | Максимальная ширина и поля | Единая сетка для типов страниц |
Для Tilda полезно отдельно зафиксировать, какие значения живут в настройках проекта, какие повторяются в Zero Block, а какие задаются глобальным CSS. Если один и тот же цвет существует в трех местах без правила, система уже начинает расходиться.
Компонент должен иметь контракт
Для каждого повторяемого блока опишите не только внешний вид, но и допустимые данные. Например, карточка кейса: заголовок до определенной длины, отрасль, изображение, две метрики, ссылка. Затем проверьте состояние без изображения, с длинным заголовком и на мобильном.
Так дизайн-система становится полезной редактору и разработчику. Просто страница с набором красивых компонентов в Figma не предотвращает расхождение сайта после десятого обновления.
Как менять систему без хаоса
Если появляется новый вариант кнопки или карточки, сначала решите, это новый компонент, состояние существующего или исключение для одной страницы. Только после этого добавляйте его в проект. Иначе каждая нестандартная задача превращается в отдельную сущность.
На больших Tilda-проектах marmelad.digital мы бы держали короткий журнал изменений: что поменялось, какие шаблоны затронуты и что нужно перепроверить на мобильном. Это дешевле, чем искать источник расхождения спустя полгода.
Как понять, что система распалась
Выберите 10 случайных страниц и сравните одинаковые сущности. Если CTA, заголовки, карточки и формы отличаются без функциональной причины - система требует ревизии.
Договоритесь о названиях
Компонент, который дизайнер называет service card, разработчик card2, а контент-менеджер плиткой, сложно поддерживать. Зафиксируйте короткие понятные названия основных сущностей и используйте их в Figma, Tilda и документации.
Как работать с исключениями
Премиальный сайт не обязан быть монотонным. Уникальный hero или арт-дирекшен кейса может сознательно выходить из шаблона. Главное - отличать дизайнерское исключение от случайного отклонения. Базовые поля, доступность, адаптив и типографическая логика при этом все равно остаются системными.
Изменяйте систему версиями
Если новая кнопка должна заменить старую на всем сайте, сначала обновите компонент и определите миграцию, а не добавляйте третий вариант на одной странице. Для большого проекта полезен простой changelog основных решений.
Добавьте правила для контента
Система должна отвечать не только на вопрос какого цвета кнопка. Зафиксируйте допустимую длину карточки, формат даты, правила чисел, тип обложек и поведение блока без изображения. Это защищает верстку после передачи сайта редактору.
Для CMS особенно полезны состояния пусто, длинный заголовок и отсутствующее необязательное поле.
Дизайн-система нужна не ради единообразия как самоцели
Она нужна, чтобы сайт можно было быстро менять без новых визуальных долгов. Чем больше проект, тем дороже каждая локальная импровизация.
При создании многостраничного сайта на Tilda мы бы проектировали систему одновременно с ключевыми типами страниц, а не после завершения дизайна.
