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

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

Основные шаги для подчеркивания текста

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

Для начала необходимо выделить текстовый фрейм или фрагмент текста с помощью инструмента Text (T). После этого в правой панели Inspector появится раздел Text, где доступны все параметры форматирования.

1. Выделите нужный текст или весь текстовый блок.
2. Перейдите в правую панель и найдите строку «Text Decoration».
3. Нажмите на выпадающее меню и выберите «Underline».
4. Текст автоматически получит стандартную линию снизу.

Если вы работаете с многострочным текстом, подчеркивание будет применено ко всем строкам, где активирован этот стиль. При этом Figma корректно обрабатывает переносы и разрывы слов.

Варианты подчеркивания и их особенности

Figma предлагает три состояния текстового декорирования: нет, подчеркивание и зачеркивание. Каждое из них решает свои задачи в дизайне интерфейсов.

• None — стандартное состояние без декораций. Используется по умолчанию.
• Underline — добавляет линию под текстом. Применяется для ссылок, заголовков, акцентов.
• Strikethrough — проводит линию по центру текста. Часто используется для отображения удалённых цен или выполненных задач.

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

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

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

Например, в прототипе интернет-магазина цена со скидкой может иметь зачеркнутую старую стоимость и подчёркнутую новую — так пользователь сразу понимает, что акция активна. Такой приём усиливает визуальную иерархию.

Настройка стиля подчеркивания

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

По умолчанию подчеркивание:

• Имеет фиксированную толщину (зависит от шрифта);
• Цветом повторяет цвет текста;
• Располагается близко к нижней границе символов.

Для кастомизации рекомендуется использовать ручной метод: создание отдельной линии под текстом.

Как сделать кастомную линию вручную

1. Создайте текстовый блок и примените к нему нужный шрифт и размер.
2. Добавьте прямоугольник (Rectangle) с высотой 1–2 px и нужной длиной.
3. Расположите его точно под текстом, выровняв по краям.
4. Задайте нужный цвет и при необходимости добавьте отступ (offset).
5. Сгруппируйте текст и линию (Ctrl+G), чтобы они перемещались вместе.

Такой подход даёт полный контроль над внешним видом. Вы можете сделать пунктирную линию, двойное подчёркивание или даже анимировать её в прототипе.

Использование плагинов для продвинутого подчеркивания

Существуют сторонние плагины, расширяющие возможности Figma. Например, плагин Text Style Manager или Advanced Underline позволяют настраивать:

• Толщину линии;
• Отступ от текста;
• Цвет подчёркивания (отличный от цвета текста);
• Тип линии (сплошная, пунктир, штрихпунктир).

Плагины особенно полезны при работе с дизайн-системами, где требуется единый стиль подчёркивания для всех компонентов.

Ошибки, которые нужно избегать

Даже такой простой инструмент, как подчеркивание, может быть использован неправильно. Распространённые ошибки снижают качество дизайна и мешают пользователям.

Избыточное подчёркивание

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

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

Несовместимость с типографикой

Некоторые шрифты уже имеют сильную нижнюю зону (например, с длинными хвостами у букв g, y, j). Подчёркивание в таких случаях может слипаться с символами, создавая визуальный дискомфорт.

Игнорирование доступности

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

Рекомендуется комбинировать:

• Подчёркивание + цвет (например, синий);
• Изменение стиля при наведении (hover);
• Чёткий фокус-индикатор в прототипе.

Альтернативные способы подчеркивания

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

Градиентное подчёркивание

Создаётся с помощью линии с градиентной заливкой. Подходит для современных брендированных интерфейсов.

Шаги:

1. Нарисуйте линию под текстом.
2. Примените к ней линейный градиент.
3. Настройте угол и цвета по стилю проекта.

Анимированное подчёркивание

В прототипах можно имитировать анимацию появления линии. Это эффективно для презентаций и демо.

Как сделать:

• Создайте две версии элемента: без линии и с линией.
• Свяжите их через переход «Smart Animate».
• Задайте продолжительность анимации 300–500 мс.

Подчёркивание с отступом

Иногда линия слишком близко прилегает к тексту. Чтобы визуально отделить её, можно:

• Увеличить line-height текста;
• Добавить прозрачный padding снизу;
• Использовать отдельную линию с отступом в 2–4 px.

Экспорт и совместимость

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

Стандартное подчёркивание из Figma корректно передаётся в CSS как text-decoration: underline. Однако кастомные линии экспортируются как отдельные элементы, что может усложнить верстку.

Для командной работы рекомендуется:

• Создать текстовые стили для часто используемых комбинаций (например, «Ссылка – подчёркнутая»).
• Документировать нестандартные решения в Notes к фреймам.
• Использовать Design Tokens, если проект поддерживает систему переменных.

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

Елена также отмечает, что в дизайн-системах она внедряет компоненты с преднастроенными подчёркиваниями. Например, компонент «Link» содержит текст и линию, объединённые в один фрейм с вариациями: default, hover, active.

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

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

Заключение

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

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

• Стандартное подчёркивание включается через Text Decoration в правой панели.
• Для кастомизации используйте ручные линии или плагины.
• Избегайте избыточного применения — подчёркивание должно быть осмысленным.
• Учитывайте совместимость при экспорте и передаче макетов разработчикам.
• Внедряйте компоненты и стили для обеспечения консистентности в проектах.