Организация компонента в Figma на примере Userpic

Качественная дизайн-система в Figma всегда учитывает возможные состояния определённых компонентов.

Если до появления Global Styles вариант был лишь один — всегда создавать новый компонент для каждого состояния (например текстовое поле может быть default, а может быть focused), то после внедрения стилей многие UI-элементы удалось унифицировать лишь до одного в своей категории, а разнообразие создавать экземплярами, присоединяя лишь новые стили и цвета.

Организация компонента в Figma на примере Userpic

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

Userpic

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

  • без загруженной фотографии;
  • с инициалами вместо фотографии;
  • с индикатором состояния «онлайн» или «офлайн»;
  • с бейджиком нотификаций;
  • содержащий иконку дополнительного действия;
  • содержащий несколько лиц для прототипирования;
  • использован в разной размерности на разных экранах без отсоединения.
Организация компонента в Figma на примере 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% с продаж Ваши. Высокому качеству - высокие цены. Я в поиске талантов, умов, идей и тех, кто готов выпиливать “компоненты из ближайшего будущего”. Пишите в Телеграм.

2828
12 комментариев

Коротко:
В экземплярах компонентов фигма можно включать и отключать слои (кто бы мог подумать!). Обратите внимание на мои продукты.

20
Ответить

Спасибо. Исправил.

Ответить

С Джуан Пидрилио можно хихикать или это не айс?

5
Ответить

Хуан! Его звали Хуан Педрильо. Конечно можно, ведь этот персонаж был создан специально для ЦА данного ресурса...

4
Ответить
Комментарий удалён модератором

Над, Юля, над! Смеяться, хихикать и даже угорать можно над чем либо ( кем либо). Понаедут тут С Москвы...

1
Ответить