Дизайн-системы в WordPress

Что такое дизайн-система

Дизайн-система (Design System) — набор переиспользуемых строительных блоков, правил и стандартов, обеспечивающих визуальную и функциональную консистентность продукта. В контексте WordPress дизайн-система превращается в блочную тему с theme.json, паттернами и кастомными блоками.

Состав дизайн-системы:

Design tokens — цвета, типографика, отступы, скругления
Компоненты — кнопки, формы, карточки, хедеры
Паттерны — готовые секции: hero, pricing, testimonials
Правила — когда и как использовать компоненты

Преимущества дизайн-системы

Переиспользуемость — компоненты создаются один раз и применяются на всех страницах
Консистентность — единый визуальный язык без расхождений
Скорость — новые страницы собираются из готовых блоков, а не рисуются с нуля
DRY — изменение токена обновляет все элементы автоматически
Масштабирование — несколько сайтов на одной дизайн-системе

Atomic Design в WordPress

Методология Брэда Фроста идеально ложится на блочный редактор WordPress:

Уровень	Atomic Design	WordPress
Atoms	Цвета, шрифты, отступы	`theme.json` → CSS-переменные
Molecules	Кнопка + поле = форма поиска	Блоки: Search, Buttons, Social Icons
Organisms	Хедер, футер, сайдбар	Template Parts
Templates	Шаблон страницы	`templates/single.html`, `page.html`
Pages	Конкретная страница с контентом	Страница в админке, наполненная блоками

Инструменты дизайна

Инструмент	Для чего	Связь с WordPress
Figma	Создание макетов, компонентов, токенов	Экспорт токенов в theme.json через плагины
Tokens Studio (Figma-плагин)	Управление design tokens, Git-синхронизация	Прямой экспорт в W3C DTCG-формат
Style Dictionary (Amazon)	Трансформация токенов в CSS/Sass/Android/iOS	Генерация `--wp--custom--*` переменных
Storybook	Документирование и тестирование компонентов	Визуальные регрессии блоков
Figma Make	AI-генерация кода из фреймов	HTML/CSS/React из дизайн-макетов

Практический подход: от простого к сложному

По Contentful, построение дизайн-системы идёт поэтапно:

Один primary color — минимальная палитра
Stepping system — шкалы оттенков (50-900)
Semantic tokens — именованные токены: color-accent, text-primary
Interactive states — hover, active, focus, disabled
Component tokens — button-primary-bg, card-border-radius

WordPress-специфика

Для WordPress дизайн-система реализуется через:

1. theme.json — фундамент

Глобальные настройки стилей, цветов, типографики. В кастомной секции settings.custom хранятся design tokens — единый source of truth.

2. Блоки как компоненты

Кастомные блоки (React/PHP/CSS) — это molecules и organisms дизайн-системы. block.json определяет атрибуты и настройки блока, как props в React-компоненте.

3. Паттерны — готовые секции

Group-блок с вложенной структурой, сохранённый как паттерн = готовый organism. Может быть синхронизированным (изменения применяются везде) или несинхронизированным (копия). Подробнее — в разделе Паттерны (Block Patterns).

4. Template Parts — глобальные элементы

Header, Footer, Sidebar — стабильные части всех страниц.

Построение дизайн-системы: пошагово

Определите grid spacing unit — базовый шаг отступов (4px, 8px), не меняйте его потом
Вынесите цвета в токены — не используйте raw HEX в блоках
Создайте базовые компоненты — кнопки, формы, типографика
Соберите паттерны — hero, карточки, pricing tables
Разделите по брендам — если несколько брендов, отдельные библиотеки токенов
Документируйте — Style Book в WordPress + Storybook для кастомных блоков

Когда дизайн-система оправдана

Несколько страниц с повторяющимися элементами
Команда из 2+ человек работает над дизайном
Есть несколько сайтов с общим брендом
Частота изменений дизайна высока
Нужна консистентность между платформами (web + mobile)

Материалы и источники

WebDevStudios: Building Design Systems for WordPress
WordPress VIP: Design System with Block Editor — Theme.json
DDpa: Design as Code — Design Tokens и архитектура
Contentful: Design Tokens Explained
Atomic Design by Brad Frost
Impeccable: AI-дизайн для WordPress — AI-навык с /impeccable extract и /impeccable polish для работы с дизайн-системами.