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

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

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

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

Представьте, что вы проектируете страницу подписки. Пользователь видит старую цену 999₽, зачёркнутую, и рядом — новую 699₽. Без зачёркивания он может не заметить разницу, а с ним — сразу понимает выгоду. Это снижает когнитивную нагрузку и повышает конверсию. В дизайне продуктов, где важна точность и прозрачность, зачёркивание — это стандарт, а не опция.

Как сделать зачеркнутый текст в Figma: пошаговая инструкция

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

1. Выберите текстовый слой, который нужно зачеркнуть. Кликните по нему в области Layers или на холсте.
2. В правой панели свойств найдите секцию Text. Она находится ниже параметров шрифта, размера и цвета.
3. Найдите иконку с линией, перечёркивающей букву «T» — это кнопка Strikethrough.
4. Кликните по ней один раз — текст сразу получит зачёркивание. Кликните снова — эффект отключится.

Если вы не видите кнопку «Strikethrough», убедитесь, что вы выбрали именно текстовый слой, а не группу, фрейм или фигуру. Также проверьте, что вы используете актуальную версию Figma — функция доступна с 2021 года и поддерживается во всех платформах: Windows, macOS и вебе.

Как зачеркнуть только часть текста?

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

1. Выделите нужное слово или фразу в текстовом поле.
2. Скопируйте его (Ctrl+C / Cmd+C).
3. Создайте новый текстовый слой (Ctrl+T / Cmd+T).
4. Вставьте скопированный фрагмент (Ctrl+V / Cmd+V).
5. Примените к нему зачёркивание.
6. Совместите оба слоя по горизонтали и вертикали, используя Align tools.
7. Сгруппируйте их (Ctrl+G / Cmd+G), чтобы сохранить структуру.

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

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

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

• Использование зачёркивания как основного способа передачи информации. Если вы зачёркиваете цену, но не указываете новую — пользователь не поймёт, что произошло. Всегда добавляйте контекст: «Устаревшая цена», «Теперь: 599₽».
• Слишком толстая линия зачёркивания. Figma использует стандартную толщину линии, соответствующую шрифту. Если вы используете нестандартные шрифты (например, Handwritten или Display), линия может выглядеть неаккуратно. Проверяйте в режиме Preview (Ctrl+P).
• Зачёркивание в неправильном цвете. Часто дизайнеры оставляют зачёркнутый текст чёрным, хотя он должен быть серым. Это нарушает иерархию и создаёт визуальный шум. Рекомендуемый цвет: #757575 или #9E9E9E.
• Неудачное позиционирование. Если зачёркнутый текст расположен рядом с другим элементом, линия может пересекать соседние объекты. Используйте padding или выравнивание по базовой линии (baseline).

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

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

• Рисование линии вручную. Используйте инструмент Line (L), настройте толщину 1–2 пикселя, цвет — в тон текста. Разместите линию поверх текста. Минус: не адаптируется под изменение размера шрифта, требует ручной настройки.
• Плагины типа “Text Styler” или “Super Plugin”. Некоторые плагины позволяют применять стили к фрагментам текста. Но они не стабильны, могут ломаться после обновлений Figma и не поддерживаются официально.
• Использование SVG-символов. Можно вставить SVG-линию с текстом, но это усложняет поддержку и делает макет неподдерживаемым для разработчиков.

Лучшие практики использования зачёркнутого текста

Чтобы зачёркнутый текст работал эффективно, следуйте этим рекомендациям:

• Цвет и контраст. Используйте цвет с контрастностью не менее 4.5:1 относительно фона. Серый #757575 на белом — идеально. Избегайте красного — он ассоциируется с ошибкой, а не с устареванием.
• Сочетание с иконками. Добавьте рядом иконку «отмена» (×) или «пенал» — это усиливает восприятие. Особенно важно для мобильных интерфейсов.
• Анимация. При прототипировании добавьте анимацию появления зачёркивания — это помогает продемонстрировать изменение состояния. Используйте Smart Animate в Figma.
• Семантика в названиях. Называйте слои не как «Текст 1», а как «Цена_зачёркнутая» — это упрощает работу команды разработчиков.
• Тестирование на доступность. Протестируйте макет с помощью Figma’s Accessibility Checker (в меню View → Accessibility). Убедитесь, что зачёркнутый текст читается screen reader’ами.

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

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

Исследование Google UX Lab показало, что пользователи, видящие зачёркнутые элементы, быстрее принимают решения на 27% по сравнению с теми, кто видит только изменённые значения без контекста. Это особенно критично в e-commerce, финтехе и SaaS-продуктах.

Часто задаваемые вопросы

Заключение

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

Используйте зачёркивание осознанно: сочетайте его с цветом, контекстом и семантикой. Не превращайте его в декорацию. Помните: каждый визуальный элемент в интерфейсе должен не просто «выглядеть красиво», а помогать пользователю принимать решения.

• Зачёркивание в Figma доступно через панель свойств текста — никаких плагинов не нужно.
• Для частичного зачёркивания используйте два текстовых слоя и группировку.
• Цвет зачёркнутого текста должен быть серым, а не чёрным, чтобы не нарушать иерархию.
• Всегда сочетайте зачёркивание с контекстом — новой ценой, статусом или пояснением.
• Тестируйте макеты на доступность — зачёркнутый текст должен быть читаемым для screen reader’ов.