Типографика в дизайн-платформе ВкусВилл

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

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

На этом уровне находятся константы для основных параметров текста: размеры кегля, шаг межстрочного интервала, трекинг, гарнитура и так далее.

В группах с большим количеством шагов используются абстрактные числа в названии: 100, 200, 900 и так далее. Главное здесь — удержаться от соблазна поместить значение в название токена.

На этом уровне, в общем-то, мало про что ещё можно рассказать. Нефункциональные токены — это фундамент для следующего уровня, и они не используются в дизайне напрямую.

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

Стили организованы по матричному принципу. Каждый стиль представляет собой пересечение следующих групп:

Группы размеров:

Label, text, headline, display, massive, extreme. В каждой группе маечные размеры: S, M, L.

Группа начертания

Light, regular, medium, bold, decorative.

Объединяя все группы в имени токена, мы получаем стиль вида Display-M-medium.

Стили как бы собраны на базе нефункциональных токенов. Эти токены хранятся и управляются через репозиторий. Для импорта в Figma используется плагин Token Studio.

Фигма пока не позволяет изменять отдельные нефункциональные токены в рамках стиля (например, включать подчёркивание). Для особенно частых случаев существуют дополнительные квази-стили вида Text-M-bold-link, Text-M-regular-straight, Text-S-regular-strike.

Задача этого уровня — семантически связать стили с наиболее частыми сценариями употребления. Плюс такие компоненты могут не только связывать один стиль с семантикой, но и объединять стили в группы, регулировать отступы. Например, в примере видно, что собраны наборы для UI-компонентов «Заголовок + подзаголовок», в которые сразу «вшиты» отступы между текстовыми слоями и паддинги самого текстового компонента.

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

Подобная структура типографики позволяет на разных проектах и продуктах применять общую модель, но при этом настраивать отдельные её элементы. Например, мы используем сразу несколько библиотек стилей: