Как сделать подчеркивание в фигме

Figma предлагает дизайнерам гибкие инструменты для работы с типографикой, но явной кнопки «Подчеркнуть текст» в классическом понимании здесь нет. Однако это не проблема, а возможность для более детального контроля над внешним видом линии. В этой статье вы узнаете несколько практических способов добавить подчеркивание к тексту или любому другому объекту, от самых простых до продвинутых.

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

Как подчеркнуть текст стандартным способом

Самый быстрый метод - использовать встроенное свойство шрифта. Выделите текстовый слой на холсте и на панели свойств справа найдите раздел «Текст». Рядом с настройками цвета шрифта вы увидите три значка: «Т», зачеркнутая «Т» и «подчеркнутая Т». Нажмите на последний, и текст сразу получит подчеркивание.

Важно помнить, что эта линия является атрибутом шрифта: ее толщина и отступ зависят от выбранного семейства шрифтов и его размера, а цвет всегда совпадает с цветом текста. Это отличное решение для быстрого оформления, но с ограниченными возможностями кастомизации.

Создание подчеркивания с помощью линии Stroke

Для полного контроля над подчеркиванием используйте отдельную линию. Создайте ее с помощью инструмента «Линия» (Line), который находится на панели инструментов или вызывается клавишей «L». Расположите линию под текстом, отрегулировав ее длину и положение.

На панели «Дизайн» справа вы сможете детально настроить внешний вид: выбрать толщину обводки (Stroke weight), тип (сплошная, пунктир), цвет и даже применить градиент. Этот метод незаменим, когда нужно создать подчеркнутый заголовок или элемент интерфейса с уникальным стилем, не привязанным к свойствам шрифта.

Продвинутые методы рамка и авто-макет

Если подчеркивание - часть интерактивного элемента, например кнопки, лучше использовать структуру. Поместите текстовый блок внутрь Фрейма (Frame) или добавьте к тексту Авто-макет (Auto Layout). Затем настройте обводку (Stroke) нижней границы этого контейнера. В таблице ниже сравним два ключевых метода:

Метод	Лучше всего подходит для	Гибкость настройки
Свойство текста	Быстрого оформления, макетов с большим объемом текста.	Низкая (зависит от шрифта).
Отдельная линия	Декоративных элементов, заголовков, нестандартного дизайна.	Высокая (полный контроль).
Граница фрейма	Кнопок, интерактивных элементов, пунктов меню.	Средняя/высокая (легко редактировать).

 

Как видно из таблицы, выбор метода напрямую зависит от задачи. Использование границы фрейма особенно эффективно в компонентах, так как линия будет автоматически масштабироваться вместе с изменением ширины текста внутри.

Настройка расстояния между текстом и линией

Критически важный аспект красивого подчеркивания - это грамотный отступ (padding). При использовании линии или обводки фрейма расстояние регулируется вручную. Просто переместите линию ниже текста с помощью мыши или стрелок на клавиатуре. В случае с авто-макетом отступ легко задать численно в свойствах «Padding», выбрав, например, нижний отступ. Помните, что "визуальный баланс часто важнее математической точности" - иногда небольшое ручное выравнивание дает лучший результат, чем строгие числовые значения.

Вывод

Подчеркивание в Figma - это не одна функция, а набор приемов, каждый из которых служит своей цели. Для типографики в текстовых блоках используйте встроенное свойство, для декоративных целей - отдельную линию, а в системах дизайна и компонентах - границу фрейма с авто-макетом. Комбинируя эти подходы, вы сможете реализовать любой визуальный замысел с максимальной точностью и эффективностью, сохраняя структуру проекта чистой и адаптивной.