Как в фигме сделать расстояние между буквами

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

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

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

Tracking и Kerning: в чём разница?

Понимание различий между Tracking и Kerning — основа профессиональной работы с текстом в Figma. Эти два термина часто используются как синонимы, но технически выполняют разные функции и применяются в разных контекстах.

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

Kerning — это индивидуальная настройка расстояния между двумя конкретными символами. Некоторые пары букв, такие как «AV» или «To», по умолчанию могут иметь слишком большое или маленькое пространство из-за формы самих глифов. Кернинг позволяет исправить эти визуальные дисбалансы вручную.

• Tracking — глобальное изменение, влияет на весь текст.
• Kerning — локальное, применяется к парам символов.
• Tracking измеряется в процентах или тысячных долях em (в Figma — в %).
• Kerning задаётся в абсолютных значениях (например, -10, +5).

Когда использовать Tracking, а когда — Kerning?

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

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

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

1. Выделите текстовый объект с помощью инструмента «Text» (T) или кликните по существующему тексту на холсте.
2. Убедитесь, что в правой панели свойств активна вкладка «Design».
3. Найдите раздел «Text», где отображаются шрифт, размер, начертание и другие параметры.
4. Прокрутите вниз до строки «Letter spacing» — это и есть Tracking.
5. Введите нужное значение в поле. По умолчанию оно равно 0%. Положительные значения увеличивают интервал, отрицательные — уменьшают.

Значение Tracking в Figma выражается в процентах от размера шрифта. Например, при значении +20% и размере шрифта 100px расстояние между буквами увеличится на 20 единиц. Это относительная мера, что делает её удобной при масштабировании макетов.

Оптимальные значения Tracking для разных контекстов

Подбор правильного значения Tracking — вопрос вкуса и контекста. Тем не менее, существуют рекомендации, основанные на типографских стандартах:

• Для обычного текста (body text): от -5% до +5%. Чрезмерное изменение снижает читаемость.
• Для заголовков (H1, H2): от +10% до +30%, особенно при больших размерах шрифта.
• Для капительного текста (ALL CAPS): рекомендуется увеличение Tracking до +20–50%, так как заглавные буквы визуально кажутся плотнее.
• Для микротекста (подписи, кнопки): лучше оставлять Tracking без изменений или использовать небольшое отрицательное значение (до -10%).

Контроль кернинга: ручная настройка между символами

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

Щёлкните внутри текстового блока и установите каретку между интересующими вас символами. В панели свойств появится параметр «Kerning», расположенный рядом с «Tracking». Здесь вы можете ввести положительное или отрицательное значение, чтобы увеличить или уменьшить расстояние.

Например, пара «VA» часто требует отрицательного кернинга, так как диагональные штрихи букв создают иллюзию большого пробела. Значение -15–20 может визуально «сблизить» их, сделав композицию более сбалансированной.

Как найти проблемные пары символов?

Определение пар, нуждающихся в кернинге, требует внимательности. Вот простой алгоритм:

• Просмотрите текст на предмет «дыр» — мест, где кажется, что между буквами слишком много пустого пространства.
• Обратите внимание на комбинации с диагональными или округлыми формами: A, V, W, Y, O, T.
• Проверьте текст в чёрно-белом режиме — цвет может отвлекать от формы и интервалов.
• Отдалитесь от экрана или уменьшите масштаб — это помогает увидеть общий ритм строки.

Лучшие практики типографики в Figma

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

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

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

• Тестируйте текст в реальных условиях — на фоне, с другими элементами интерфейса.
• Используйте режим «Presentation Mode», чтобы посмотреть макет без вспомогательных линий и сеток.
• Сохраняйте согласованность: если вы увеличили Tracking для H1, проверьте, как это сочетается с H2 и H3.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда допускают типографские ошибки при работе с интервалами. Ниже — самые частые из них и способы их предотвращения.

Ошибка 1: Применение одинакового Tracking ко всем текстовым уровням. Использование +30% для заголовка и основного текста делает последний трудночитаемым. Решение — создать текстовые стили (text styles) в Figma и назначить каждому уровню подходящее значение Tracking.

Ошибка 2: Игнорирование встроенного кернинга шрифта. Отключение автоматического кернинга (если такое возможно) приводит к «роботизированному» виду текста. Всегда проверяйте, включены ли системные настройки шрифта.

Ошибка 3: Избыточная ручная корректировка. Попытка вручную настроить кернинг для всех пар букв — огромная трата времени. Фокусируйтесь только на проблемных участках.

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

По его словам, одной из главных проблем является отсутствие проверочного чек-листа. Дмитрий предлагает использовать в Figma плагины вроде «Font Manager» или «Typography Linter», которые помогают выявлять типографские нарушения.

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

Заключение

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

• Tracking изменяет интервалы равномерно по всему тексту, Kerning — точечно между символами.
• Используйте Tracking для заголовков и капительного текста, ограничивайте его в основном тексте.
• Ручной кернинг применяйте только к проблемным парам символов.
• Создавайте shared text styles для единообразия в команде.
• Тестируйте текст в реальных условиях и на разных устройствах.