Дизайн система CMS WordPress

WordPress — это не только CMS, а экосистема с десятками команд и тысячами контрибьюторов. Чтобы интерфейсы не расползались, а опыт оставался последовательным, доступным и понятным, в WordPress усиливают и консолидируют дизайн-систему: компоненты, токены, правила и документацию в единый reference-сайт.

Что это?

Дизайн-система WordPress — это инициатива, которая собирает в один “источник истины” существующие инструменты и артефакты (кодовые компоненты, Figma-библиотеку, Storybook-документацию) и оформляет их как единый дизайн-язык для WordPress.org и WordPress UI/UX в части консоли, редактора и админки.

Цель сформулирована предельно практично: объединить @wordpress/components, новую Figma library и Storybook в unified design system reference site, которым может пользоваться любой контрибьютор, чтобы:

• вносить вклад в WordPress,
• расширять WordPress,
• делать это в рамках общего языка дизайна,
• получать последовательный, доступный и понятный опыт

---

Зачем это нужно (чтобы что?)

В WordPress “кусочки” дизайн-системы существуют давно, но многие части требуют усиления и приведения к системе:

• не хватает поддержки, структуры и стратегии,
• многие паттерны ещё не определены,
• Figma-библиотеку нужно обновлять и лучше организовать,
• компоненты в коде требуют инвентаризации и аудита: что уже есть, чего не хватает,
• существующим компонентам нужна большая расширяемость, новые возможности и модульность.

Отдельно важная проблема: сейчас есть несколько источников правды для дизайна и дев-гайдов. Цель — получить единый централизованный source of truth и общий язык того, как проектировать, разрабатывать и собирать WordPress-опыт.

---

Составляющие дизайн-системы WordPress

WordPress Design System Figma Library — дизайн-компоненты и стили

Новая библиотека в Figma ориентирована на скорость и согласованность.

Ключевые особенности:

• Streamline Your Workflow: меньше времени на рутину, больше на сборку макетов и прототипов.
• Reflect shipping code: компоненты и стили максимально соответствуют кодовой базе. Если есть в библиотеке, это предполагается применимым в коде.
• Customize with Ease: активное использование Figma properties и variants.
• Extensive component range: кнопки, формы, иконки, меню и другое.
• Style tokens: радиусы, elevation, цвет, типографика.
• Handy stickers: готовые “стикеры” как для отдельных компонентов, так и для крупных UI (например, full screen editor).
• Regular updates: план обновлять библиотеку с релизами Gutenberg, а начиная с 6.8 — и с мажорными релизами WordPress.
• Easy integration: можно просто дублировать файл в свою организацию и публиковать как библиотеку.

Пример того, как библиотека помогает собирать UI:

Пример “стикеров” и реальных UI-заготовок (block editor):

Storybook — каталог + документация + best practices

Хороший пример возможностей Storybook: The Audi Design System

Компоненты в коде

Сценарии использования: где дизайн-система реально помогает

Ниже — сценарии, которые напрямую следуют из текущего направления (Figma + компоненты + Storybook + доступность + Admin Design/Phase 3).

Автор плагина делает “нативный” UI в админке

Инициатива особенно важна в контексте Phase 3 и Admin Design, цель которых — упростить авторам плагинов создание понятных и удобных интерфейсов.

Как это выглядит на практике:

• в дизайне используете компоненты и стили из Figma-библиотеки,
• в разработке опираетесь на @wordpress/components,
• поведение компонентов и best practices сверяете по Storybook.

Результат: меньше “самопальных” паттернов, больше совместимости и предсказуемости.

Дизайнер быстро собирает прототипы и мокапы

Новая библиотека для Figma заявлена как способ “streamline the design process” и снизить рутину. Для этого важны:

• готовые диапазоны компонентов,
• handy stickers и заготовки для целых UI (например, для редактора),
• свойства и варианты (properties/variants) для быстрой кастомизации.

Команда приводит интерфейсы к единому стилю и улучшает доступность

Плюс консолидации в том, что накопленные улучшения, best practices и “baked-in accessibility” можно:

• лучше документировать,
• поднять на уровень системы,
• применять последовательно между командами.

Контрибьютор понимает, что и как улучшать

Storybook уже полезен как каталог README для каждого компонента. Расширение Storybook до best practices и гайдов снижает порог входа в контрибьютинг и делает изменения более согласованными.

Итог

Дизайн-система WordPress — это попытка собрать дизайн, код и документацию в единый reference, чтобы:

• ускорить дизайн и разработку,
• повысить согласованность интерфейсов,
• сделать доступность и best practices стандартом по умолчанию,
• упростить жизнь авторам плагинов и контрибьюторам.

Если вы делаете плагины, темы или внутренние интерфейсы вокруг WordPress, это один из самых прагматичных путей приблизиться к “нативному” UX — без угадывания и велосипеда.