Figsolve #3: Долгий путь к Button
Кнопка в Фигме — самый сложный компонент? Возможно. Но в этой статье попробуем приблизиться к идеалу.
Задача
Сколько ни делай кнопки в Фигме — все равно придется переделывать. Это аксиома.
Перейдем к требованиям. Кнопка может содержать иконку, текст или их комбинацию. В нашем случае ограничимся иконкой слева. Также кнопка должна уметь «обнимать» свой контент или растягиваться по ширине, центрируя его. Важно: если пользователь вернет кнопке свойство Hug, она обязана восстановить корректное поведение. А если при заданном размере контент не помещается — нужно его обрезать в три точки. Разобрались, погнали!
Все дело в точках
Самое необычное и сложное в будущей кнопке — это скрывать контент при нехватке места. И при этом сохранить Hug.
Ведь задача упирается в центрирование контента при наличии и отсутствии иконки: лейбл должен тянуться по ширине и уметь уходить в многоточие, а иконка всегда должна оставаться прижатой к левому краю.
Центральное положение можно имитировать боковыми спейсерами. Но в таком случае кнопку уже не сделать Hug: при попытке выставить Hug спейсеры превращаются в Fixed.
Как добиться того, чтобы спейсеры оставались Fill, а кнопка — Hug? Про это я писал в статье Figsight #17: Нарушаем пределы. Там решение через текстовые слои с минимальной или максимальной шириной. Я использовал пустые текстовые слои с ограничением в 320px.
И это действительно работает! Но при эксплуатации выяснилось: Фигме такое решение не нравится. С одним спейсером все в порядке, но как только их два и больше, при быстром копировании один из них внезапно становится Fixed. Если копировать медленно — проблем нет.
В любом случае, решение с текстовыми спейсерами пришлось отложить: нам не нужна кнопка с таким ограничением.
Сложный путь
Можно пойти тяжелым путем — в плане количества слоев, но реализуемым в Фигме. Разделим контейнеры иконки и надписи и зададим каждому свои правила позиционирования.
Метод рабочий, хоть и не идеальный: при сокращении текста надпись слегка «плывет» относительно иконки, но этим можно пренебречь. Минус в том, что слоев становится слишком много.
Чтобы сократить их количество, я снова обратился к знакомому приему из Figsight #15: Метод тени 2.0.
Здесь нужен Label Wrapper, чтобы имитировать оптическую компенсацию текста. Остальные нюансы можно увидеть в файле примеров. Это лучшее решение задачи, которое мне удалось найти.
Немного специй
У кнопки есть состояние загрузки. Я сделал так, чтобы при переключении она не теряла размер — для этого добавляется невидимый контент.
Также я поставил ограничители по высоте и ширине.
Готово — теперь кнопкой можно пользоваться.
Еще один компонент покорен! Отлично, но в следующий раз разберем кое-что интереснее.