Как растянуть шрифт в высоту в фигме

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

Почему нельзя напрямую растянуть шрифт в Figma

Figma — это инструмент для дизайна интерфейсов, а не векторной графики. Его типографическая система основана на стандартах веба и мобильных платформ, где шрифты должны оставаться масштабируемыми, но не искажёнными. В отличие от Illustrator или Photoshop, где можно свободно менять ширину и высоту текста через «Free Transform», в Figma текст остаётся «живым» — то есть сохраняет свою типографическую структуру. Любое изменение высоты через растяжение нарушает метрики шрифта: высоту заглавных букв, расстояние между базовой линией и верхней границей, а также пропорции серифов и засечек.

Представьте, что вы растягиваете шрифт Helvetica в 2 раза по высоте. Буква «O» превратится в овал, буква «H» — в узкую колонну, а засечки на «T» — в тонкие линии, почти не различимые на экране. Это не просто «выглядит плохо» — это нарушает принципы типографики, которые были разработаны веками.

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

Метод 1: Использование свойства Scale

Самый простой и быстрый способ — использовать свойство «Scale» в панели свойств (Properties). Он не изменяет размер шрифта, но масштабирует весь слой, включая текст, как векторный объект.

1. Выделите текстовый слой.
2. В правой панели найдите раздел «Scale».
3. Установите значение по вертикали (Y) выше 100% — например, 120% или 150%.
4. Оставьте горизонтальное масштабирование (X) на 100%, чтобы не искажать ширину символов.

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

Однако есть нюанс: если вы используете этот метод в компонентах, масштабирование может наследоваться некорректно. Также, если вы экспортируете текст в PNG или SVG, масштабированный текст может выглядеть немного размытым на низких DPI.

Метод 2: Преобразование в контуры

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

1. Выделите текстовый слой.
2. Нажмите Ctrl/Cmd + Shift + O или выберите в меню: Object > Convert to Vector.
3. После преобразования текст станет набором векторных форм — вы больше не сможете редактировать текст как символы.
4. Используйте ручку (Select Tool) и тягайте за угловые точки, чтобы растянуть текст по вертикали.

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

Но будьте осторожны: после преобразования в контуры вы теряете возможность менять текст. Если нужно внести правки — придётся создавать новый слой. Также, если вы работаете в команде, важно предупредить других дизайнеров: «Этот текст уже не редактируется».

Метод 3: Ручная настройка межстрочного интервала и высоты строки

Иногда «растяжение» — это не физическое изменение формы символов, а визуальное ощущение большей высоты. Это достигается за счёт увеличения межстрочного интервала (Line Height) и высоты строки (Height).

1. Выделите текст.
2. В панели Properties найдите параметр «Line Height».
3. Увеличьте его до значения, превышающего размер шрифта — например, при размере 24px установите Line Height = 40px.
4. Для ещё большего эффекта — увеличьте высоту фрейма, в котором находится текст.

Такой подход не меняет форму букв, но создаёт ощущение «воздушности» и «высоты». Особенно эффективен для заголовков в современных интерфейсах — например, в дизайне приложений типа Notion, Apple Music или Figma-самого.

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

Метод 4: Работа с фреймами и Auto Layout

Если вы хотите, чтобы текст автоматически подстраивался под высоту контейнера — используйте Auto Layout.

1. Оберните текстовый слой в фрейм.
2. Включите Auto Layout (кнопка в панели свойств).
3. Установите направление — Vertical.
4. Выберите «Fill container» для высоты.
5. Установите padding и spacing так, чтобы текст «вытягивался» визуально.

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

Но учтите: Auto Layout не растягивает сами буквы. Он только адаптирует расположение. Для настоящего растяжения — комбинируйте его с масштабированием или конвертацией в контуры.

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

1. Растягивание текста через ручное перемещение угловых точек без преобразования в контуры — Figma не позволяет это сделать. Вы можете «потянуть» фрейм, но буквы останутся прежними. Это обманчиво — кажется, что текст изменился, но на самом деле нет.

2. Использование Scale с дробными значениями (например, 105%) на больших текстах — это может вызвать артефакты на экранах с низким разрешением. Лучше использовать целые значения: 120%, 150%.

3. Преобразование в контуры без резервной копии — всегда дублируйте текстовый слой перед конвертацией. Вы не сможете отменить это действие.

4. Игнорирование контраста — растянутые буквы часто теряют плотность. Убедитесь, что цвет текста достаточно контрастный с фоном. Особенно важно для мобильных интерфейсов.

5. Растягивание шрифтов с засечками (serif) — такие шрифты, как Georgia или Playfair Display, при растяжении теряют элегантность. Лучше использовать sans-serif (например, Inter, Manrope, Poppins) — они более устойчивы к искажениям.

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

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

Заключение

Растягивание шрифта по высоте в Figma — это не стандартная операция, но она вполне выполнима. Главное — понимать, зачем вы это делаете. Если вам нужно создать визуальный акцент, логотип или декоративный заголовок — используйте преобразование в контуры. Если вы работаете с интерфейсом, где важна читаемость и адаптивность — применяйте масштабирование или увеличивайте межстрочный интервал. Не пытайтесь «обмануть» систему — Figma не создан для искажения типографики. Но если вы действуете осознанно, с учётом контекста и целей, вы получите не просто «растянутый текст», а мощный инструмент визуальной иерархии.

• Используйте Scale для временных решений и быстрых макетов.
• Преобразовывайте в контуры только для финальных, неизменяемых элементов.
• Для UI-элементов предпочтительнее увеличение Line Height, а не искажение букв.
• Всегда проверяйте читаемость на разных устройствах и разрешениях.
• Не забывайте про типографику — даже в декоративном тексте важна гармония.