Создание библиотеки дизайн-системы на примере Lyft


Как мы создавали библиотеки компонентов и атрибуты языка продукта Lyft

В конце 2019 года я помог переместить дизайн-систему Lyft из Sketch в Figma. По иронии судьбы, это был один из последних проектов, над которым я работал перед тем, как покинуть Airbnb. Полученный опыт помог узнать мне фундаментальные вещи, которые нужно учитывать при проектировании общей библиотеки в Figma.

В этой статье я хочу обсудить ряд передовых методов, которым мы следовали при создании атрибутов языка продукта Lyft и библиотек компонентов. И в конце я расскажу о полезных советах и ​​приемах, которые позволяют нам эффективно поддерживать их в актуальном состоянии.

Система в системе

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


Carousel Page Indicator и внутренние компоненты. Обратите внимание, фон холста имеет цвет заливки #F4F4FA

Мы настраиваем визуальную иерархию на странице каждого компонента, чтобы помочь различать основные компоненты и внутренние компоненты, из которых они состоят. Все основные компоненты помещаются во фреймы, имеющие внутренний контур 4px без фоновой заливки. Эти фреймы действуют, как sticker sheet компонентов.

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


Система внутренних отступов

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

Наши библиотеки компонентов используют следующие внутренние отступы:

  • 60 px : внутренние отступы фрейма (сверху, снизу, справа и слева)
  • 40 px : между заголовком фрейма и первым основным компонентом
  • 24 px : между заголовком фрейма и подзаголовком (по желанию)
  • 24px: вертикальный отступ между основными компонентами
  • 40px: горизонтальный отступ между основными компонентами


Слои визуально переупорядочены сверху вниз

По умолчанию при добавлении слоев в Figma новый слой создается над текущим на панели «Layers». Крайне утомительная задача – переупорядочить слои сверху вниз, слева направо на основе визуальной иерархии фрейма.

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


Наименование, применяемое к компактной кнопке фокуса

Проведя быстрый опрос пользователей в Slack, мы обнаружили, что большинство из них используют панель «Assets» для поиска компонентов. Поэтому крайне важно, как называются компоненты.

Мы создали и применили следующую структуру именования ко всем компонентам:

Имя файла / Имя страницы / Имя фрейма / имя компонента (вариант, стиль, тип и состояние)

Имя файла – это имя конкретной библиотеки и то, что пользователям нужно будет включить на панели «Assets», чтобы использовать компоненты в своих макетах (например, основные компоненты интерфейса (Android / iOS), основные компоненты интерфейса (веб), основной цвет интерфейса и т. д.).

Имя страницы – это имя компонента (например, индикатор карусели, кнопка, элемент списка и т. д.).

Имя фрейма – это группирование компонентов верхнего уровня, обычно по размеру (т. е. кнопки имеют 4 размера: Focus, Focus Compact, Drive и Drive Compact).

Имя компонента – это имя основного компонента и его вариантов. Из-за большого количества вариантов использование слеша (/) позволяет разделить их на другие определяющие категории, например, состояния. Несмотря на то, что это по существу помещает их в большее количество «папок», это помогает объединять похожие варианты, которые можно легко поменять местами в раскрывающемся списке «Instance» и найти в структуре папок на панели «Assets».

Визуализация структуры папок в раскрывающемся списке «Instance»

Более гибкие компоненты

Создание атомарных элементов – это основа дизайн-системы. Язык продуктов Lyft разбит на атомарные элементы, которые используются для создания определенных компонентов. Эти внутренние компоненты помогают обеспечить согласованность работы большой группы (например, кнопки), а также сократить расходы на обслуживание, особенно когда эти внутренние компоненты используются в нескольких компонентах (например, текстовое поле, текстовая область, раскрывающийся список и т. д.).

Компонент элемента списка состоит из трех областей: Start, Middle и End

Лучший пример того, как внутренние компоненты образуют компонент, можно увидеть в нашем элементе списка. Этот компонент содержит области, которые можно перенастроить для создания различных вариаций. В каждой области есть различные внутренние компоненты, из которых вы можете выбирать. К тому же, для каждой области разрешены только варианты одинакового размера (т. е. по умолчанию возможны только 4 внутренних компонента для области Start компонента Drive Default).


Внутренние компоненты, разрешенные для области Start

Внутренние компоненты, разрешенные для области Middle

Внутренние компоненты, разрешенные для области End

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

Поговорим об отзывчивости

Есть и другие вещи, которые следует учитывать при создании гибких общих компонентов, которые реагируют именно так, как вы предполагаете. Многие из этих параметров можно определить на панели «Design» в интерфейсе Figma.

Панель « Design » в Figma : источник

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

Горизонтальные ограничения: источник

Горизонтальные ограничения

  • Left закрепляет слой с левой стороны фрейма.
  • Right закрепляет слой с правой стороны фрейма.
  • Left and right – позволяет слою увеличиваться или уменьшаться по оси x.
  • Center позволяет слою перемещаться по направлению к центру фрейма по горизонтали.
  • Scale позволяет слою увеличиваться или уменьшаться в процентах от размеров фрейма.

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

Для этого просто установите для слоя Start левое горизонтальное ограничение , а для слоя Middle – левое и правое горизонтальное ограничение .

