{"id":11170,"title":"\u041a\u0430\u043a \u0437\u0430\u043c\u043e\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438","url":"\/redirect?component=advertising&id=11170&url=https:\/\/vc.ru\/promo\/341559-korotko-uvelichit-prodazhi-cherez-sobstvennoe-prilozhenie&placeBit=1&hash=7a5df0ef2aad1850664a44a9e406536cb9a26738c002b57db0ec8a963322865f","isPaidAndBannersEnabled":false}
Дизайн
Mish

Структура библиотеки компонентов в Figma на примере большого банковского приложения

В предыдущей статье мы рассказали о нашем опыте оптимизации проекта Figma на примере большого банковского приложения: файл начал сильно тормозить, и мы со временем пришли к пониманию, как решить эту проблему.

В данной же статье уделим внимание тому, как мы организовали библиотеку компонентов по итогам оптимизации: поговорим о структуре, о логике названий, а также об особенностях расположения элементов.

Мы, дизайн-студия Mish, продолжительное время занимались дизайном двух мобильных приложений для SBI банка: классического банкинга для взрослых и отдельного банковского приложения для детей.

Через полгода работы файлы проекта начали сильно тормозить, поэтому мы взялись за капитальную оптимизацию. Решили организовать библиотеку так, чтобы сложные компоненты состояли из простых, где при этом уровней вложенности компонентов может быть несколько: самые маленькие составляющие — иконки, шрифты, геометрические фигуры; самые большие — списки, карточки, экраны.

Строение компонента

Покажем, из чего состоит компонент, на примере строки списка высотой 64px, одного из самых распространенных элементов в проекте.

Вариаций верстки такого блока списка получилось свыше тридцати: с иконкой и без, с одним заголовком и с заголовком и подстрочником, с суммой и подстрочником и с суммой без подстрочника, с кнопкой вместо суммы и со стрелкой вместо кнопки. Плюс для каждой вариации есть состояния загрузки и состояния на темном фоне. Все эти вариации мы выделили отдельными компонентами. Почему так, мы описали в предыдущей статье.

Типовой компонент списка состоит из фона, текста, суммы и нескольких вложенных компонентов. Последние, в свою очередь, содержат в себе еще один уровень компонентов: компонент обложки в списке состоит из компонента круга и компонента иконки доллара.

На месте иконки доллара может стоять любая другая: иконка рубля, иконка категории операции или логотип закусочной. Компонент иконки — наименьший объект в структуре, а иконок схожего размера в проекте около сотни. Такая верстка списка используется во всех разделах приложения: на главном, в истории, в профиле и на внутренних экранах.

Чтобы вместо значка доллара поставить на обложку другую иконку, нужно перетащить ее с зажатым Opt+Cmd из панели Assets. Панель Assets — это второй таб левой панели слоев. Шорткат для быстрого вызова Assets — Opt+2. Важно, чтобы новая иконка была такого же размера, например, 24х24, иначе при замене она сожмется или растянется.

Фон круга под иконкой удобнее менять из Related components на правой панели инструментов. Другой же способ изменения фона — поменять его цвет через стиль или палитру. Но мы решили по максимуму упаковать все в компоненты и создали шесть компонентов обложек для разных цветов. Так, если понадобится изменить цвет фона на всем проекте, мы сможем сделать это быстрее.

Также есть отдельные случаи, когда на обложку списка нужно поставить логотип компании, например, сотового оператора. Для этого нужно на дочернем компоненте отключить видимость иконки и через стили изменить заливку фона на нужный логотип. Предварительно нужно все логотипы и аватарки занести в цветовые стили.

Путь к компоненту

Выше мы упоминали, что у блока со строкой списка есть несколько вариантов верстки, и каждый из них является отдельным компонентом. На картинке два схожих компонента. Они немного отличаются в верстке:

list64+icon/1-1 — элемент списка с одним заголовком и суммой;

list64+icon/2-2 — с заголовком, подзаголовком и суммой с подстрочником.

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

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

Чтобы в Related components находились нужные компоненты, их важно правильно назвать.

Например, компоненты фонов для иконок в нашем проекте названы примерно так:

componentsAndroid/lists/elements/circle40x40/dark

componentsAndroid/lists/elements/circle40x40/white

componentsAndroid/lists/elements/circle40x40/white15

componentsAndroid/lists/elements/circle40x40/blue

componentsAndroid/lists/elements/circle40x40/blue5

componentsAndroid/lists/elements/circle40x40/blue10

Теперь же рассмотрим, из чего состоит полный путь к компонентам.

componentsAndroid — название файла.

lists — название фрейма в файле.

Дальше уже идет рукописное имя, каждый элемент которого между знаками «/» создает еще один уровень вложенности. И в конце имя самого элемента.

Также еще один уровень вложенности можно создать, поделив файл на страницы.

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

В какой последовательности организовать этот путь, каждый дизайнер решает сам исходя из специфики проекта и удобства использования. В некоторых случаях удобно сделать последним пунктом признак цвета, что, как в примере выше, позволяет быстро менять цвет подложки под иконкой. В некоторых случаях удобнее называть элементы по иному принципу. Например, по принципу состояния элемента: Enable и Disable, Hover и Active.

Чтобы избежать перепроектирования, важно в самом начале продумать то, как будет устроена ваша структура, и схематично ее набросать.Но даже если вы ошиблись в структуре, не переживайте — просто переименуйте мастер-компоненты так, как вам будет удобно. Figma позволяет это сделать в любой момент, что не займет много времени. Ускорить процесс переименования также можно с помощью плагинов.

