Figsight #6: Метод тени

Как можно объединить преимущества разных способов ресайза текста — Fill и Hug — и использовать их одновременно? Как правильно поставить иконку рядом с текстом, не ломая макет? Давайте разберёмся вместе.

Пользователям Figma давно не хватает возможности располагать элемент сразу за последней буквой многострочного текста. Стандартные методы тут не помогут, ведь текстовый компонент имеет прямоугольный блок (баундинг-бокс). Комьюнити Figma нашло выход: векторный Intersect прямоугольника, совпадающего с размером строки текста, и самого текста позволяет получить нужный размер.

Пример реализации от Юрия показывает, сколько усилий Figma прилагает для обработки такого поведения 😁. Мы же попробуем сделать что-то попроще, но не менее полезное.

Легче всего описать задачу через визуальные примеры:

Здесь видно, что текст ведёт себя как Hug в первом примере и как Fill во втором. Задача не из простых, но, конечно, мы её решим.

Создаём слои: текстовой, иконку, и объединяем их в автолэйаут (АЛ). Применяем метод из Figsight #1: добавляем пустой фрейм-филлер и меняем выравнивание родительского контейнера.

Второй кейс не сработал… Нужно что-то придумать.

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

Другое дело! Мы можем безболезненно назначить функцию Spacer-а Icon Wrapper-у. Gap от иконки до текста можно задать прямо в Content Wrapper-е, а компенсацию расстояния от иконки до правого края можно сделать в Caption Shadow Wrapper добавлением правого паддинга.

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

Пример в фигме доступен по ссылке