Делаем простую адаптивную ссылку в Фигме

Рассказываю как сделать компонент в виде простой подчёркнутой ссылки в Фигме.

Пригодится для отдельностоящих ссылок, например, таких как элементы навигационных блоков.

Не годится для вставки в текстовые массивы. Не годится для ссылок в две и более строк.

Делаем ссылку

Делаем простой текстовый блок с автошириной и выравниванием по левому краю.

Добавляем подчёркивание (цвет ссылки, прозрачность — 0,25, ширина равна ширине текста) и размещаем прямо под текстом.

Оборачиваем подчёркивание во фрейм и самой линии задаём масштабирование «scale» по вертикали и горизонтали.

Текст и фрейм с подчёркиванием оборачиваем в компонент. Компоненту задаём Auto layout → vertical, текст выравниваем по горизонтали по центру, а фрейм с подчеркиванием растягиваем по ширине.

Компонент готов. Дальше можно его копировать и использовать в разных местах макета — подчёркивание будет адаптироваться под длину текста.

В этом коротком туториале я не поднимал тему состояний. По-хорошему этот компонент просит хотя бы парочку: hover и visited. А в идеале его расширить до трёх типов: обычной ссылки (сплошное подчёркивание), для навигации по странице (пунктирное подчёркивание) и кнопочки изменения состояний страницы (точечное подчёркивание).

Пост опубликован 28 июля 2020 года в 19:00

#дизайню #в фигме