Продолжнаем эксперименты при создании собственной дизайн системы в Figma. Для тех, кто со мной впервые, рекомендую сперва прочитать предыдущие части, чтобы понимать, что именно я создаю и для чего это нужно:
Часть 1: Типографика, цвета и стили
Часть 2: Кнопки
Часть 3: Поля ввода и выпадающие списки
Часть 4: Поиск и умный поиск
Сегодня будем рисовать компоненты для списков, преимуществ и прочих текстовых блоков.
Но прежде чем начать создавать компоненты, давайте посмотрим из чего состоят наиболее частые варианты списков в тексте:
- Собственно, сама текстовая часть
- Иногда может присутствовать какой-либо заголовок или жирное выделение основной мысли
- Буллит, иконка или номер (буква)
В этой статье мы рассмотрим наиболее простые и классические варианты оформления списков. Остальные варианты будут строиться подобным образом.
Или просто список в буллитами/ галочками или с каким либо еще повторяемым элементом.
Создаем компонент нашего буллита. Это может быть палочка, галочка, кружочек, квадратик или что-либо еще, что больше всего соответствует вашему дизайну.
Я сделала кружок. При этом я намерено взяла размер компонента больше, чем сам круг, чтобы иметь возможность для маневра. Имя я задала 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 текстовых слоя и иконка. Создадим дополнительно фрейм размерами 1×1 пиксель. Этот фрейм не имеет настроек цвета или обводки, он прозрачен. Галочка Clip content выключена. Располагается он над текстовыми слоями:
Этот фрейм мы запаковываем в компонент вместе с двумя текстовыми слоями, ставим Auto Layout. Все настройки масштабирования те же, что и ранее мы делали для текстовых слоев, чтобы они масштабировались вместе со всем блоком, только для фрейма ставим выравнивание по левому краю:
У компонента также снимаем Clip content. Присваиваем название list/simple.
Переносим иконку-буллит в нужное место нашего списка и в палитре слоев слой с иконкой вставляем внутрь фрейма:
В итоге у нас получился компонент, ширина которого совпадает с шириной текстовой области, а буллит вынесен за пределы компонента.
Оба варианта на мой взгляд не идеальны. А как сделали бы вы?
Если существует вариант более оптимальный, чем два этих способа, то буду признательна за их обсуждение в комментариях или в телеграм-чате.
Загрузка...
