3 подхода к созданию компонентов

Привет, VC! В прошлый раз я описала маленький хак для работы над дизайн-системами. В этой статье опишу три подхода к созданию компонентов на примере списков.

Компонент списков, или list item – это компонент, на котором может строиться большая часть мобильных интерфейсов.

У него могут быть сотни вариантов: список настроек, способы оплат, профили пользователя и прочее…

В дизайн-системах я встречала три подхода к созданию такого компонента:

1. Первый и самый очевидный подход – сделать нужные list items и дополнять их в процессе работы. Пример из UI Kit Uber:

Этим удобно пользоваться: можно настроить варианты и переключать их через правую панель или заменять компоненты с зажатым Opt+Cmd из панели Assets.

Минусы тоже есть. Дизайнер Jérôme Benoit из Doctolib пишет:

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

2. Второй подход – со скрытыми слоями. Состояния компонента настраиваются включением или выключением его слоев.

Возможно, этот способ появился, когда в Figma еще не было вариантов. Сейчас такой подход не оправдан, потому что копии компонента со скрытыми слоями занимают столько же памяти, что и мастер. Об этой проблеме писала студия Mish:

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

Как и в первом случае, этот способ приводит к потере скорости работы по мере роста системы.

3. Третий подход – максимально настраиваемый компонент. В мастер-компоненте закладываются слоты, куда выводятся компоненты с набором нужных интерфейсных элементов.

Например, на схеме в позиции lead, trail 1 и trail 2 выводится один и тот же компонент item, который в свою очередь содержит: варианты с чекбоксами, радио, аватарами, изображениями банковских карт, иконки, переключатели и лейбл.

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

Это простой пример. Компонент может быть сильно сложнее – с большим количеством слотов и дополнительными настройками в виде отступов и типов выравнивания контента, бордеров и прочего.

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

Минус – возможно понадобится больше времени, чтобы продумать структуру мастер-компонента и настроить правильное отображение дочерних