{"id":9131,"title":"CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u2014 \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u0431\u043e\u0433\u0430\u0442\u043e\u043c. \u0418\u043b\u0438 \u043d\u0435\u0442!","url":"\/redirect?component=advertising&id=9131&url=https:\/\/vc.ru\/promo\/320668-predprinimatelyam-ne-nuzhen-crm-partner-salesforce-obyasnyaet-pochemu-my-ne-pravy&placeBit=1&hash=737d7f6a70b711e4597167ca03452a69967df2ee861f60beeefbea5b58cf8663","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 комментариев
«Как иронично, что фирме в сфере психического здоровья плевать на психическое здоровье собственных работников» Статьи редакции

Сотрудники Spring Health жалуются на соучредительницу Эйприл Го: она запугивает их, увольняет при всех, вынуждает работать по 70 часов в неделю и не нанимает тех, кто спрашивает про переработки. Го объясняет: «Мы носимся как безголовые цыплята, потому что на кону человеческие жизни».

Эйприл Го — на ноябрь 2021 года самая молодая женщина-директор компании с оценкой более $1 млрд Slush
JetBrains представила инструмент для удалённой разработки Статьи редакции

Он позволяет писать код на локальном компьютере, а обрабатывает его удалённый сервер.

Факап на 45 млн рублей, выгорание и новый стартап

Это история моего прошлого проекта: ошибок, выводов и опыта, который я применил при создании нового стартапа.

Это я (слева) и Саша (аккаунт менеджер), гуляем по Москве, ждем встречи с партнерами
Время входа

Управляющий активами Дмитрий Космодемьянский — о том, что происходит с рынком облигаций.

Как обустроить домашнюю студию звукозаписи при скромном бюджете Статьи редакции

Почему сведённый трек нужно проверять на паршивой Bluetooth-колонке, какие плагины выгоднее брать новичку и с каким синтезатором работал Ханс Циммер, создавая саундтрек к «Тёмному рыцарю», — в пересказе Pitchfork.

AudioMunk
Юбилей кешбэка: как в 130 лет выглядеть «на все сто»

Кешбэк — возврат определенного процента наличных на карточный счет клиента после покупок в магазинах-партнерах банка или полетах на самолетах авиакомпаний-партнеров-банка или вообще за любые покупки в конкретный период времени — очень популярен в народе. Он выглядит как современная модная финансовая фишка

Как найти перспективное IPO
Разговор PRO: аналитика рекламы

Эксперты компании Registratura, входящей в iConText Group, вместе со своим клиентом «Олант» приняли участие в спецпроекте AdIndex.ru, где поговорили о рекламной аналитике.
Сергей Ерофеев, генеральный директор Registratura, Андрей Сахаров, руководитель отдела продаж Registratura, и Филипп Иванов, директор по интернет-маркетингу и e-commerce «Олант»…

IKEA начала сдавать в Токио квартиры в 10 м² за $0,86 в месяц, чтобы показать, что в них тоже можно жить Статьи редакции

Внутри есть мини-спальня, рабочая зона, диван, стиральная машина и другое.

Кейс «АнтиШколы»: мы впустую потратили два года на разработку своей платформы и выжили в пандемию благодаря Edvibe

После вуза мы с партнером запустили неформальную АнтиШколу по английскому — с кофе, печеньками, играми и атмосферой антикафе. Но столкнулись с проблемой в онлайне: два года разрабатывали приложение для студентов и потратили порядка $40 тысяч в никуда. Рассказываю, как это было.

Так мы занимаемся английским на крыше! Никаких унылых парт

null