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

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

Многие дизайнеры начинают проектировать иерархию шрифтов в том порядке, в котором видят в книгах: заголовок, подзаголовок, основной текст, сноски. Я многократно убеждался, что такой подход приводит к проблемам – наступает момент, когда дизайнеру хочется создать ещё одну вложенность и погрузиться на новый уровень иерархии (а для этого требуется новый шрифт ещё меньшего размера, который плохо читается). В компьютере всё устроено наоборот: базу задаёт не верх, а самый низ иерархии. Так что начинать надо с самого маленького шрифта. Это особенно важно для соблюдения правил accessibility и учёта персонализации – пользователь может изменить масштаб шрифтов и задать минимально допустимый размер в настройках системы.

Сначала я создаю в Figma компоненты Single Paragraph, Multi Paragraphs, Block, Section. Все кроме первого содержат слоты, в которые можно помещать компоненты более младшего уровня иерархии. Каждый компонент содержит в себе строго заданные вертикальные отступы и внешние поля. Это нужно для того, чтобы не угадывать какие отступы задавать при сборке компонентов в единый стек – всё выстраивается автоматически за счёт встроенных в компоненты полей. Такому не учат на курсах, но самые опытные дизайнеры пришли к аналогичному решению. Я писал об этом в отдельной статье “Отступы устарели”.

Каждый из вышеназванных компонентов содержит свой заголовок, который можно отключать через свойства компонента. Для параграфа и мультипараграфа предусмотрены 3 варианта: No limits, Collapsed, Extended – два последних наделены элементом сворачивания-разворачивания содержимого (варианты я связываю чтобы они из коробки работали в интерактивном прототипе). Так на уровне дизайн-системы фиксируется максимальное количество строк, которые можно показывать для свёрнутых текстов. Это значение можно вынести в переменную на случай если вы экспериментируете с дизайн-системой на раннем этапе её создания.

После этого я создаю в Figma коллекцию переменных Typography. Коллекция разбита на блоки: по одному блоку на каждый уровень иерархии шрифтов. Внутри блока заданы переменные: Font family, Font weight, Font size, Line height. Возникает соблазн включить в описание и цвет шрифта, но ниже я объясню почему это неправильно.

Ширина полей и размер листа также относятся к типографике, поэтому отступы и ширину всплывающих окон я тоже вношу в коллекцию Typography.

В коллекции Typography я создаю несколько режимов, которые потом можно переключать в макетах через Appearance: Desktop, Mobile, Scale. И здесь становится понятно, почему не стоит включать цвет в эту коллекцию – тогда потребуется дублировать каждый из трёх режимов для светлой и тёмной темы. Это ненадёжно, потому что каждое изменение придётся вносить два раза, и можно ошибиться или забыть.

Компоненты Single Paragraph, Multi Paragraphs, Block, Section я перевожу на переменные, конструирую простые и сложные макеты, смотрю как ведут себя сочетания шрифтов, и подправляю значения переменных для достижения наилучшего баланса.

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

Я столкнулся с этим ещё до моей работы в InvestEngine: пользователи Unlimit жаловались на сложность организации документации, и я взялся решать эту проблему. Мне удалось полностью избавиться от одного уровня вложенности. Это потребовало переработки нескольких разделов документации, но я чётко сформулировал простые правила, так что проблем не возникло. Сейчас, в эпоху использования ИИ, такой рефакторинг достигается быстро и дёшево.