Figsight #12: Автоматический оверлей

Как заставить Figma автоматически включать оверлей при переполнении текстового поля? Разберемся в этой статье.

Как вы уже знаете, я обожаю работать с текстовыми полями, приближая их поведение в Figma к реальным компонентам. Однако заметил одну проблему: в некоторых интерфейсах при переполнении поля, справа появляется оверлей, сигнализирующий пользователю, что часть текста скрыта. Мы уже касались работы с текстом в полях Figsight #1 и частично решили проблему направления текста. Сегодня попробуем добавить автоматический оверлей, который включается при переполнении текста.

Самое очевидное решение — отображать оверлей поверх текста, когда он выходит за границы контейнера. Для этого я нашел три способа реализации. Разберем самый перспективный, который не требует использования отрицательных значений. В качестве основы будем использовать АЛ wrap.

АЛ wrap располагает объекты горизонтально, а при нехватке места переносит их на следующую строку. Мы воспользуемся этим поведением, чтобы разместить оверлей поверх текста. Используем null-фрейм, содержащий нужный нам оверлей, и помещаем его в текстовый контейнер. Чтобы оверлей всегда отображался сверху, задаем настройку АЛ: Last on Top.

Осталось только применить необходимый нам стиль оверлея и выставить Clip content.

Объединить наш новый оверлей и обратное движение текста из Figsight#1 тоже не сложно: просто используем нулевой фрейм, содержащий оверлей в качестве спейсера, а значит нужно выставить ему Fill, а в самом родительском АЛ поменять привязки вот так:

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