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

В дизайне интерфейсов правильная типографика — это не просто эстетика, а важнейший элемент коммуникации. Особенно остро этот вопрос стоит при работе с длинными тире (—), которые часто путают с дефисом (-) или коротким тире (–). В Figma, как в одном из самых популярных инструментов для UI/UX-дизайна, отсутствие прямой кнопки для вставки длинного тире может вызывать затруднения у новичков и даже опытных специалистов. Однако существуют проверенные способы быстро и корректно поставить длинное тире, сохранив единый стиль текста.

Зачем нужно длинное тире: разница между знаками

Многие дизайнеры используют дефис вместо длинного тире, не видя в этом проблемы. Но с точки зрения типографики это грубая ошибка, которая снижает профессионализм проекта. Длинное тире (—) служит для обозначения диапазонов, вставных конструкций и перечислений. Его длина составляет примерно 1 em, что визуально отличает его от дефиса (-), предназначенного для соединения слов, и короткого тире (–), используемого в числовых диапазонах.

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

Figma не добавляет длинные тире автоматически, даже если вы копируете текст из Word или Google Docs. Это связано с тем, что Figma работает с «чистым» текстом, без сложной типографской обработки. Поэтому задача корректного оформления ложится на дизайнера. Понимание различий между знаками — первый шаг к профессиональному результату.

Способы вставки длинного тире в Figma

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

1. Горячие клавиши ОС. На Windows: зажмите Alt и наберите 0151 на цифровой клавиатуре. На macOS: Option + Shift + минус (на верхнем ряду клавиш). Этот способ самый быстрый, если вы работаете с текстом активно.
2. Копирование из буфера обмена. Заранее скопируйте длинное тире из любого источника (например, из этого текста: —) и вставляйте по мере необходимости. Подходит для разовой вставки.
3. Использование автозамены в текстовом редакторе. Настройте автозамену в системе: например, чтобы при вводе двух дефисов (—), автоматически вставлялось длинное тире. После этого скопированный текст будет содержать правильный символ.
4. Импорт текста из внешних источников. Если вы пишете контент в Google Docs, Notion или Word, где автозамена работает, экспортируйте текст в Figma через копирование. Убедитесь, что форматирование сохраняется.
5. Плагины для Figma. Некоторые плагины, такие как «Text Tools» или «Content Reel», позволяют вставлять специальные символы, включая длинное тире, через удобный интерфейс.

Пошаговый алгоритм: как вставить длинное тире на Windows

• Активируйте текстовый инструмент в Figma (T).
• Щёлкните по нужному месту и начните вводить текст.
• В момент, когда нужно поставить тире, зажмите клавишу Alt.
• На цифровой клавиатуре наберите 0151 (не отпуская Alt).
• Отпустите Alt — символ появится в тексте.

Как вставить на macOS

• Установите курсор в текстовом блоке Figma.
• Зажмите Option (Alt) и Shift одновременно.
• Нажмите клавишу минуса (рядом с Backspace).
• Отпустите клавиши — появится длинное тире.

Автоматизация и советы по эффективной работе

Работа с текстом в Figma может быть ускорена, если настроить процессы заранее. Особенно это актуально для команд, где важна единая типографская политика.

Первое, что стоит сделать — настроить автозамену на уровне операционной системы. В macOS: Системные настройки → Клавиатура → Текст → добавьте правило: заменять «—» на «—». В Windows: аналогично в параметрах ввода или через Microsoft Word (сервис-автозамена).

Второй вариант — создать шаблонный текстовый компонент в Figma. Создайте фрейм с часто используемыми фразами, содержащими длинное тире. Например: «от 10 000 до 50 000₽ — рассрочка 24 мес.». Сохраните как компонент, и используйте как заготовку.

Также полезно использовать переменные (Figma Variables) для динамических текстов. Хотя переменные пока не поддерживают автоподстановку символов, вы можете заранее подготовить значения с длинным тире и подставлять их в прототипы.

Пример: как настроить автозамену в Google Docs для последующего копирования в Figma

• Откройте Google Docs.
• Перейдите в «Инструменты» → «Настройки автозамены».
• Добавьте: » — » → » — » (с пробелами, если нужно).
• Напишите текст, где «—» автоматически заменится.
• Скопируйте и вставьте в Figma — символ сохранится.

Ошибки, которые нельзя делать

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

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

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

Третья — игнорирование проверки. Дизайнеры часто не замечают, какой именно символ они вставили. Увеличьте масштаб до 200–400%, чтобы визуально сравнить длину. Длинное тире должно быть明显 длиннее дефиса.

Четвёртая — надежда на Figma Auto Layout или Text Styles. Они не исправляют типографские ошибки автоматически. Даже если вы используете библиотеку компонентов, каждый символ должен быть проверен вручную.

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

• Увеличьте масштаб холста до 300%.
• Сравните символ с соседними буквами: он должен быть длиной с букву «м».
• Скопируйте символ и вставьте в текстовый редактор, поддерживающий Unicode (например, VS Code).
• Используйте онлайн-инструменты вроде whatsmychar.com — кликните по символу, и система покажет его код.

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

Мы поговорили с Дмитрием Петровым, руководителем дизайн-студии «Типо», которая специализируется на локализации интерфейсов.

Он также отметил, что крупные компании, такие как Яндекс и Тинькофф, имеют строгие гайдлайны по типографике, где указано: «использовать только длинное тире (U+2014) в текстах на русском языке». Это требование включено в дизайн-системы.

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

Заключение

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

• Используйте горячие клавиши: Alt+0151 (Windows), Option+Shift+Minus (macOS).
• Настройте автозамену в системе или текстовых редакторах для автоматической подстановки.
• Проверяйте вставленные символы в увеличенном масштабе.
• Избегайте двух дефисов и следите за отсутствием пробелов вокруг тире.
• Внедряйте проверку типографики в дизайн-ревью и используйте плагины для автоматизации.