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

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

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

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

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

Способ 1: Добавление линии поверх текста

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

1. Выберите текстовый блок, который нужно перечеркнуть.
2. Нажмите L (инструмент Line) или найдите его в панели слева.
3. Нарисуйте линию вручную над текстом — держите Shift, чтобы она была ровной.
4. Выделите и текст, и линию, затем нажмите Align Center в панели свойств (в разделе «Layout»).
5. Убедитесь, что линия находится на одном уровне с центром текста — используйте «Vertical Align» → «Center».
6. Настройте толщину линии: рекомендуется 1–2 пикселя, цвет — #B0B0B0 или #999999 для нейтрального вида.
7. Сгруппируйте текст и линию (Cmd/Ctrl + G), чтобы они двигались как единое целое.

Теперь, если вы измените размер шрифта, линия останется на месте — но не будет автоматически подстраиваться. Чтобы сделать её адаптивной, используйте компоненты.

Создание компонента для повторного использования

Если вы используете перечёркнутый текст часто — превратите его в компонент:

• Выделите сгруппированный текст и линию.
• Нажмите Cmd/Ctrl + Alt + K или кликните «Create Component» в панели свойств.
• Внутри компонента можно создать варианты (variants) — например, с разной толщиной линии или цветом.

Такой компонент можно использовать в любом месте макета — и при изменении одного экземпляра все остальные обновятся автоматически.

Как сделать линию тоньше или толще?

Не используйте толщину больше 2 пикселей — это нарушает визуальную иерархию. Для акцентных случаев (например, в рекламных баннерах) можно применить 2,5 пикселя, но только если основной текст крупный (24+). Для мелкого текста (12–16) — всегда используйте 1 пиксель.

Способ 2: Использование плагинов для перечёркивания

Для тех, кто хочет автоматизировать процесс, существуют плагины, имитирующие поведение CSS-свойства text-decoration: line-through.

Самый популярный — Text Decorator. Установите его через меню Plugins → Browse Plugins и введите в поиске «Text Decorator».

После установки:

1. Выделите текстовый слой.
2. Запустите плагин: Plugins → Text Decorator → Add Strikethrough.
3. Плагин автоматически добавит линию с правильной высотой, толщиной и цветом, основанным на текущем стиле текста.
4. Вы можете настроить цвет, толщину и позицию линии в панели плагина.

Плюсы:
— Автоматическое выравнивание по центру текста;
— Поддержка разных шрифтов и размеров;
— Возможность сохранить настройки как preset.

Минусы:
— Зависимость от плагина — если его не будет, линия останется как отдельный элемент;
— Не работает в режиме «Design System» без предустановки плагина у всех участников команды.

Способ 3: Экспорт со стилями CSS (для разработчиков)

Если вы работаете в команде с разработчиками, а не просто создаёте макет — лучше не перечёркивать текст в Фигме вообще. Вместо этого:

• Укажите в комментариях к слою: «Применить text-decoration: line-through;»
• Используйте систему стилей (Style Guide) в Фигме, где вы задаёте классы для текста, например: .strike-through
• Экспортируйте дизайн в Figma Dev Mode — разработчики увидят CSS-код, включая декорации.

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

Как настроить CSS-стили в Фигме

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

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

• Ошибка 1: Линия не выровнена по центру. Результат — выглядит как опечатка. Решение: Всегда используйте Align Center и проверяйте с помощью «Show Layout Grid».
• Ошибка 2: Толстая линия (3+ пикселя). Результат — визуальный шум. Решение: Линия должна быть тоньше, чем сам текст.
• Ошибка 3: Перечёркнутый текст в одном блоке с обычным — без визуального разделения. Решение: Используйте отступы или фоновые блоки, чтобы избежать визуальной путаницы.
• Ошибка 4: Использование перечёркивания для акцента (например, «супер-скидка»). Решение: Перечёркивание — не для выделения, а для отмены. Для акцента используйте жирный шрифт или цвет.

Проверьте макет в режиме «Preview» (Cmd/Ctrl + Shift + P) — если перечёркнутый текст кажется «размытым» или «плавающим» — значит, линия не точно выровнена.

Лучшие практики: когда и как применять перечёркивание

Не используйте перечёркивание без причины. Вот когда оно уместно:

• Сравнение старой и новой цены в e-commerce;
• Отключение функций в настройках приложения;
• Отменённые услуги в тарифных планах;
• Устаревшие термины в документации (например, «Платный доступ» → «Бесплатно»).

А вот когда — нет:

• Для выделения важного текста — используйте жирный шрифт или цвет;
• В заголовках H1–H3 — перечёркивание нарушает иерархию;
• На кнопках — это вводит в заблуждение: пользователь может подумать, что кнопка неактивна, а не что её функция отменена.

Для доступности: убедитесь, что перечёркнутый текст остаётся читаемым при включённом режиме высокой контрастности. Проверяйте в инструментах типа Stark или Lighthouse.

Экспертное мнение: как правильно использовать перечёркнутый текст

«Я работал над проектом для крупного ритейлера, где 40% текста на странице было перечёркнуто — и это было катастрофой. Пользователи не понимали, что именно отменено, и теряли ориентацию. Мы переработали подход: теперь перечёркивание используется только для цен, и только в паре с ярким цветом новой цены. Также мы добавили микро-анимацию при наведении — линия плавно исчезает, показывая, что цена изменилась. Это увеличило конверсию на 17%.

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

— Дмитрий Петров, UX-директор, более 12 лет в e-commerce, консультировал Wildberries, Ozon, СберМаркет.

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

Заключение

Перечёркнутый текст — это не просто линия над словом. Это мощный визуальный инструмент, который влияет на восприятие, доверие и поведение пользователя. В Фигме его можно создать двумя основными способами: вручную с помощью линии (надёжно, универсально) или через плагины (быстро, но зависимо). Выбор зависит от вашего рабочего процесса: если вы работаете в одиночку — используйте ручной метод. Если вы в команде с разработчиками — передавайте семантику через CSS-комментарии.

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

• Используйте линию толщиной 1–2 пикселя, выровненную по центру текста.
• Создавайте компоненты для повторного использования — это экономит время.
• Не применяйте перечёркивание для акцента или заголовков — это нарушает иерархию.
• Для разработчиков — передавайте стили через CSS, а не визуальные линии.
• Проверяйте доступность: текст должен оставаться читаемым при высоком контрасте.