Я покажу свой способ сборки компонента List Cell, объясню, почему считаю его гибким, а также приложу ссылку на Figma. Этот компонент ещё называют List Item, Data Cell или просто Cell, но смысл один: это элемент списка. Я решил рассказать об этом потому, что не нашёл подходящих материалов, как собрать свой List Cell. Есть какие‑то статьи и компоненты в Figma, но оно работало не так, как мне нужно. В нашей дизайн‑системе этот компонент уже был, но в первой версии он был нескольких видов, каждый из которых имел множество различных вариантов. Это усложняло добавление новых пожеланий дизайнеров в наш List Cell.
У него было множество вариантов, а выбор одних настроек отключал другие и было непонятно, как вернуть старые настройки. Вносить новые варианты было тяжело.
Наш List Cell в зависимости от высоты компонента имел выравнивание либо по центру, либо по верху. Чтобы выбрать выравнивание, дизайнеру приходилось считать высоту компонента. Это было не очень удобно, но другого решения мы тогда не знали.
Нашей дизайн‑системой пользуются в том числе и продуктовые дизайнеры. Они присылали нам свои пожелания, и чтобы вписать их в наш старый List Cell нам приходилось проходить большой сложный путь, если это вообще было реализуемо. Поэтому мы подумали, что стоит изменить подход к проектированию этого компонента и сделать его более гибким, при этом сохранив стандартные варианты: основной, с чекбоксом, с радио, со переключением. Убрали только Selected, поскольку выбранный пункт мы впоследствии сделали через настройку State.
Так появился единый вид компонента с разделением на три части: Left, Center, Right.
Структура компонента теперь стала такой:
Каждая часть (left, center, right) теперь является локальным компонентом дизайн-системы: в любой момент команда может без труда добавить дополнительные варианты:
Настройки внутренних компонентов я прокинул через Nested Instances. Поэтому их удобно настраивать в панели свойств без перехода внутрь слоёв:
Функционально я не переделывал компонент, варианты настроек и варианты текстовых слоев остались прежние.
— А что делать, если дизайнеру нужна бирка, иконка, ещё что-нибудь внутри текстовых слоёв? Или нужна кнопка справа, а у вас в вариантах её нет?
Если стандартный вариант не подходит дизайнеру, он может воспользоваться заменой любой части ячейки на локальный компонент. Для этого нужно выбрать настройку Swap Me и поменять эту заглушку на свой локальный компонент.
При этом это всё тот же List Cell из нашей дизайн‑системы: у него есть состояния default, hover, pressed, selected и disabled. И эти состояния также будут распространяться на вложенные дизайнером локальные компоненты.
На стороне разработке List Cell работает очень просто: у него также есть левая, центральная и правая части, в которые разработчики могут положить те компоненты, которые нужны их дизайнерам. Таким образом, и в Figma, и в коде компонент не ломается, а расширяет свои возможности благодаря заменяемой области.
Кроме гибкости в дальнейшем развитии компонента мы ещё заметно снизили его «вес»: раньше компонент состоял из 160 вариантов, а теперь из 20. Мелочь, но всё равно хороший показатель оптимизации.
Как и обещал, ссылка на компонент в Figma.
? Что ещё почитать:
Если было интересно, можно залететь к нам в коллективный телеграм-канал дизайнеров Домклик, там мы обмениваемся опытом, мыслями, крутыми подборками, идеями, и так далее. ✌️
Мой личный канал про карьеру и дизайн — UX Advocate