В первой части остановимся на том, что же такое витрина, для чего она нужна, какую пользу может принести, и пробежимся по имеющимся в сети витринам других дизайн-систем.

Определение

Витрина — это единое рабочее пространство со всеми инструментами работы с дизайн‑системой и стилеобразующими элементами продукта для дизайнеров, разработчиков, владельцев продукта и других участников процесса.

Вся информация по дизайн‑системе хранится в одном месте, доступная для всех:

общие принципы построения интерфейсов;
компоненты для всех продуктов;
документация и спецификации;
ресурсы для дизайнеров и разработчиков.

Можно ещё добавить, что витрина — это как Story book или Github, но ещё и для дизайнеров. Или как UIkit или Guides, но ещё и для разработчиков.

А также, витрина:

Отличный способ ознакомиться с принципами и всеми компонентами дизайн‑системы, понять, как это всё работает и собирается в единое целое.
Даёт понимание, насколько объёмен продукт, из каких компонентов состоит.
Позволит точнее оценить вносимые изменения или разрабатываемые фичи.
Ответит на вопросы, как устроен компонент, откуда берутся данные и что с ними происходит.

Для чего?

Например, в вашей компании уже есть дизайн-система, но периодически происходит такое:

Дизайнеры собирают макеты с абсолютно разным подходом. Применяют один и тот же компонент в соответствии с абсолютно разной логикой, нарушая тем самым опыт пользователя и делая его непредсказуемым.
Из раза в раз выдумывают индивидуальные подходы к дизайну, свои отступы, скругления, тени, что приводит к разношёрстному визуалу в рамках одного продукта. Такая ситуация удваивает усилия дизайнеров, что приводит к значительным затратам времени.
Макет и прод различаются, так как компоненты, которыми пользуются дизайнеры отличаются от тех, которые есть в библиотеке разработчиков.
Как ещё один вариант развития событий пункта выше: разработчики верстают заново один и тот же компонент дабы избежать расхождений с макетами. Тем самым растрачивая своё время. А если придут обновления компонента из дизайн-системы? Получается, вручную всё перелопачивать.

Возникают необоснованные расходы ресурсов, непостоянный пользовательский опыт, несогласованный дизайн...

В такой ситуации должна появиться необходимость установить общие правила сборки макетов, проектирования интерфейсов, использования компонентов и распространение этих правил среди команд дизайнеров и разработчиков. Чтобы дать им инструмент, который помог бы оптимизировать, структурировать и упросить процессы.

Таким инструментом, по сути, является витрина. Её основные задачи:

Содержать в себе все основы стиля продукта, правила вёрстки, правила применения элементов дизайна, шаблоны, правила работы с текстом.
Быть источником всей теории и необходимых ресурсов, правил и принципов как для дизайнера, так и для разработчика.
Быть актуальной библиотекой всех компонентов дизайн-системы с их документацией и спецификацией, с демонстрацией их поведения при различных разрешениях экрана, с правилами для каждого компонента (для дизайнера и разработчика), а также иметь ссылки на актуальные макеты в Figma.
Витрина должна поддерживать взаимосвязь всех элементов дизайна с кодом, токенами. А также давать управлять параметрами кода и иметь для этого все необходимые инструменты.

Таким образом, витрина поможет вам:

Полностью синхронизировать процессы со стороны дизайна и разработки.

Структурировать процессы для улучшения их понимания и скорейшего достижения целей и результатов.
Предлагать быстрые решения благодаря наличию шаблонов. Время дизайнера и разработчика стоит ДОРОГО. Чтобы человек не тратил его на поиски идеи, доработку и прочее, у него будет инструмент, который всегда под рукой.
Сократить трудозатраты на контроль всех файлов, создав единую точку входа. Не нужно контролировать миллион файлов, достаточно держать в тонусе только витрину. Это тоже экономит ресурсы для более полезных дел в рамках команды дизайн‑системы.
Обучать сотрудников. С помощью одной только витрины можно погрузить любого коллегу в процессы и правила дизайн-системы и продукта в целом.

Так, с определениями и пользой разобрались. Теперь нужно создать ту самую витрину.

Создание витрины

Как и в случае с любым продуктом, всё начинается с анализа и изучение бэст практис. Методики и тему исследований я опущу, так как для этого следует выделить отдельную статью. А вот на изучении лучших мировых практик остановимся. Не мы первые, не мы последние, как говорится. Здесь поделюсь с вами ссылками на витрины, которые мне зашли, но для начала...