Пример настройки горизонтальных ограничений для компонента элемент списка

Вертикальные ограничения: источник

Вертикальные ограничения

  • Top прикрепляет слой к верхней части фрейма.
  • Bottom прикрепляет слой к нижней части фрейма.
  • Top and bottom позволяют слою увеличиваться или уменьшаться по оси Y
  • Center позволяет слою перемещаться по направлению к вертикальному центру фрейма.
  • Scale позволяет слою увеличиваться или уменьшаться в процентах от размеров фрейма.

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

Для этого просто установите для вашего слоя сообщения ограничение по вертикали снизу , а для слоя текстового фрейма – по вертикали сверху и снизу .

Пример настройки вертикальных ограничений для компонента Text Area

# 8 параметры изменения размера маркера: автоматическая ширина, автоматическая высота и фиксированный размер: источник

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

Автоматическая ширина

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

Пример настроек автоматической ширины текста для компонента Text Area

Автоматическая высота

Этот параметр позволяет увеличивать высоту текстового слоя в зависимости от содержания. Ширина исходного текстового слоя будет определять, когда ваше содержимое переносится на новую строку. Обычно я устанавливаю высоту текстового слоя на автоматическую, когда хочу, чтобы мой контент переносился на вторую строку внутри компонента. Если я установлю горизонтальные ограничения слева и справа вместе с опцией автоматической высоты, то текстовый слой будет размещаться, как я и предполагал.


Пример настроек автоматической высоты текста для компонента Text Area

Фиксированный размер

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

Другой способ создания гибких компонентов – использование функции Auto Layout, которая быстро корректирует компоненты в зависимости от их содержимого. К компонентам, которые действительно хорошо работают с Auto Layout, относятся кнопки, списки и панели. Но у этой функции есть свои ограничения, и вы сами должны решить стоит ли использовать ее в своих компонентах.

Адаптивные кнопки с использованием функции Auto Layout : источник

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

Текст смещает другие элементы: источник

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

С Auto Layout легко изменять порядок элементов: источник

Считаете переупорядочивание повторяющихся элементов интерфейса утомительным, например, в списке или меню? Auto Layout позволяет вам изменить порядок элементов, просто перетаскивая их мышкой или используя клавиши со стрелками вверх и вниз на клавиатуре.

Секреты мастерства

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

  • Выбрать все с тем же экземпляром . Если вам нужно переименовать несколько внутренних компонентов на странице, полной основных компонентов, просто перейдите в меню «Edit» и выберите « Select All with Same Instance ».

Edit > Select All with Same Instance: источник

  • Создать компонент. Любой дизайнер, отвечающий за дизайн-систему знает, что будет создавать компоненты до второго пришествия. Я часто нажимаю сочетание клавиш Option + Command + K , чтобы быстро создать компонент.
  • Переименовать слой(и). Функция переименования по умолчанию в Figma очень мощная. Выбор нескольких слоев и нажатие Command + R запускает модальное окно «Rename Layer» содержащие дополнительные параметры переименования, включая поиск и замену, возрастающие и убывающие числа, а также префикс или добавление к текущему имени.

Нажмите Command + R, когда выделен несколько слоев: источник

  • Вставить вместо выделенного. Просто нажмите Shift + Command + V (пока что-то уже выделено) , чтобы сделать это.
  • Увеличьте масштаб слоя. Чтобы быстро увеличить масштаб слоя, просто дважды кликните по иконке этого слоя в меню «Layers».

Быстрое увеличение любого слоя: источник

  • Описание компонентов. Это способ сообщить конкретные сведения о вашем компоненте. Описание отображается при наведении курсора на экземпляр на панелях «Assets» и «Code». Мы используем эту область для передачи информации разработчикам.

Информация, необходимая при передаче проекта разработчикам, в описании компонента: источник

  • Игнорировать ограничения. Иногда вы хотите временно игнорировать горизонтальные и вертикальные ограничения, которые установили для слоев компонентов. Для этого просто удерживайте нажатой клавишу Command при изменении размера компонента. Отпустите ее, если хотите соблюдать ограничения.
  • Предотвратить автоматическое размещение. При перемещении слоев по холсту я обнаружил раздражающую особенность: они автоматически помещаются в другие фреймы. Чтобы этого не произошло, удерживайте клавишу «Пробел», перетаскивая слой.
  • Замена экземпляров. Этот совет можно использовать для замены любого экземпляра, но я использовал его для замены иконок. Удерживайте Option при перетаскивании компонента с панели « Asset ». Это также повышает эффективность, поскольку вы можете использовать поле поиска на панели «Asset».

С легкостью заменяйте иконки: источник

Вывод

Когда я создал библиотеку компонентов Airbnb, я впервые столкнулся с дизайн-системами. Я учился по мере создания библиотеки. Действуя в рамках концепции системы, которую я использовал вначале, я смог взять нечто столь же сложное, как дизайн-система, и представить ее таким образом, чтобы в ее фундамент были встроены последовательность, качество и гибкость. Вот так я помогал создавать в Figma дизайн-систему Lyft. Знаете передовые методы, которые вы использовали при создании собственной дизайн-системы? Пишите в комментариях ниже!

Перевод статьи:

3 симпатии

Круто! Фича с пробелом особенно помогла)
спасибо.

1 симпатия