Дизайн-система в Figma. Часть 5: Списки и Auto Layout
Продолжнаем эксперименты при создании собственной дизайн системы в Figma. Для тех, кто со мной впервые, рекомендую сперва прочитать предыдущие части, чтобы понимать, что именно я создаю и для чего это нужно:
Часть 1: Типографика, цвета и стили
Часть 3: Поля ввода и выпадающие списки
Сегодня будем рисовать компоненты для списков, преимуществ и прочих текстовых блоков.
Но прежде чем начать создавать компоненты, давайте посмотрим из чего состоят наиболее частые варианты списков в тексте:
- Собственно, сама текстовая часть
- Иногда может присутствовать какой-либо заголовок или жирное выделение основной мысли
- Буллит, иконка или номер (буква)
В этой статье мы рассмотрим наиболее простые и классические варианты оформления списков. Остальные варианты будут строиться подобным образом.
Простой ненумерованный список
Или просто список в буллитами/ галочками или с каким либо еще повторяемым элементом.
Создаем компонент нашего буллита. Это может быть палочка, галочка, кружочек, квадратик или что-либо еще, что больше всего соответствует вашему дизайну.
Я сделала кружок. При этом я намерено взяла размер компонента больше, чем сам круг, чтобы иметь возможность для маневра. Имя я задала icon/list/circle, чтобы в будущем иметь возможность позднее создать группу иконок для использования в разных вариантах списков.
Не забудьте при создании иконки использовать имеющиеся в нашей системе стили цвета. Подробнее о них я рассказывала в сасмой первой статье.
Далее создаем два текстовых слоя один по другим. Верхний будет заголовком или главной мыслью списка. Нижний — основным текстом.
Назначаем текстовым слоям Auto Layout. Подбираем подходящий вам размер вертикального отступа между двумя текстовыми слоями. Выбираем такую настройку масштабирования блока (fixed width).
Внутри фрейма Auto layout по-отдельности для каждого текстового слоя выбираем масштабирование по ширине блока (stretch left and right):
Теперь при изменении ширины фрейма с Auto Layout, тексты будут автоматически перестраиваться
Далее подставляем в нужное место ранее cозданную иконку с буллитом и запаковываем все это в компонент. Присваиваем название list/simple.
Ставим Constraints: для иконки left + top, для фрейма с текстами left&right + top.
По сути, наш список готов, но у него есть небольшой недостаток — высота списка не перестраивается при изменении ширины блока или самого текста.
Пока идеального для себя решения этой проблемы я не нашла. Пишите в комментариях, как вы бы решили эту проблему. Обещаю дополнить статью, если найдется более изящное решение. Опишу свои варианты костылей:
Способ 1:
Выделяем текстовый блок и иконку и группируем.
Выделяем компонент и снова назначаем Auto Layout, ставим fixed width. На группу ставим такую настройку масштабирования:
Теперь все масштабируется, но при этом буллит также растягивается вместе со списком.
Решить проблему можно, если запаковать иконку-буллит во фрейм и поставить Constraints: left + top.
Теперь иконка не разъезжается, но есть небольшой недостаток у способа — левая граница текста не фиксируется относительно компонента, расстояние между краем компонента и краем текста также масштабируется.
Способ 2:
Можно создать список шириной с текстовую область, буллит при этом будет вынесен за пределы границ компонета.
Чтобы сделать такой вариант, откатимся назад.
Итак у нас есть 2 текстовых слоя и иконка. Создадим дополнительно фрейм размерами 1x1 пиксель. Этот фрейм не имеет настроек цвета или обводки, он прозрачен. Галочка Clip content выключена. Располагается он над текстовыми слоями:
Этот фрейм мы запаковываем в компонент вместе с двумя текстовыми слоями, ставим Auto Layout. Все настройки масштабирования те же, что и ранее мы делали для текстовых слоев, чтобы они масштабировались вместе со всем блоком, только для фрейма ставим выравнивание по левому краю:
У компонента также снимаем Clip content. Присваиваем название list/simple.
Переносим иконку-буллит в нужное место нашего списка и в палитре слоев слой с иконкой вставляем внутрь фрейма:
В итоге у нас получился компонент, ширина которого совпадает с шириной текстовой области, а буллит вынесен за пределы компонента.
Оба варианта на мой взгляд не идеальны. А как сделали бы вы?
Если существует вариант более оптимальный, чем два этих способа, то буду признательна за их обсуждение в комментариях или в телеграм-чате.
Предположим, мы захотели сменить иконку-буллит. Это делается очень легко: можно подкорректировать сам компонент иконки, а Можно создать еще одну иконку и заменить ее в компоненте в помощи Instance. Если в вашей системе несколько вариантов иконок для буллита, не забывайте их называть по общим правилам.
Например: icon/list/circle, icon/list/line, icon/list/check и так далее. Тогда вы легко сможете их найти при замене instance.
Например, я решила заменить кружок-буллит на обычную черточку:
Если нам не нужно выводить в списке заголовок, то он будет просто скрываться и за счет Auto layout основная подпись поднимется наверх:
Нумерованный список
Нумерованный список создается по тому же принципу, что и ненумерованный, только вместо иконки мы подставляем текстовый слой с цифрой.
Я хочу, чтобы мои нумерованные списки наследовались от ненумерованных. Для этого нам нужно создать вспомогательный компонент с номером, размер которого будет идентичен размеру компонента иконки-буллита, сам дизайн номера может немного вылезать за пределы компонента, это не страшно. Но чтобы при наследовании у нас ничего не иссказилось, размеры должны соответствовать. Варианты номеров могут быть разными — это может быть просто цифра с точкой, может быть цифра в кружочке или цифра с черточкой.
Мой вариант. обратите внимание на границы компонента:
Далее берем экземпляр ранее созданного компонента простого списка и заменяем в нем при помощи instance иконку на вспомогательный компонент номера. запаковываем в новый компонент и присваиваем имя. Получается вот такой вот элемент нумерованного списка.
В итоге мы имеем два компонента разных видов списка из которых можно легко и быстро выстраивать вот такие структуры:
Списки с иконками
Списки с иконками могут применяться в оформлении каких-либо каталогов, либо в преимуществах и других случаях, когда мы хотим проиллюстрировать каким либо образом текст.
Эти списки строятся аналогичным образом. Разница может быть лишь в размере иконки и в ее положении.
Если иконка как и у текстового списка располагается слева — то построение компонента идет аналогично. Только сами иконки при использовании компонентов потом заменяются на заранее созданные варианты при помощи Instance.
Рассмотрим вариант, когда иконка располагается над текстом:
Если иконка сверху — то все становится намного проще. Просто иконка вместе с текстом упаковывается в один компонент с настройками Auto Layout.
Заранее подготовим несколько компонентов иконок одинаковых размеров идадим им имена по одинаковым правилам, чтобы объединить их.
Также как и в варианте с обычными списками создаем 2 текстовых слоя, берем одну из подготовленных иконок и располагаем все в нужном порядке:
Если теперь назначить Auto Layout, то все слои рапределяться на одинаковых расстояниях друг от друга. Возможно, вас устроит такой вариант, но я же хочу, чтобы у меня расстояние между заголовком и иконкой было больше, чем расстояние между заголовком и текстом. Для этого я сперва запаковываю в Auto Layout два текстовых слоя, ставлю им настройки как мы делали в случае со списком:
Для фрейма с Auto Layout:
Для каждого текстового слоя внутри:
А теперь мы выделяем фрейм с Auto Layout и нашу иконку, запаковываем в компонент и вновь применяем Auto Layout. Выставляем следующие настройки:
Для фрейма с Auto Layout:
фрейма с текстами внутри:
Для иконки:
Таким образом наш текст растягивается, а иконка всегда стоит слева. Можно сделать и другие варианты, например, когда текст и иконка стоят по-центру. Для этого В настройках Auto layout нужно выбрать вторую иконку. У текста настройки Auto layout не меняются, но нужно зайти в сами текстовые слои и поставить в них выравнивание текста по центру:
Компонент готов.
Теперь мы можем создавать списки подобного плана и легко подменять в них иконки.
Пример использования:
Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом 👏 (кстати, клапснуть можно несколько раз).
Принимаю ваши пожелания, какие новые компоненты можно отразить в нашей дизайн-системе. Буду также рада услышать ваше мнение, как подобные штуки реализуете вы.
Behance — мои лучшие работы
Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.
