Figsight #3: Трансмутация

Это цикл статей для опытных пользователей Figma, которые разрабатывают компоненты и проектируют UI Kit. Многие приёмы в серии — интеллектуальные труды вашего покорного слуги, они будут публиковаться впервые.

Можно ли создать в Figma компонент, который будет скрывать пароль так же, как это делают поля ввода? Сейчас выясним!

Сегодня на операционном столе — компонент ввода пароля с возможностью скрывать/показывать введённый текст.

Я не встречал работающие варианты такого компонента, реализованные в Figma. Настало время их придумать!

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

Мы не можем менять символы без специального шрифта, где все глифы заменены на символ маски. Значит, будем создавать иллюзию!

Создадим простую конструкцию из необходимого нам текстового слоя Password и ответного Pass Mask, содержащего только необходимые нам символы маски, обернутого в контейнер с абсолютным позиционированием и привязкой Left and Right.

В моём случае достаточно было изменить параметр Letter spacing на 20% в слое Pass Mask, чтобы покрыть большую часть кейсов. Да, остаются краевые состояния при использовании множества слишком широких или узких символов, но пока это нерешённая задача. Pass Mask Wrapper нужен, чтобы отрезать лишние символы в Pass Mask, используя Clip content. Сам текст маски содержит столько маскирующих символов, сколько требуется для максимального размера поля, и выставлен в Fill.

Теперь можем собрать простейший компонент. Обязательно назначим component property для значения слоёв Password и поставим 0% для видимости этого слоя — если его скрыть, не будет работать в варианте со скрытым паролем. Проверяем.

Прекрасно! Уже похоже на реальный компонент.

На сегодня всё, скоро мы поговорим о ещё более трудных, но интересных трюках. Как обычно, достижение от меня.

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