← На страницу блога
4

Автоматическое подчёркивание ссылок в Фигме

Часто возникает задача сделать подчёркивание ссылок в фигме. Есть несколько вариантов.

Автоматическое подчёркивание ссылок в Фигме 1

Через свойства текста

При выбранном элементе выбираем свойства текста и кликаем на параметр Underline.

Это быстро, но не даёт гибкости. Мы не можем изменить отступ и цвет.

Через линию вручную

Выбираем линию, делаем её полупрозрачной и располагаем под ссылкой.

Автоматическое подчёркивание ссылок в Фигме 2

Вроде бы все, задача решена. Но вдруг от клиента приходят правки поменять 10 ссылок в дизайне. Меняем текст и

Автоматическое подчёркивание ссылок в Фигме 3

И надо у каждой ссылки регулировать длину линии. Чтобы это автоматизировать, нужны Auto Layout.

Магия Auto Layout

Для магии, нужно выделить текст, линию, на каком-то из элементов кликнуть правой кнопкой мыши и выбрать пункт Add Auto Layout. Или просто нажать Shift+A.

Автоматическое подчёркивание ссылок в Фигме 4

После этого нам станет доступна панель Auto Layout.

Автоматическое подчёркивание ссылок в Фигме 5

Нам надо сделать так, чтобы линия тянулась по ширине всего блока, когда увеличивается или уменьшается слово.

Автоматическое подчёркивание ссылок в Фигме 6

Выбрав линию, нужно в блоке Resizing по горизонтали выбрать Fill Container. То есть она будет растягиваться на весь контейнер.

Автоматическое подчёркивание ссылок в Фигме 7

Пишем слово — линия растягивается самостоятельно.

Полезно
1
1
Непонятно
← На страницу блога

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

← На страницу блога