@Donald_Duck

Как сделать в Figma компонент вот таких заголовков?

5d8adf435ec85942897869.png
Помогите, пожалуйста, уже всю голову сломал.
  • Вопрос задан
  • 332 просмотра
Пригласить эксперта
Ответы на вопрос 1
DimaShved
@DimaShved
Web designer
Пока что есть только один способ, он костыльный, но он есть. Я его увидел у Google в исходниках. Он применялся не для заголовков, а для label которые заходили на рамку поля в состоянии focus. Как на рисунке.
5da5a223b28cc764232357.png

Вот наглядная реализация, в вашем варианте.
5da5a259b0998748322630.png
5da5a2c6e681b707420521.png

Весь фокус в слое Fill, он текстовой добавляя букву l например мы увеличиваем длину слоя которая перекрывает линию (слой border).

Естественно убираем расстояние между буквами, до тех пор пока не исчезнит пробел.
5da5a37e56403164779825.png

Из плюсов это то что это можно реализовать.

Из минусов, необходим каждый раз подставлять символы и цвет букв l каждый раз нужно менять если изменился фон.

Из хороших новостей, скоро будет обновление которое даст возможность объектам взаимодействовать в компоненте. В вашем случае черточки будут сами раздвигаться как и компонент в зависимости от текста.
Пост в ВК
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы