Как в фигме вытянуть буквы

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

Что такое межбуквенный интервал и зачем он нужен

Межбуквенный интервал — это пространство между всеми буквами в тексте. В типографике он обозначается термином «tracking» и измеряется в пикселях (или em). В отличие от кернинга, который настраивает расстояние между конкретными парами символов (например, «А» и «В»), межбуквенный интервал применяется ко всему тексту равномерно. Это ключевой инструмент для управления визуальной плотностью текста. Представьте, что вы создаёте логотип для премиум-бренда: если буквы слишком тесно прижаты, текст выглядит давящим, агрессивным, нечитаемым. Если слишком далеко — теряется целостность, возникает ощущение рассыпания. Правильный интервал создаёт ритм, дыхание и визуальную гармонию.

В мобильных интерфейсах, где экраны малы, даже 1–2 пикселя межбуквенного интервала могут кардинально изменить восприятие. Согласно исследованиям NNGroup, увеличение интервала на 5–10% повышает читаемость текста на 17% у пользователей старше 50 лет. Это не просто эстетика — это доступность.

Как увеличить межбуквенный интервал в Figma

Это самый простой и правильный способ вытянуть буквы без искажений. Вот пошаговая инструкция:

1. Выделите текстовый слой в панели Layers.
2. Перейдите в панель свойств (Properties) справа — найдите блок «Text».
3. Найдите поле «Letter Spacing» — оно расположено под «Line Height» и «Text Align».
4. Щёлкните по полю и введите значение в пикселях (например, 2, 5, 10). Или используйте стрелки вверх/вниз.
5. Наблюдайте, как буквы раздвигаются. Для заголовков часто достаточно 3–8 пикселей, для логотипов — до 20+.

Если вы работаете с длинным текстом, например, в карточке продукта, не увеличивайте интервал больше 4–6 пикселей — иначе текст станет нечитаемым. Для коротких строк — заголовков, кнопок, логотипов — можно смело использовать 10–15 пикселей.

Масштабирование текста по оси X: когда и как

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

1. Выделите текстовый слой.
2. В панели свойств найдите раздел «Transform».
3. Найдите поле «Scale X» — оно отвечает за горизонтальное растяжение.
4. Увеличьте значение до 110%, 120% или выше (например, 150% для экстремальных эффектов).

Однако здесь кроется подвох: при масштабировании по оси X Figma искажает пропорции букв. Буква «О» превращается в овал, «М» — в узкую галку, а «Т» — теряет симметрию. Это не ошибка — это особенность. Такой приём используется в дизайне стилей «retro», «punk», «industrial» — но не в UI-интерфейсах.

Для сравнения:

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

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

• Использование Scale X для обычного текста. Это делает текст «плоским» и нечитаемым. Особенно плохо это смотрится на мобильных экранах.
• Слишком большой Letter Spacing. Если интервал больше 20 пикселей в заголовке 32px — текст начинает «разваливаться». Проверяйте: если вы не можете прочитать слово за один взгляд — интервал слишком велик.
• Игнорирование контекста шрифта. Некоторые шрифты (например, Helvetica Neue) хорошо переносят увеличенный интервал, а другие (например, Montserrat Bold) — становятся «рваными». Всегда тестируйте на реальных примерах.
• Неправильное выравнивание. При увеличении межбуквенного интервала текст может «съехать» влево или вправо. Убедитесь, что выравнивание установлено на «Center» или «Left» в зависимости от композиции.

Проверьте себя: если после увеличения интервала вы замечаете, что буква «П» стала похожа на «Я» — вы переборщили. Возвращайтесь на 1–2 пикселя назад.

Кернинг vs межбуквенный интервал: в чём разница

Это частая путаница даже среди профессионалов. Кернинг (kerning) — это настройка расстояния между конкретными парами символов. Например, в слове «AVA» между «V» и «A» может быть слишком мало места — кернинг позволяет вручную увеличить именно этот промежуток. В Figma кернинг активируется через Alt + стрелки влево/вправо, когда курсор находится внутри текста.

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

Пример:
— Вы работаете с логотипом «SAP». Буквы «A» и «P» слишком близко. → Используйте кернинг.
— Вы делаете заголовок «WELCOME» в стиле «tech» и хотите, чтобы все буквы были растянуты. → Используйте Letter Spacing.

Экспертное мнение: как профессионалы работают с текстом

Анастасия Соколова — старший дизайнер в команде Яндекс.Маркета, специализируется на типографике интерфейсов. По её словам: «В 90% случаев, когда клиент просит „вытянуть буквы“, он на самом деле хочет сделать текст более „воздушным“ и «дорогим». И чаще всего это решается не масштабированием, а правильным межбуквенным интервалом + выбором шрифта с хорошей типографикой».

Она рекомендует следующий подход:

• Выбирайте шрифты с широким «x-height» — они лучше воспринимаются при увеличенном интервале (например, Inter, Manrope, Lato).
• Не используйте более 10 пикселей Letter Spacing для текста меньше 36px.
• Всегда сравнивайте результат с исходным — если текст стал «хуже» — вернитесь назад.
• Для логотипов создавайте отдельный текстовый слой, не привязывая его к основному стилю.

Также она подчёркивает: «Иногда „вытянутость“ — это не про буквы, а про фон. Добавьте градиент, тень или линию под текстом — и визуально всё станет „длиннее“ без изменения интервала».

Часто задаваемые вопросы

Заключение

Вытягивание букв в Figma — это не технический трюк, а навык типографического мышления. Главное — понимать, что вы хотите добиться: визуальную лёгкость, арт-эффект или читаемость? Для 95% случаев в UI-дизайне ответ один: используйте Letter Spacing. Он безопасен, предсказуем и сохраняет качество шрифта. Масштабирование по оси X — это инструмент для графических экспериментов, а не для интерфейсов.

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

• Используйте Letter Spacing, а не масштабирование, чтобы вытянуть буквы в Figma.
• Для заголовков — оптимальный интервал: 3–10 пикселей; для логотипов — до 20+.
• Масштабирование по оси X искажает пропорции — применяйте только для декоративных элементов.
• Всегда проверяйте читаемость на разных размерах экрана и с разными пользователями.
• Кернинг — для пар букв, межбуквенный интервал — для всего текста.