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

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

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

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

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

Откройте панель свойств справа. В разделе «Text» (или «Текст» в русской локализации) найдите группу кнопок с форматированием: жирный, курсив, подчёркнутый и — самое важное — зачёркнутый. Иконка зачёркивания выглядит как буква «T» с горизонтальной линией через неё. Щёлкните по ней один раз — и текст мгновенно получит зачёркивание.

Для более точного управления можно выделить не весь текст, а только его часть — например, одно слово в предложении. Figma позволяет применять зачёркивание к фрагментам текста, что особенно полезно при сравнении вариантов: «Удалённая функция» vs «Актуальная функция».

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

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

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

— Windows: Ctrl + Shift + 5
— Mac: Cmd + Shift + 5

Это особенно удобно при быстром редактировании — не нужно отводить взгляд от клавиатуры к панели свойств. Если сочетание не работает, проверьте настройки клавиш в Figma: перейдите в Help > Keyboard Shortcuts и убедитесь, что комбинация не переопределена другим плагином.

Использование текстовых стилей и шаблонов для зачёркивания

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

Чтобы создать стиль:

1. Выделите текст с зачёркиванием.
2. В панели свойств нажмите на значок «+» рядом с названием текущего стиля.
3. Назовите стиль, например: «Text — Strikethrough».
4. Сохраните.

Теперь вы можете применять этот стиль к любому текстовому слою одним кликом. Это особенно важно при работе с библиотеками компонентов: если вы зачёркнули текст в компоненте, и он используется в нескольких макетах — изменение стиля автоматически распространится на все экземпляры.

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

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

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

• Ошибка 1: Зачёркивание не отображается после экспорта. Причина — неправильный формат экспорта. В некоторых случаях (особенно при экспорте в JPG) Figma может «сжимать» текстовые эффекты. Решение: всегда экспортируйте в PNG, SVG или PDF.
• Ошибка 2: Зачёркивание применяется к всей группе, а не к тексту. Если вы выделили фрейм, содержащий текст, Figma не распознаёт его как текстовый слой. Решение: дважды кликните по тексту, чтобы войти в режим редактирования, затем примените зачёркивание.
• Ошибка 3: Использование зачёркивания вместо удаления текста. Это ведёт к «загрязнению» макета. Решение: если текст больше не актуален — скройте его (Alt+Click на глаз) или удалите. Зачёркивание — для временных правок, а не для хранения истории.
• Ошибка 4: Несовместимость с системами доступности. Зачёркнутый текст может быть нечитаем для людей с нарушениями зрения, если контраст недостаточен. Решение: используйте инструмент «Contrast Checker» в Figma или плагин «Stark» для проверки.

Экспорт и совместная работа: сохраняется ли зачёркивание?

Да, зачёркивание сохраняется при экспорте в PNG, SVG, PDF и даже в HTML-экспорт через плагины. Однако есть важное уточнение: Figma не экспортирует зачёркивание как отдельный CSS-стиль в HTML — он преобразуется в визуальную линию, наложенную поверх текста. Это значит, что при вёрстке по макету разработчику придётся вручную добавлять CSS-свойство text-decoration: line-through.

Для командной работы это особенно важно: если вы делитесь макетом через ссылку, все участники увидят зачёркнутый текст корректно — даже без установки Figma. Но если вы отправляете PDF, убедитесь, что в настройках экспорта выбрана опция «Embed fonts» — иначе текст может отобразиться неправильно на другом устройстве.

Продвинутые приёмы: зачёркивание с помощью компонентов и плагинов

Для сложных сценариев, где зачёркивание применяется к сотням текстовых элементов, можно использовать плагины. Например, плагин “Text Styles Manager” позволяет массово применять или убирать зачёркивание ко всем текстовым слоям с определённым стилем. Это особенно полезно при рефакторинге UI-компонентов.

Ещё один приём — использование компонентов с вариациями. Создайте компонент «Кнопка» с двумя вариантами: «Активна» и «Удалена». Во втором варианте примените зачёркивание к тексту. Теперь при переключении между вариантами в инспекторе вы мгновенно видите, как текст меняет статус — без ручного редактирования.

Также можно использовать «Overrides» для динамического изменения текста: например, в прототипе показать, как кнопка «Удалить» превращается в «Удалено» с зачёркиванием. Это создаёт живой эффект взаимодействия без кода.

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

• При демонстрации изменений в прототипе
• В макетах для согласования с заказчиком
• В документации по UI-паттернам
• Для обозначения устаревших функций в системе дизайна
• В A/B-тестах для визуального различения вариантов

Экспертное мнение: как правильно использовать зачёркивание в командах

Согласно практикам крупных продуктовых команд, зачёркивание — это не элемент интерфейса, а средство коммуникации. Его задача — ускорить принятие решений, а не загромождать интерфейс. Лучшая практика: использовать зачёркивание только в черновиках, а в финальных макетах — заменять его на скрытие, замену текста или визуальное выделение нового варианта.

Например, вместо «Удалённая кнопка» → «Удалено» с зачёркиванием, лучше сделать: «Удалённая кнопка» → «Новая кнопка: Сохранить» с другим цветом и иконкой. Это повышает ясность и соответствует принципам доступности.

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

Заключение

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

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

• Зачёркивание включается через панель свойств текста или сочетанием клавиш Ctrl/Cmd + Shift + 5.
• Всегда применяйте зачёркивание к текстовому слою, а не к группе или фрейму.
• Создавайте отдельные текстовые стили для зачёркнутого текста в системах дизайна.
• Экспортируйте в PNG, SVG или PDF — зачёркивание не сохраняется в JPG.
• Не оставляйте зачёркнутый текст в финальных макетах — это признак незавершённости.