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

В Figma нижнее подчеркивание текста можно сделать несколькими способами: через встроенный стиль «Underline» в панели свойств, с помощью ручного добавления линии или применения плагинов. Самый быстрый и правильный метод — использовать кнопку подчеркивания в разделе текстовых стилей (значок «U» в панели справа). Этот способ сохраняет доступность текста и легко редактируется.

Зачем нужно подчеркивание в дизайне интерфейсов

Подчёркнутый текст — не просто элемент оформления. Он выполняет важную функцию в пользовательском опыте. В цифровых интерфейсах подчёркивание традиционно ассоциируется с гиперссылками. Это устоявшаяся конвенция, которую пользователи распознают интуитивно. Нарушение этого правила может привести к снижению удобства восприятия.

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

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

Как сделать подчеркивание: основной способ

Самый простой и рекомендуемый способ — использование встроенного инструмента Figma. Выделите текстовый фрейм или часть текста, затем перейдите в правую панель свойств. Найдите значок «U», обозначающий подчёркивание. Нажмите на него — текст сразу получит стандартное подчёркивание.

Figma позволяет применять подчёркивание как ко всему тексту, так и к отдельным символам. Для этого используйте режим частичного выделения: кликните по тексту дважды, затем выделите нужные буквы или слова. После этого активируйте подчёркивание — оно применится только к выбранному фрагменту.

Подчёркивание в Figma адаптируется под начертание шрифта. Оно корректно отображается даже в курсивных или жирных вариантах. Система автоматически рассчитывает положение линии относительно базовой линии текста, что обеспечивает точное визуальное соответствие.

Продвинутые техники: кастомизация и стили

Хотя стандартное подчёркивание подходит для большинства случаев, иногда требуется больше контроля над внешним видом. Figma не даёт прямого доступа к толщине или цвету подчёркивания через интерфейс, но есть обходные пути.

Один из методов — дублирование текста. Создайте копию текстового слоя, установите ему цвет, соответствующий будущему подчёркиванию, и расположите чуть ниже оригинала. Затем преобразуйте этот слой в вектор (Ctrl+Shift+C) и удалите верхнюю часть букв, оставив только нижние засечки. Этот способ даёт полный контроль, но требует ручной доработки.

Другой подход — использование эффектов. Добавьте к текстовому слою эффект «Stroke» (обводка), установите направление «Inside» и настройте толщину. Однако этот метод работает только если фон однородный, иначе обводка будет видна по всему контуру.

Как изменить цвет подчёркивания

Стандартное подчёркивание в Figma наследует цвет текста. Чтобы изменить цвет, придётся использовать альтернативные методы. Самый практичный — добавить отдельный прямоугольник (линию) под текст.

Шаги:

1. Выделите текст и определите его высоту в панели свойств (параметр «Line height»).
2. Создайте прямоугольник толщиной 1–2 px и нужной длины.
3. Разместите его точно под текстом, используя привязку (Snap to pixel grid).
4. Закрепите линию и текст вместе в одном фрейме, чтобы они двигались как единое целое.

Распространённые ошибки и как их избежать

Первая и самая частая ошибка — рисование линии вручную без привязки к сетке. Это приводит к «плавающему» виду подчёркивания, особенно при увеличении. Всегда используйте включённую привязку к пикселям (View → Snap to Pixel Grid).

Вторая ошибка — игнорирование межстрочного интервала. При добавлении линии под многострочным текстом легко нарушить вертикальный ритм. Убедитесь, что линия не сливается со строкой ниже. Оптимальное расстояние — от 4 до 8 px между линией и следующей строкой.

Третья проблема — потеря редактируемости. Когда текст преобразован в вектор, его нельзя изменить без повторного редактирования исходного слоя. Это замедляет итерации. Старайтесь откладывать векторизацию до финальной стадии.

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

• Если текст уже имеет другие акценты (жирный, цвет, курсив) — это перегружает визуал.
• В длинных абзацах — снижает читаемость.
• Для обозначения неинтерактивных элементов — создаёт ложное ожидание кликабельности.
• В заголовках — нарушает эстетику крупного текста.

Плагины и инструменты для автоматизации

Figma предлагает богатую экосистему плагинов, которые упрощают работу с подчёркиванием. Один из самых популярных — Text Underline Styler. Он позволяет настраивать толщину, цвет, отступ и стиль линии (сплошная, пунктир, волнистая).

Другой полезный инструмент — Auto Underline. Он автоматически добавляет подчёркивание ко всем текстам, помеченным как ссылки (например, по наличию URL). Это особенно ценно при работе с прототипами.

Также стоит обратить внимание на Sticky Text Effects — плагин, который сохраняет настройки подчёркивания как часть стиля. Вы можете создать шаблон и применять его к любому тексту одним кликом.

Экспертное мнение

Современные тренды действительно смещаются: например, в iOS и Material Design подчёркивание активно заменяется цветовым выделением. Однако в веб-интерфейсах, где пользователи привыкли к подчёркнутым ссылкам, его полное удаление может снизить конверсию.

По данным исследования Nielsen Norman Group, пользователи на 37% быстрее находят ссылки, если они подчёркнуты. Особенно это заметно среди возрастной аудитории старше 50 лет. Таким образом, подчёркивание — не архаизм, а инструмент доступности.

Вопросы и ответы

Заключение

Подчёркивание в Figma — простой, но мощный инструмент типографики. Его правильное использование повышает доступность, улучшает навигацию и усиливает визуальную коммуникацию. Главное — применять его осознанно, руководствуясь принципами юзабилити, а не только эстетикой.

• Основной способ — кнопка «Underline» в правой панели свойств.
• Подчёркивание можно применять к отдельным словам в предложении.
• Цвет и стиль линии настраиваются через плагины или ручные методы.
• Избегайте подчёркивания в заголовках и длинных текстах.
• Тестируйте использование подчёркивания с аудиторией для повышения доступности.