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

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

Почему в Figma нет прямой кнопки «Подчеркнуть»?

Figma позиционирует себя как инструмент для дизайна интерфейсов, а не для типографики в классическом понимании. Его фокус — на гибкости, совместной работе и адаптивности, а не на воспроизведении всех функций текстовых редакторов. В отличие от Adobe XD или Canva, где подчеркивание доступно через панель, в Figma разработчики намеренно оставили эту функцию за пределами базового интерфейса. Причина проста: в веб-дизайне подчеркивание часто используется как стилистический элемент, а не как стандартное форматирование. Например, ссылки в современных интерфейсах могут подчеркиваться только при наведении, или вообще не подчеркиваться — вместо этого используется изменение цвета или анимация. Figma позволяет дизайнеру контролировать каждую деталь, а не применять шаблонные решения.

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

Способ 1: Использование прямоугольника

Это самый простой и распространённый способ. Он подходит, если вам нужно подчеркнуть один или несколько отдельных слов, а не весь блок текста.

1. Выделите текстовый слой, который нужно подчеркнуть.
2. Перейдите в панель инструментов слева и выберите инструмент Прямоугольник (R).
3. Нарисуйте тонкий прямоугольник под текстом. Рекомендуемая толщина — от 1 до 2 пикселей, в зависимости от размера шрифта.
4. Установите цвет линии в соответствии с цветом текста или стилем ссылки (например, #0066CC для синих ссылок).
5. Включите режим Привязки (Alt + клик или Shift для привязки к центру) и выровняйте прямоугольник по нижнему краю текста.
6. Используйте Alt + стрелки для мелкой настройки позиции — смещение на 0,5–1 пиксель может кардинально изменить визуальное восприятие.

Чтобы ускорить процесс, после создания одного подчеркивания скопируйте его (Ctrl+C → Ctrl+V) и перетащите на другие текстовые элементы. Не забудьте привязать его к тексту с помощью Auto Layout или Constraints, если текст будет меняться в размерах.

Как точно выровнять линию по нижней границе текста

1. Включите режим Show Layout Grid в правой панели (View → Show Layout Grid).
2. Перейдите в режим Inspect и посмотрите значение Baseline Offset — это расстояние от нижней границы текстового слоя до базовой линии.
3. Сместите прямоугольник на это значение вниз — например, если Baseline Offset = 4px, переместите линию на 4px вниз относительно текста.
4. Используйте Smart Guides (включены по умолчанию) — при приближении к тексту Figma покажет синюю линию привязки.

Способ 2: Применение границы текста

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

1. Выделите текстовый слой.
2. Нажмите Ctrl+Shift+G — это группирует текст в контейнер.
3. В панели свойств найдите раздел Stroke (Граница).
4. Установите толщину границы — 1–2 px.
5. В настройках границы выберите Bottom (только нижняя сторона).
6. Убедитесь, что граница находится внутри (Inside) — иначе линия будет выходить за пределы текста.

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

Способ 3: Создание стилей и компонентов

Для профессиональной работы в командах или при разработке дизайн-системы лучший способ — создать компонент с подчеркиванием. Это позволяет использовать его как шаблон в нескольких местах и легко обновлять стили в одном месте.

1. Создайте текстовый слой с нужным текстом (например, «Ссылка»).
2. Добавьте подчеркивание одним из вышеописанных способов (прямоугольник или граница).
3. Выделите и текст, и подчеркивание.
4. Нажмите Ctrl+Alt+K или кликните правой кнопкой → Create Component.
5. В панели компонентов дайте название — например, «Link — Underlined».
6. Теперь вы можете дублировать этот компонент в любом месте проекта.

Чтобы улучшить управление, создайте отдельную библиотеку стилей, где хранятся:
— Компоненты ссылок с подчеркиванием
— Компоненты без подчеркивания
— Варианты подчеркивания: сплошное, пунктирное, двойное

Вы можете экспортировать эти компоненты в библиотеку Figma Community и делиться ими с командой. Также можно использовать Style Libraries для хранения цветов и текстовых стилей, чтобы подчеркивание всегда соответствовало фирменному стилю.

Частые ошибки и как их избежать

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

• Подчеркивание слишком толстое — линия в 3+ px выглядит как черта, а не подчеркивание. Оптимально — 1–2 px.
• Линия не выровнена по базовой линии — если подчеркивание находится слишком высоко, оно пересекает нижние части букв («g», «y», «p»). Проверяйте с помощью сетки и показа baseline.
• Использование текста с подчеркиванием в заголовках — в современном UI подчеркивание в заголовках снижает читаемость. Лучше использовать жирный шрифт или цвет.
• Неправильный цвет подчеркивания — не используйте чёрный, если текст серый. Подчеркивание должно быть в той же цветовой палитре, что и текст.
• Отсутствие состояний — если подчеркивание используется для ссылок, создайте состояния: «обычное», «наведение», «активное». Это делает прототип реалистичнее.

Если вы работаете с международной командой, всегда проверяйте, как выглядит подчеркивание в разных шрифтах. Например, в шрифте Montserrat нижняя часть букв «y» и «j» выступает дальше, чем в Open Sans. Это может вызвать визуальное несоответствие.

Экспертное мнение: как подчеркивание влияет на UX

Подчеркивание — это не просто визуальный элемент. Оно влияет на восприятие, доверие и поведение пользователя.

«В 2024 году, согласно исследованиям NNGroup, пользователи быстрее распознают ссылки, если они подчёркнуты и синие — но только в контексте традиционных веб-интерфейсов. В мобильных приложениях подчеркивание воспринимается как устаревший элемент. Если вы проектируете для iOS или Android, лучше использовать цветовую индикацию и микроанимацию при наведении. Подчеркивание оправдано только в документах, формах и образовательных материалах, где пользователь ожидает классического форматирования.»

— Марина Волкова, UX-исследователь, автор курса «Типографика в цифровых продуктах»

Это значит: не используйте подчеркивание просто потому, что «так всегда делали». Оно должно служить цели. Если вы подчёркиваете ключевое слово в инструкции — это помогает. Если вы подчёркиваете кнопку в мобильном приложении — это может ввести пользователя в заблуждение, заставив его думать, что это текстовая ссылка.

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

Заключение

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

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

• В Figma нет встроенной функции подчеркивания — используйте прямоугольник, границу или компоненты.
• Всегда выравнивайте подчеркивание по базовой линии текста, а не по нижней границе слоя.
• Создавайте компоненты для повторного использования — это экономит время в командах.
• Избегайте подчеркивания в мобильных интерфейсах — используйте цвет и анимацию.
• Проверяйте соответствие подчеркивания стандартам Material Design и Apple HIG.