{"id":9208,"title":"\u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043d\u0430 vc.ru \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0441\u0442\u0438\u043a\u0435\u0440\u044b","url":"\/redirect?component=advertising&id=9208&url=https:\/\/vc.ru\/promo\/326527-lyubite-rugat-servisy-vk-etot-tekst-dlya-vas&placeBit=1&hash=032d65c70fe5fc63c371cf935d9281ebe7529d9359ff65d7499233043c93d674","isPaidAndBannersEnabled":false}
Дизайн
Roman Kamushken

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

0
12 комментариев
Популярные
По порядку
Написать комментарий...

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

19

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

0

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

5

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

4

Комментарий удален по просьбе пользователя

0

Нет, там всё НАМНОГО хуже...

0

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

1

Фигма наш спаситель. Хз че бы делали без нее. До сих пор по 1 страничке рисовали в фш и матерились.

0

Figma + Material Theme Configuration Kit

0

Мощнейший тандем. Удалось вывести на продакшн работающую связку?

0

Да удалось и не один проект

0
Читать все 12 комментариев
«У одного человека — половина спутников в мире»: Европейское космическое агенство обвинило SpaceX в монополии в космосе Статьи редакции

Илон Маск устанавливает собственные правила — это может мешать конкуренции, считает глава исследовательской организации.

Глава СберМаркета Асан Курмангужин запустил подкаст Asan Talks в YouTube

В выпусках Асан берет интервью у топ-менеджеров крупных компаний и обсуждает вопросы саморазвития и лидерства

«СберПрайм» ввёл лимит на бесплатную доставку продуктов из «СберМаркета» — её называли выгодой для подписчиков Статьи редакции

Сервис сделал платным то, что обещал сохранить бесплатным: на сайте было указано, что подписка для пользователей «всегда бесплатная».

Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

Взломан аккаунт VK и вместо помощи поддержки, получаешь от них блокировку

У меня нет аккаунта в VK, а у моей жены есть, точнее был. Обычный такой аккаунт , мамашки, где она админ 2 групп родкома в школе детей ( причем единственный админ и сейчас в эти группы никого не добавить и себя с нового аккаунта) и доступ в группы совместных закупок, аккаунт старый, причем аккаунт открыт только для друзей.

Pinterest купила белорусский сервис для редактирования видео Vochi Статьи редакции

Покупка поможет Pinterest развивать видеонаправление.

«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

vc.ru превратился в книгу жалоб

Вам не кажется, что vc.ru превращается в сайт для жалоб на разные сервисы и компании?

9 декабря банк «Открытие» и Яндекс.Бизнес проводят очередное бизнес-шоу «Цифровая эволюция бизнеса»

Тема шоу — как компаниям малого и среднего бизнеса продвигать продажи и завоевывать новую аудиторию покупателей через онлайн-каналы

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

null