Рассказываю как сделать компонент в виде простой подчёркнутой ссылки в Фигме.
Пригодится для отдельностоящих ссылок, например, таких как элементы навигационных блоков.
Не годится для вставки в текстовые массивы. Не годится для ссылок в две и более строк.
Делаем ссылку
Делаем простой текстовый блок с автошириной и выравниванием по левому краю.
Добавляем подчёркивание (цвет ссылки, прозрачность — 0,25, ширина равна ширине текста) и размещаем прямо под текстом.
Оборачиваем подчёркивание во фрейм и самой линии задаём масштабирование «scale» по вертикали и горизонтали.
Текст и фрейм с подчёркиванием оборачиваем в компонент. Компоненту задаём Auto layout → vertical, текст выравниваем по горизонтали по центру, а фрейм с подчеркиванием растягиваем по ширине.
Компонент готов. Дальше можно его копировать и использовать в разных местах макета — подчёркивание будет адаптироваться под длину текста.
В этом коротком туториале я не поднимал тему состояний. По-хорошему этот компонент просит хотя бы парочку: hover и visited. А в идеале его расширить до трёх типов: обычной ссылки (сплошное подчёркивание), для навигации по странице (пунктирное подчёркивание) и кнопочки изменения состояний страницы (точечное подчёркивание).