Сёрчить тоже надо с умом

Помимо общей оценки схожих продуктов стоит уделить особое внимание тому, что наиболее важно для вас в рамках вашего продукта, определить фокусные точки. Это нужно, чтобы исследование прошло максимально полезно, иначе можно распылиться на всякую мелочь, не вынеся практической пользы.

При анализе наших коллег по витринам я выделила для себя основные моменты:

Навигация и поиск. Чем проще и быстрее человек сможет найти необходимую информацию, тем больше вероятность, что он ею воспользуется:)
Кстати, поисковик можно нафаршировать очень классными штуками. Например, поиском по ключевым словам и словам‑перевёртышам, предпросмотром результатов для быстрого считывания информации, путём найденного результата (откуда он и где лежит) и другими полезностями.
Разделы. В идеале, для себя вы изначально должны понимать, чем наполните вашу витрину. Однако что‑то можете упустить из внимания, или найти что ещё полезное‑интересное, что могло бы вам пригодиться.
Если вы ознакомитесь хотя бы с 10–15 витринами, то поймёте, что наиболее важными разделами будут: ресурсы и руководства (для разработчиков и дизайнеров), компоненты (библиотека, взаимодействие и правила), стиль (вся визуальная часть продукта и работа с ним).
Работа с компонентами и документацией. Основная задача витрины — всесторонне показать компонент и работу с ним. А вот как именно это показать и что туда положить, бывает непонятно, поэтому можно смело зайти к коллегам по витринам и посмотреть, побыть тем пользователем со стороны. Может, вы обнаружите, что вам чего‑то не хватает, или что‑то, наоборот, лишнее.
Визуальная часть и взаимодействие с пользователем. Немаловажен визуальный язык и коммуникация с пользователем.
Фичи. Какие интересные и нетипичные инструменты и виджеты могут быть использованы? Это может быть доработка компонентов прямо в витрине, исходя из ваших параметров. Или возможность оживить интерфейс с помощью переключения со статики на анимацию элементов.

Вот список моих фаворитов среди витрин:

AntDesign. Ребята довольно популярные, о них не знает разве что тот, кто никоим образом не соприкасался с дизайн‑системами. У них можно перенять много разных фич. Например, клёво решена работа с компонентами, предложены интересные виджеты для адаптации самой витрины под ваши нужды. И в целом визуальная часть у них сдержанная, чистая и приятная.
Flowbite. В некоторых моментах работа с компонентами у них решена даже лучше, чем у Ant'ов. К навигации у них немного иной подход, но тоже можно взять на вооружение.
Fluent. Дизайн‑система Windows. В целом неплохо, есть даже интерактив с компонентами, можно потыкать. Как реф покатит.
Material. Для меня не эталон, очень уж ребята ушли в декоративность платформы, что, на первый взгляд, конечно, прикольно и есть wow-эффект. Картиночки всякие :) Качественные описания и классная линейная навигация, так скажем, от А до Я об одном компоненте, без перескакивания из раздела в раздел.
Контур и Ростелеком. Очень и очень хорошо описаны правила и компоненты, есть вся необходимая теория, клёво подтянуты ресурсы.

Можно поискать витрины через этот сайт, точечно находить компоненты по разным ДС.

Резюмируя, хочу сказать: не бойтесь брать лучшее отовсюду, если это решает проблемы пользователей. Даже если это уже сделано у всех, оберните в свою классную историю. Но, как гласит мудрость: «кради как художник». Не стоит полностью перенимать опыт сторонних команд; перед ними, возможно, стояли другие цели, исходя из которых были приняты те или иные решения. Сосредоточьтесь на своих целях, фильтруйте опыт и применяйте его с учётом своих потребностей. В таком случае есть шанс достичь классных результатов, опираясь не только на свои наработки.

Подведём итоги

Витрина — действительно полезный инструмент, не только как учебник по взаимодействию с дизайн‑системой, но и как путеводитель, который объединяет в себе весь опыт, на котором строится ваш продукт.

Витрина — инструмент для создания качественного, единообразного продукта.

Витрина — инструмент, который позволяет сократить трудозатраты как разработчиков, так и дизайнеров (конечно, при условии что им пользуются).

Спасибо за внимание! В следующей части посмотрим, что умеет наша витрина и с какими трудностями мы столкнулись при её создании.

Витрина компонентов, или Единая точка правды в дизайн-системе. Часть 1