Как поставить кавычки в фигме

В Figma поставить кавычки можно так же, как и в любом текстовом редакторе — с помощью клавиатуры. Главное — находиться в режиме редактирования текста и использовать правильные символы: прямые («) или типографские («» или „“). Для точного контроля над видом кавычек рекомендуется вручную вводить нужные знаки или вставлять их через специальные сочетания клавиш.

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

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

Как вставить кавычки в Figma

Чтобы добавить кавычки в Figma, необходимо использовать текстовый инструмент. Выберите его на панели слева (иконка «T») или нажмите клавишу T на клавиатуре. После этого кликните по рабочему полю — появится курсор, и вы сможете вводить текст. Кавычки вводятся стандартным образом: нажатием клавиши с двойной кавычкой (Shift + 2 на большинстве русскоязычных раскладок).

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

Однако здесь есть подводный камень: Figma не изменяет содержимое текста автоматически. Если вы скопировали текст с типографскими кавычками («ёлочками»), они сохранятся. Но если вы печатаете вручную, по умолчанию будут ставиться прямые кавычки («). Это может быть нежелательно для финального дизайна, особенно в печатных или публикуемых материалах.

• Активируйте текстовый инструмент (T).
• Кликните по холсту или выберите существующий текст.
• Начните печатать или вставьте текст из буфера обмена.
• Используйте Shift+2 для прямых кавычек.

Пошаговая инструкция: как вставить типографские кавычки

Если вы хотите использовать типографские кавычки («ёлочки»), вот несколько проверенных способов:

1. Скопируйте извне: Откройте любой текстовый редактор (например, Google Docs или Word), введите «кавычки», скопируйте их и вставьте в Figma.
2. Используйте сочетания клавиш: На Mac — Option+[ и Option+] для « и ». На Windows — Alt+0147 и Alt+0148 на цифровой клавиатуре.
3. Вставьте через таблицу символов: На Windows — Win+; (панель эмодзи), выберите кавычки. На Mac — Edit → Emoji & Symbols.
4. Настройте раскладку: Используйте раскладки вроде «Русская традиционная» или сторонние утилиты (например, Ukelele для Mac).

Виды кавычек и их использование

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

Для русского языка стандартом являются кавычки-ёлочки («такие»). Они соответствуют ГОСТ Р 7.0.5–2008 и рекомендованы РАН. В то время как прямые кавычки («такие») считаются упрощённым вариантом и чаще применяются в цифровых интерфейсах, где важна скорость набора.

Когда какие кавычки использовать?

• «Ёлочки» — для заголовков, цитат, акцентов в русскоязычных интерфейсах.
• “Лапки” — в англоязычных проектах, особенно при работе с американскими клиентами.
• Прямые (» «) — в коде, плейсхолдерах, временных макетах.
• Одинарные — для цитат внутри кавычек: «Он сказал: ‘Привет’ и ушёл».

Автоматическая замена и профилактика ошибок

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

Первый — использовать плагины. Например, »Text Tools» или »Content Replacer» позволяют настраивать правила замены текста во всём документе. Вы можете задать правило: заменять » на « при экспорте или при ручном запуске.

Второй способ — настройка шрифта. Некоторые современные шрифты (например, Inter, SF Pro, Roboto) поддерживают OpenType-функции, включая smart quotes. При включении этой функции в Figma (через панель свойств текста → More → OpenType) прямые кавычки автоматически заменяются на типографские.

Как включить OpenType-замены в Figma

1. Выделите текстовый объект.
2. В правой панели найдите раздел «Text».
3. Нажмите «More» (три точки).
4. Выберите «OpenType».
5. Активируйте опцию «Smart Quotes».

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

Работа с локализацией и многоязычными текстами

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

• В немецком используют „Anführungszeichen“ (нижние кавычки).
• В французском — «guillemets» с неразрывными пробелами: « texte ».
• В японском — 「鉤括弧」 или “”。

Figma позволяет свободно работать с Unicode, поэтому вы можете вставлять любые символы. Главное — обеспечить поддержку шрифтом. Не все шрифты содержат глифы для всех языков, что может привести к отображению «tofu» (квадратиков).

Советы по управлению текстом в командах

• Создайте текстовые стили для заголовков, цитат и кнопок с правильными кавычками.
• Добавьте в дизайн-систему раздел с типографскими правилами.
• Используйте переменные (Figma Variables) для динамических текстовых значений.
• Проводите регулярные аудиты текста с помощью плагинов вроде «Spell Checker» или «Copydoc».

Экспорт и совместимость с другими системами

При экспорте макетов из Figma важно понимать, как текст, включая кавычки, будет передаваться в другие системы. Если вы экспортируете в PDF, PNG или JPG — кавычки сохранятся визуально. Но при копировании текста из Figma (например, через Inspect API) могут возникнуть проблемы.

Разработчики часто копируют текст прямо из Figma, и если там стоят «ёлочки», а система ожидает «, это может вызвать ошибки в коде. Чтобы избежать конфликтов:

• Используйте прямые кавычки в текстах, предназначенных для кода.
• Добавляйте комментарии: «Здесь должны быть ёлочки — попросите верстальщика заменить».
• Настройте плагин для автоматической замены при экспорте.

Интеграция с системами управления контентом

Если вы работаете с CMS (например, Contentful, Sanity), лучше хранить текст там, а в Figma использовать плейсхолдеры. Это исключает ручную замену кавычек и снижает риск ошибок. Современные практики предполагают использование Design Tokens и Text Overrides, которые синхронизируются с внешними источниками.

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

По её словам, лучшие практики включают:

• Создание библиотеки текстовых стилей с правильными кавычками.
• Обучение команды основам русской пунктуации.
• Использование Figma как платформы для типографской дисциплины, а не просто для визуала.

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

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

Заключение

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

• Используйте «ёлочки» для русскоязычных текстов и “лапки” для английских.
• Активируйте OpenType-функции в поддерживаемых шрифтах для автоматической замены.
• Настройте плагины или системные сочетания для быстрого ввода типографских кавычек.
• Проверяйте поддержку символов в шрифтах перед использованием в проекте.
• Синхронизируйте требования по кавычкам с командой разработки и копирайтерами.