Структура библиотеки

Библиотеку мы расположили в трех файлах:

  1. файл с компонентами иконок и иллюстраций, общих для двух платформ;
  2. файл с компонентами элементов iOS;
  3. файл с компонентами элементов Android.

Если в проекте предполагается свыше тысячи экранов, мы рекомендуем хранить компоненты в отдельных файлах. Что может случиться, если хранить компоненты в одном файле с макетами — читайте в нашей предыдущей статье.

Выводы:

  1. Если в проекте предполагается свыше тысячи экранов, храните компоненты в отдельных файлах.
  2. Разные состояния элемента лучше делать отдельными компонентами, а не скрытыми слоями. Иконки же нужно переключать в панели компонентов.
  3. Называйте компоненты и слои в них осмысленно, используйте вложенность с помощью слэша «/” и иерархии внутри файла: название файла/название страницы/название фрейма/внутренняя иерархия с “/».
  4. Продумывайте заранее структуру библиотеки, дабы сэкономить себе время в будущем.
0
9 комментариев
Популярные
По порядку
Написать комментарий...
Юрий Богомолов

.

Ответить
–3
Развернуть ветку
Mish

Если я правильно понимаю о чем речь, там правила не мы устанавли и даже система UI была не наша, а переданная нам от другой студии. Что дали, с тем, к сожалению, и пришлось работать. Но все проекты с нуля мы стараемся делать по данной методологии, более того сейчас стараемся уговаривать клиентов с готовыми проектами тоже делать библиотеку. 

Ответить
4
Развернуть ветку
ivan krapivin

Ловко вы прочли его мысли.

Ответить
11
Развернуть ветку
Mish

Ловко Юрий почистил комент, раскрывающий NDA инфу.

Ответить
4
Развернуть ветку
Andrey Antar

ААА… завидую вашей выдержке. У меня часто случается бардак и костыли со всем этим счастьем(((

Ответить
1
Развернуть ветку
Элементарный клуб

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

Ответить
1
Развернуть ветку
Александр Котовский

Сначала подумал дичь дикая, а потом втянулся ) круть!

Ответить
1
Развернуть ветку
Иван Митрофанов

Спасибо за наглядное и информативное объяснение темы.

Ответить
0
Развернуть ветку
Советский огонь

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

Ответить
0
Развернуть ветку
Читать все 9 комментариев
ЦБ выступил против предложений Минфина о регулировании криптовалют Статьи редакции

Подход Минфина угрожает появлением «параллельной финансовой системы», считает регулятор.

Инвестиции в IPO: научно доказанный способ зарабатывать 18% в день, или как акулы Уолл-стрит наживаются на Цукербергах

Профильные Телеграм-каналы и брокеры уверяют, что на вложениях в IPO легко получать по 100% годовых, и даже больше. В этой статье я разбираю, почему ученые-финансисты в чем-то склонны с ними согласиться — и кто на самом деле зарабатывает огромные деньги на IPO (спойлер: скорее всего, это будете не вы).

Концепт: как выглядели бы логотипы известных компаний в стиле Средневековья Статьи редакции

Burger King, Audi, Twitter, Starbucks и другие.

Почему отключение SWIFT не разрушит российскую банковскую систему, и чего действительно стоит бояться

С 2014 года мы слышим о возможном отключении России от системы SWIFT. В последние недели эти разговоры все чаще звучат в медиа и серьезно влияют на настроения в банковской среде. CBDO Банка 131 Анна Кузьмина рассказала, почему блокировка SWIFT в России не смертельный сценарий, и какие санкции против банков на самом деле вызывают беспокойство.

«Эталон» требует доплаты в 300 тысяч после оформления ДДУ и выдачи ипотеки из-за ошибки в их калькуляторе

Добрый день!

Возникла неприятная ситуация с застройщиком «Эталон». В ноябре 2021 года было принято решение приобрести квартиру в жилом комплекте от застройщика «Эталон», обратилась напрямую в отдел продаж, без агентов и риэлторов. Процесс выбора несколько затянулся т.к. предложенные изначально варианты не устраивали по планировке или цене, к концу…
Московский акселератор – короткий путь к мечте!

У нас отличная новость: стартовала постакселерационная программа для участников треков AI Factory, T&M, Digital health, ArchTech. И он отличается от тех постакселераторов, какие были до этого. Чем? Сейчас расскажем.

«Альфа-Банк» выдает кредиты онлайн-мошенникам без должной идентификации клиентов и отказывается аннулировать договор
Кейс: запустить шрифт для дислексиков и увеличить количество скачиваний приложения на 70%

Зачем — рассказывают дизайнер, логопед и агентство.

Как оценивать дизайн: Метод 3К, ч. 1

Раскладываем процесс оценки разрабатываемого дизайна на систему вопросов.

Я запарился перебирать онлайн-кинотеатры и создал агрегатор «Кино.Вино»

Есть такая проблема в век официальных/модных/современных (нужное подчеркнуть) онлайн-кинотеатров — их стало много, а выбрать где смотреть, да ещё и по более выгодной цене когда контент платный, занятие утомляющее.

Как и почему люди сбегают с работы в первый день — опыт сообщества vc.ru Статьи редакции

Но иногда работодатели и сами ведут себя некорректно.

null