Если вы когда-нибудь верстали текст в Figma и задумывались, почему ваши кавычки выглядят как два невзрачных штриха, а не как изящные «ёлочки» — вы не одиноки. Типографская точность отличает профессиональный дизайн от любительского, а правильные кавычки — это не прихоть перфекциониста, а стандарт качественной вёрстки. В этой статье вы получите исчерпывающую инструкцию по работе с кавычками-ёлочками в Figma: от быстрых горячих клавиш до настройки автоматической типографики. Никаких лишних движений — только конкретные решения для тех, кто ценит своё время и репутацию.
Способы вставки кавычек-ёлочек в Figma
Существует несколько рабочих методов вставки кавычек-ёлочек в Figma, и выбор конкретного зависит от вашего workflow и частоты использования. Первый и самый очевидный — прямое копирование символов « и » из внешнего источника. Второй — использование горячих клавиш операционной системы. Третий — вставка через Unicode-коды. Четвёртый — применение плагинов для автоматической типографики.
Копирование из внешних источников работает безотказно: вы можете держать текстовый файл с нужными символами или использовать онлайн-таблицы спецсимволов. Метод примитивен, но надёжен, особенно если вы работаете с редкими типографскими знаками. Минус — постоянное переключение между приложениями замедляет работу.
Горячие клавиши — более элегантное решение для тех, кто привык работать без отрыва рук от клавиатуры. В macOS для открывающей кавычки используйте Option + Shift + ←, для закрывающей — Option + Shift + →. В Windows комбинация сложнее: нужно удерживать Alt и набрать на цифровой клавиатуре код 0171 для «, и 0187 для ». Важный момент: в Windows это работает только с включённой NumLock и на полноценной цифровой клавиатуре.
| Операционная система | Открывающая кавычка « | Закрывающая кавычка » |
| macOS | Option + Shift + ← | Option + Shift + → |
| Windows | Alt + 0171 (на цифровой клавиатуре) | Alt + 0187 (на цифровой клавиатуре) |
| Linux (зависит от раскладки) | AltGr + [ или композитные клавиши | AltGr + ] или композитные клавиши |
Unicode-коды — универсальный метод, который работает независимо от раскладки клавиатуры. В Figma можно вставить символ через системные средства: открывающая кавычка имеет код U+00AB, закрывающая — U+00BB. На практике это означает, что вы можете использовать специальные панели символов вашей операционной системы.
Плагины для Figma, такие как Typograf или Russian Typograph, автоматизируют процесс замены прямых кавычек на типографские. Это спасение для больших объёмов текста, но требует установки и базовой настройки. Плагины также заменяют дефисы на тире, неразрывные пробелы и другие типографские элементы — полезно для финальной обработки макетов.
Анна, старший дизайнер интерфейсов
Помню свой первый проект для издательства — брендбук с кучей цитат. Я тогда вставляла обычные кавычки и не понимала, почему арт-директор постоянно отправляет макеты на доработку. Оказалось, проблема в «компьютерных» кавычках вместо типографских ёлочек. После этого я настроила горячие клавиши и установила плагин для автозамены. Теперь это рефлекс — как только вижу прямые кавычки в чужих макетах, сразу понимаю уровень исполнителя. Детали решают всё.
Горячие клавиши для быстрой вставки кавычек в Figma
Работа с горячими клавишами — признак зрелого специалиста, который не тратит время на поиск символов в меню. Однако есть нюансы, которые зависят от вашей операционной системы и языковой раскладки. Figma как веб-приложение полагается на системные комбинации, поэтому важно настроить их корректно.
На macOS процесс максимально прямолинеен. Переключитесь на русскую раскладку, установите курсор в текстовое поле и используйте:
- Option + Shift + ← для открывающей кавычки «
- Option + Shift + → для закрывающей кавычки »
Эти комбинации работают в любых приложениях, включая браузерную и десктопную версии Figma. Преимущество macOS — консистентность поведения независимо от программы.
В Windows ситуация сложнее. Стандартный метод требует цифровой клавиатуры с включённым NumLock:
- Удерживая Alt, наберите 0171 на цифровой клавиатуре — получите «
- Удерживая Alt, наберите 0187 на цифровой клавиатуре — получите »
Проблема в том, что многие ноутбуки не имеют отдельной цифровой клавиатуры. В таких случаях можно использовать экранную клавиатуру или настроить пользовательские комбинации через сторонние утилиты вроде AutoHotkey. Вот пример простого скрипта для AutoHotkey:
^!9::Send, «
^!0::Send, »
Этот скрипт назначает Ctrl + Alt + 9 для открывающей кавычки и Ctrl + Alt + 0 для закрывающей. Установите AutoHotkey, сохраните скрипт в файл с расширением .ahk и запустите его — комбинации будут работать во всех приложениях.
Закрывающая »: Option + Shift + →
Закрывающая »: Alt + 0187
(требуется NumLock)
Обычно: Compose + < + < для «
Compose + > > для »
Linux-пользователи могут настроить композитные клавиши (Compose key) через системные настройки клавиатуры. Обычно последовательность Compose + < + < даёт «, а Compose + > + > даёт ». Точное поведение зависит от дистрибутива и настроек раскладки.
Важный момент: если вы часто переключаетесь между языками, убедитесь, что комбинации не конфликтуют с системными шорткатами. В macOS можно проверить это в Системных настройках → Клавиатура → Сокращения.
Вставка кавычек-ёлочек через спецсимволы Figma
Figma не имеет встроенной панели спецсимволов, в отличие от профессиональных издательских пакетов. Это осознанное решение разработчиков — инструмент позиционируется как UI/UX-редактор, а не как система вёрстки для полиграфии. Тем не менее, существует несколько обходных путей для вставки специальных символов без переключения между приложениями.
Первый способ — использование системной панели эмодзи и символов. На macOS вызовите её комбинацией Control + Command + Пробел. В появившемся окне переключитесь на вкладку с символами и найдите раздел пунктуации. Там будут доступны все типографские кавычки: ёлочки, лапки, английские двойные и одинарные.
В Windows аналогичная функция доступна через Win + . (точка), но панель больше ориентирована на эмодзи. Для полноценной работы со спецсимволами лучше использовать приложение «Таблица символов» (charmap.exe), которое можно запустить через поиск Windows. Найдите нужный символ, скопируйте его и вставьте в Figma обычным Ctrl + V.
Второй способ — создание собственной библиотеки символов прямо в Figma. Создайте отдельную страницу или фрейм с текстовыми блоками, содержащими часто используемые спецсимволы: кавычки, тире, неразрывные пробелы, символы валют. Сохраните этот фрейм как компонент и добавьте в свою библиотеку. Теперь вы сможете быстро копировать нужные символы, не покидая Figma.
Третий способ — использование расширений браузера для быстрой вставки символов. Расширения вроде «Unicode Character Inserter» или «Special Characters» добавляют иконку в панель браузера, при клике на которую открывается панель с категоризированными спецсимволами. Выберите нужный символ, он автоматически скопируется в буфер обмена, и вы сможете вставить его в Figma.
Четвёртый вариант — создание текстового сниппета или шаблона в вашем текстовом редакторе. Если вы часто готовите контент для дизайна во внешних редакторах, настройте автозамену: при вводе определённой последовательности символов (например, <<) редактор автоматически заменит её на «. Это работает в Microsoft Word, Google Docs, Notion и других инструментах работы с текстом.
Дмитрий, фриланс-дизайнер
Клиент попросил адаптировать макет презентации для печати в типографии. Я отправил файлы, через день — звонок: «У вас везде неправильные кавычки, типография требует переделать». Пришлось пройтись по всем 47 слайдам вручную, заменяя " на «. С тех пор я держу в Figma отдельный фрейм с типографскими символами и использую плагин Typograf для финальной проверки. На исправление ушло четыре часа — теперь эта ошибка стоит мне дороже, чем я получил за весь проект.
Настройка типографики для автоматических кавычек
Автоматизация типографики — признак профессионального подхода к работе с текстом. К сожалению, Figma не предлагает встроенных средств для автоматической замены прямых кавычек на типографские при вводе текста. Это принципиальное отличие от InDesign или QuarkXPress, где подобные функции встроены в ядро программы. Однако существуют плагины и внешние инструменты, которые решают эту задачу.
Самое популярное решение — плагин Typograf от Студии Артёма Лебедева. Он анализирует текст в выбранных слоях и применяет правила русской типографики: заменяет дефисы на тире, расставляет неразрывные пробелы, исправляет кавычки. Установите плагин через Community, выделите текстовые слои и запустите обработку. Плагин работает пакетно, что экономит время при больших объёмах текста.
Альтернатива — плагин Russian Typograph, который предлагает более гибкие настройки. Вы можете выбрать, какие именно правила применять: только кавычки, только тире или полный набор. Это полезно, если у вас специфические требования к оформлению или вы работаете с текстами, где автозамена может навредить (например, программный код или технические спецификации).
| Плагин | Основная функция | Гибкость настроек | Скорость работы |
| Typograf | Полная типографика по правилам Лебедева | Низкая (применяет все правила) | Быстрая (пакетная обработка) |
| Russian Typograph | Выборочная типографика с настройками | Высокая (гибкие правила) | Средняя |
| Text Replacer | Замена по пользовательским шаблонам | Максимальная (свои правила) | Зависит от объёма |
Если вы предпочитаете контроль над процессом, используйте плагин Text Replacer. Он позволяет создать собственные правила замены: например, заменить все вхождения символа " в начале слова на «, а в конце — на ». Это требует базового понимания регулярных выражений, но даёт максимальную гибкость.
Для тех, кто работает с контентом из внешних источников, рациональный подход — обрабатывать текст до импорта в Figma. Используйте онлайн-сервисы типографики (typograf.ru, artlebedev.ru/typograf) или десктопные редакторы с функцией автозамены. Подготовленный текст вставляйте в Figma уже с правильными символами.
Ещё одна стратегия — настройка текстовых стилей с примером правильного оформления. Создайте в Figma набор текстовых стилей (Text Styles), где образцы текста уже содержат правильные кавычки, тире и другие типографские элементы. Когда дизайнеры в команде применяют эти стили, они видят правильное оформление и подсознательно воспроизводят его при ручном вводе текста.
Профессиональный совет: если вы руководите дизайн-командой, внесите требования к типографике в ваш style guide. Укажите, какие символы должны использоваться, как проверять их наличие и какие плагины применять перед передачей макетов в работу. Это исключит ситуации, когда на финальной стадии обнаруживается, что весь проект нужно перепроверять и править вручную.
Решение проблем с отображением кавычек в проектах Figma
Даже при правильной вставке кавычек-ёлочек могут возникать проблемы с их отображением. Причины разнообразны: от отсутствия нужных глифов в выбранном шрифте до багов рендеринга в браузерных версиях Figma. Понимание природы этих проблем позволяет быстро находить решения и не тратить время на бесполезные эксперименты.
Первая и самая частая проблема — шрифт не содержит символов кавычек-ёлочек. Многие западные шрифты, особенно бесплатные из Google Fonts, не включают полную поддержку кириллических типографских знаков. Проверьте это, вставив кавычки в текст — если вместо них отображается квадратик, крестик или знак вопроса, значит, глиф отсутствует в шрифте.
Решение: смените шрифт на тот, который гарантированно поддерживает расширенную кириллицу. Безопасные варианты — PT Sans, PT Serif, Roboto (с кириллическим набором), Open Sans, Montserrat. Все они содержат полный набор типографских знаков. Если же вы обязаны использовать конкретный фирменный шрифт без поддержки ёлочек, выход — создать собственный глиф или использовать fallback-шрифт только для кавычек (это технически сложно и требует экспорта в код).
Вторая проблема — кавычки отображаются в Figma, но теряются при экспорте. Это случается при экспорте в PNG или JPG, когда выбраны неправильные настройки кодировки, или при копировании CSS-кода через встроенный инспектор. Причина может крыться в конфликте Unicode-представлений или в багах конкретной версии Figma.
Решение: при экспорте растровой графики используйте максимальное качество и проверяйте результат. Для векторного экспорта в SVG включите опцию «Outline text» — это преобразует текст в кривые, и проблемы с отсутствующими глифами исчезнут (правда, текст станет нередактируемым). При копировании кода используйте не встроенный инспектор, а специализированные плагины вроде «HTML to Figma» или копируйте текст напрямую из текстового слоя.
Третья проблема — различия в отображении между браузерной и десктопной версиями Figma. Браузерная версия полагается на системный рендеринг шрифтов, который может по-разному обрабатывать спецсимволы в зависимости от операционной системы и настроек браузера. Десктопная версия использует собственный движок рендеринга, что даёт более предсказуемые результаты.
Решение: если вы замечаете несоответствия, переключитесь на десктопную версию Figma для финальной проверки и экспорта. Убедитесь, что у всех членов команды установлены одинаковые версии приложения — это предотвратит ситуации, когда один дизайнер видит кавычки корректно, а другой — нет.
Четвёртая проблема — кавычки не распознаются поисковыми системами или системами переводов при экспорте проектов в HTML. Некоторые старые парсеры или CMS могут неправильно интерпретировать Unicode-символы, заменяя их на entity-коды или искажая. Это особенно актуально при передаче макетов разработчикам.
Решение: в технических заданиях явно указывайте, что используются типографские кавычки (U+00AB и U+00BB), и договоритесь с разработчиками о методе их обработки. В современных фреймворках (React, Vue, Angular) проблем возникать не должно, но если вы работаете с легаси-кодом, может потребоваться явная замена символов на HTML-entities: « для « и » для ».
Пятая проблема — кавычки выглядят слишком мелкими или плохо различимыми при определённых начертаниях шрифтов. Тонкие шрифты (Thin, Light) могут делать типографские кавычки почти незаметными, особенно в мелких кеглях. Это ухудшает читаемость и визуальный баланс текста.
Решение: если вы работаете с тонкими начертаниями, рассмотрите возможность увеличения кегля кавычек через OpenType-функции (если шрифт их поддерживает) или замените их на лапки („"), которые визуально более заметны. Ещё вариант — использовать более насыщенное начертание для всего текста или создать стилистическую альтернативу с жирными акцентами на пунктуации.
Шестая проблема — конфликты при совместной работе в команде. Если дизайнеры используют разные операционные системы и методы вставки кавычек, могут возникать ситуации, когда один и тот же текст содержит смесь правильных и неправильных символов. Это создаёт визуальную несогласованность и усложняет финальную проверку.
Решение: стандартизируйте процесс на уровне команды. Выберите один метод (например, плагин Typograf) и используйте его перед каждым коммитом изменений. Настройте автоматические проверки в плагинах вроде Design Lint, которые подсвечивают текстовые слои с неправильной типографикой. Проводите периодические аудиты проектов — лучше обнаружить проблему на ранней стадии, чем исправлять её перед релизом.
И наконец, специфическая проблема для пользователей Windows на ноутбуках без цифровой клавиатуры: невозможность использовать стандартные Alt-коды. Это физическое ограничение, которое не решить программно без дополнительных инструментов.
Решение: используйте экранную клавиатуру Windows (её можно вызвать через Пуск → Специальные возможности), установите AutoHotkey со скриптами замены, или переключитесь на метод копирования из заранее подготовленной библиотеки символов в Figma. Последний вариант наиболее практичен для регулярной работы.
Типографская грамотность — это не педантизм, а профессиональная гигиена дизайнера. Правильные кавычки-ёлочки, осознанный выбор тире, расстановка неразрывных пробелов — всё это сигналы о том, что автор макета понимает контекст использования своей работы. Figma не предлагает автоматических решений из коробки, но арсенал инструментов — от горячих клавиш до плагинов — позволяет решить задачу эффективно. Освойте эти методы, внедрите их в рабочий процесс и закрепите документально в стандартах команды. Это сэкономит часы на правках и укрепит вашу репутацию как специалиста, который учитывает детали. Потому что именно детали отличают хорошую работу от посредственной 🎯
