Организация компонента в Figma на примере Userpic
Качественная дизайн-система в Figma всегда учитывает возможные состояния определённых компонентов.
Если до появления Global Styles вариант был лишь один — всегда создавать новый компонент для каждого состояния (например текстовое поле может быть default, а может быть focused), то после внедрения стилей многие UI-элементы удалось унифицировать лишь до одного в своей категории, а разнообразие создавать экземплярами, присоединяя лишь новые стили и цвета.
Это позволило свести количество элементов к минимально необходимому. Поиск стал проще, система стала чище. Но как быть, если в одном проекте часто используется несколько стилей для одного компонента? Вдобавок требуется часто переключаться между двумя или тремя.
Userpic
Это самый простой пример компонента, который в дизайн-проекте может быть использован в нескольких состояниях. Если вы думаете, что это просто круглая фоточка с симпатичной девочкой, то вы смотрите недостаточно далеко, ведь на самом деле юзерпик может быть:
- без загруженной фотографии;
- с инициалами вместо фотографии;
- с индикатором состояния «онлайн» или «офлайн»;
- с бейджиком нотификаций;
- содержащий иконку дополнительного действия;
- содержащий несколько лиц для прототипирования;
- использован в разной размерности на разных экранах без отсоединения.
Очевидно, что в хорошей Figma-системе для hi-end-прототипирования мы хотим получить все эти состояния быстро и удобно. Вдобавок мы хотим оставаться с минимумом необходимых компонентов. Поэтому возникает вопрос: хранить все состояния в виде скрытых слоёв в мастере или каждое состояние должно быть объявлено самостоятельным компонентом?
Создание компонента из экземпляра
Этот способ сохранил свои преимущества и после прихода Global Styles. Переключение экземпляра оптимально в том случае, когда в нём достаточно много отличий от родительского компонента. Например другой цвет, толщина обводки, тень, изображение и так далее.
Например, состояния инпутов быстрее переключать через экземпляры. Особенно в большом проекте со множеством страниц. А, например, иконку внутрь кнопки лучше вложить на уровне мастера и отключить. Так гораздо быстрее скопипастить кнопку из соседнего артборда и просто сделать Visible-слой с иконкой.
Pros: позволяет быстро перключать состояния экземпляров со множеством отличий.
Cons: заведомо большее число компонентов, требуется время на их организацию.
Скрытые слои внутри мастер-компонента
В наши дни Figma отлично справляется с сотнями экземпляров, которые содержат 5-10 скрытых групп с десятками слоёв и разбросаны по множеству страниц. Так что не переживайте за производительность, хотя когда-то давно 10 таких страниц буквально «вешали» проект. Ведь в случае использования этого метода всего-навсего в мастер-компонент Userpic (помимо фотки) нужно будет поместить и сразу же спрятать:
- слой или группу с векторными объектами для пустого юзерпика;
- текстовый слой для инициалов, центрированный;
- бейджик нотификаций — в правый верхний угол;
- индикатор состояния «онлайн» или «офлайн» — в нижний;
- иконку в центр компонента или угол для мобильных сценариев (например призыв редактировать фото, удалить);
- несколько изображений лиц (в iOS design toolkit сделано пять мужских, пять женских, и всё сгруппировано);
- каждому элементу расставить Constraints, чтобы Userpic можно было использовать в нескольких размерах;
- что ещё я забыл? :)
Pros: быстрое получение нужного состояния экземпляра путём переключения видимости слоёв.
Cons: если переключать более трёх слоёв и вдобавок присоединять новые стили, действий становится слишком много.
Ох, кажется, простой Userpic оказался не таким уж и простым. Инструменты дают нам упрощение дизайн-процессов, но сложности неожиданно появляются совсем с другой стороны. Надо учиться работать с компонентами, понимать их логику и сущность переиспользуемости.
Меньше лишних действий
Создавая новое правило, вы, возможно, улучшаете свой алгоритм. Я остановился на таком для себя: если создание нового состояния требует три или более переключений слоёв в «Видимый», то лучше предопределять это состояние в отдельный компонент, который сначала был экземпляром.
Помните, что потребуется потратить время на организацию, проверить нейминг каждого слоя (чтобы текстовые элементы не теряли контент при переключении), констрейны, последовательность и многое другое.
После того как врачи поставили мне диагноз «компонент головного мозга», я стал использовать такой подход в своих шаблонах для Figma. Так что если вы фрилансер, организация, разработчик или начинающий Figma-дизайнер, обратите внимание на то, что развернуть дизайн-систему внутри вашей организации гораздо быстрее на базе готовых решений.
Кстати, если вы хороший дизайнер, любите детальки, работаете в Фигме и понимаете архитектуру и принципы работы с компонентами я предлагаю вам совместно зарабатывать: вы делаете хорошую дизайн систему, я её публикую в своем маркетплейсе, 70% с продаж Ваши. Высокому качеству - высокие цены. Я в поиске талантов, умов, идей и тех, кто готов выпиливать “компоненты из ближайшего будущего”. Пишите в Телеграм.