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

В Figma нет прямого инструмента для растягивания текста по высоте, как в графических редакторах с масштабированием шрифта. Однако вы можете контролировать высоту текстового блока через параметры строки (line height), изменение размера шрифта или ручную настройку ограничивающего фрейма. Главное — понимать разницу между высотой строки и визуальной высотой текста.

Понятие высоты текста в Figma: что на самом деле можно растягивать

Многие дизайнеры, особенно новички, приходят в Figma из Adobe Illustrator или Photoshop, где можно свободно масштабировать текст по вертикали. В этих программах вы просто берёте текстовый объект и растягиваете его по высоте, сохраняя ширину. В Figma такой возможности напрямую нет — и это не случайность. Дизайн-системы и веб-стандарты требуют предсказуемого поведения текста, а произвольное масштабирование нарушает типографские нормы.

Высота текста в Figma определяется несколькими параметрами: размером шрифта (font size), высотой строки (line height), базовой линией (baseline) и внутренними метриками шрифта (ascent, descent, leading). Когда пользователь спрашивает, как «растянуть текст по высоте», он чаще всего хочет увеличить пространство вокруг букв, сделать текст более воздушным или вписать его в заданный контейнер.

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

Что такое line height и почему он важен

Line height — это расстояние между базовыми линиями строк текста. Он измеряется в пикселях, процентах или единицах em. По умолчанию Figma устанавливает автоматическое значение (often 1.2–1.4 от font size), но его можно изменить вручную. Именно этот параметр даёт ощущение «растянутости» текста.

• Если line height больше, чем высота символов — строки расходятся, текст становится читабельнее.
• Если меньше — строки сближаются, что может создавать эффект плотного набора, но снижает удобство чтения.
• Для однострочного текста line height всё равно влияет на общую высоту текстового блока.

Как использовать line height для контроля высоты текста

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

1. Выделите текстовый элемент в Figma.
2. В правой панели найдите раздел Text.
3. Найдите поле Line height — оно расположено рядом с размером шрифта.
4. Измените значение: можно указать фиксированное число в px (например, 32px) или множитель (например, 1.5).
5. Убедитесь, что режим установлен как Pixel values или Auto (based on font), в зависимости от задачи.

Когда использовать фиксированные значения, а когда — относительные

Figma позволяет задавать line height двумя способами:

• Фиксированный (px): подходит, когда нужно жёстко контролировать межстрочное расстояние, например, в кнопках или баннерах с ограниченным пространством.
• Относительный (%, em, без единиц): используется в динамических компонентах, где размер шрифта может меняться — например, в темах или адаптивных интерфейсах.

Растягивание текста через изменение высоты фрейма: за и против

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

Однако если активирован режим Auto Height (по умолчанию), то фрейм автоматически подстраивается под содержимое. Чтобы обойти это, нужно:

• Отключить Auto Height в панели прав (значок цепи сломан);
• Вручную изменить высоту фрейма;
• Использовать выравнивание (align top/middle/bottom), чтобы контролировать положение текста внутри.

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

Когда это допустимо, а когда — нет

• Допустимо: при создании компонентов с фиксированной высотой (например, поля ввода, табы, плитки).
• Не рекомендуется: для основного контента, где важна читаемость и доступность.
• Особенно опасно: если вы экспортируете макет в код — разработчики не смогут воспроизвести «пустое пространство» без явного указания line height или padding.

Масштабирование шрифта: когда это уместно

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

• Выделить текстовый слой;
• Нажать Ctrl+T (или Cmd+T на Mac);
• Удерживая Shift, потянуть за угловую ручку, чтобы масштабировать пропорционально;
• Или, удерживая Alt, потянуть за боковую ручку — это изменит только ширину или высоту.

Однако после такого преобразования текст теряет статус редактируемого. Figma конвертирует его в векторный контур. Это означает:

• Вы больше не сможете редактировать символы;
• Шрифт нельзя будет заменить;
• Текст не будет участвовать в автолейауте;
• Экспорт в код станет невозможным.

Альтернативы векторизации

Если вам нужен нестандартный вид текста, рассмотрите другие варианты:

• Используйте шрифты с нужной начертательной характеристикой (например, condensed или extended).
• Добавьте тень или обводку, чтобы визуально изменить восприятие высоты.
• Создайте эффект растяжения через слои с градиентами или масками — без изменения самого текста.

Типичные ошибки и как их избежать

• Ошибка 1: Попытка растянуть текст через Scale Y в трансформации. Решение — использовать line height или отступы.
• Ошибка 2: Установка слишком большого line height, из-за чего текст «висит» в пустоте. Рекомендуется: тестировать с реальными данными.
• Ошибка 3: Отключение Auto Height без последующей настройки выравнивания. Это приводит к непредсказуемому поведению при изменении текста.
• Ошибка 4: Применение padding к текстовому слою напрямую. В Figma padding работает только во фреймах с Auto Layout.

Проверочный чек-лист перед публикацией макета

1. Текст остаётся редактируемым (не векторизован)?
2. Line height задан явно и логично?
3. Высота текстового блока соответствует макетной сетке?
4. При изменении объёма текста (одна строка → две) поведение корректно?
5. Все компоненты с текстом протестированы в разных состояниях?

Практические кейсы: кнопки, заголовки, карточки

Кнопка с фиксированной высотой

Частая задача — разместить текст в кнопке высотой 48px. Текст 16px с line height 24px не заполняет всю высоту. Решение:

• Поместите текст в фрейм 48px по высоте.
• Включите Auto Layout по вертикали.
• Задайте padding сверху и снизу (например, 12px), чтобы текст был по центру.
• Line height оставьте 24px — он управляет внутренним интерлиньяжем, а padding — внешними отступами.

Заголовок на баннере

Заголовок должен занимать всю высоту баннера, но не деформироваться. Используйте:

• Line height, равный высоте баннера.
• Выравнивание текста по базовой линии (в Figma пока нет прямого инструмента, но можно использовать плагины).
• Или — поместите текст в Auto Layout-фрейм с justify content = center.

Карточка с многострочным описанием

В карточке часто нужно, чтобы описание занимало фиксированное пространство. Здесь:

• Отключите Auto Height.
• Задайте фиксированную высоту фрейма.
• Используйте line height для контроля плотности строк.
• Настройте overflow: truncate, если текст не влезает.

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

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

Заключение

В Figma невозможно «растянуть» текст по высоте в привычном графическом смысле. Однако система предоставляет мощные инструменты для контроля занимаемого текстом пространства: line height, Auto Layout, padding и управление высотой фрейма. Ключевой принцип — работать с текстом как с живым контентом, а не с пиксельной маской.

• Line height — основной инструмент контроля высоты текста.
• Не масштабируйте текст по вертикали — это ломает редактируемость.
• Используйте Auto Layout и padding для точного позиционирования.
• Всегда тестируйте поведение текста при изменении объёма.
• Сохраняйте текст редактируемым до финальной стадии проектирования.