Как сделать вытянутый текст в фигме

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

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

Метод 1: Трансформация масштабирования

Самый простой и распространённый способ создания вытянутого текста в Figma — это использование инструмента трансформации. Этот метод основан на изменении размеров текстового фрейма без изменения самого содержания.

Чтобы применить трансформацию:

1. Создайте текстовый блок с нужным содержанием.
2. Выделите его с помощью инструмента «Text» (T).
3. Перейдите в режим выбора объектов (V) и потяните за нижние ручки рамки вверх или вниз.
4. Удерживайте клавишу Shift, чтобы зафиксировать ширину текста и избежать горизонтального искажения.

После растягивания вы заметите, что символы стали выше, но сохранили исходную ширину. Это происходит потому, что Figma масштабирует весь текстовый фрейм как единый объект. При этом параметры шрифта (размер, межбуквенное расстояние, высота строки) остаются неизменными, но визуально они корректируются самим интерфейсом.

Для точного контроля над степенью вытягивания используйте панель свойств справа. Там можно задать конкретное значение высоты (Height) в пикселях. Например, если исходная высота текста 24 px, установите 48 px — это даст двукратное растяжение по вертикали.

Когда использовать этот метод

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

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

Метод 2: Использование компонентов и переменных

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

Шаги для создания компонента:

1. Примените трансформацию к текстовому блоку, как описано выше.
2. Убедитесь, что текст выглядит корректно во всех состояниях (например, при разных длинах строк).
3. Щёлкните правой кнопкой мыши и выберите «Create Component».
4. Назначьте имя, например: «Text / Stretched / H1».

Теперь вы можете использовать этот компонент в других частях проекта. При необходимости его можно клонировать, изменять содержание и масштабировать без повторного ручного растягивания.

Для ещё большей гибкости можно добавить компонент в библиотеку стилей или связать с дизайн-системой. Если вы используете Figma Variables (переменные), можно создать динамический компонент, который автоматически применяет заданное соотношение масштабирования.

Настройка переменных для масштабирования

Figma Variables позволяют задавать числовые значения для параметров, включая размеры. Хотя напрямую нельзя «привязать» переменную к высоте текста, вы можете:

• Создать переменную типа Number с названием, например, «Stretch Ratio».
• Установить значение 2 для двукратного растяжения.
• Вручную применять это значение к высоте текстового фрейма.

Этот подход пока не полностью автоматизирован, но он помогает стандартизировать параметры в рамках проекта.

Правила типографики при работе с вытянутым текстом

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

Основные правила:

• Не растягивайте текст более чем в 2–2.5 раза. Сильное искажение делает буквы неестественными, особенно в шрифтах с засечками.
• Избегайте вытягивания в длинных абзацах. Эффект лучше всего работает в заголовках до 3–5 слов.
• Следите за межстрочным интервалом. При растягивании высота строки может стать слишком большой, что нарушает визуальную плотность.

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

Выбор шрифтов для вытягивания

Не все шрифты одинаково хорошо переносят вертикальное растяжение. Лучше всего подходят:

• Геометрические беззасечные шрифты (например, Montserrat, Poppins, Inter).
• Моноширинные шрифты, если требуется технический или цифровой стиль.
• Шрифты с высокой x-высотой — они сохраняют узнаваемость при искажении.

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

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

Новички часто сталкиваются с проблемами при создании вытянутого текста. Вот основные ошибки и способы их исправления.

• Растягивание с искажением ширины. Если не удерживать Shift, текст становится шире и теряет пропорции. Решение: всегда удерживайте Shift при масштабировании по вертикали.
• Изменение размера шрифта после трансформации. Увеличение font size после растягивания может привести к двойному искажению. Рекомендуется сначала задать нужный размер шрифта, потом — растянуть.
• Отсутствие проверки на разных экранах. Вытянутый текст может плохо смотреться на мобильных устройствах. Проверяйте адаптивность в прототипах.

Как проверить читаемость

Простой тест: покажите текст коллеге на 3 секунды и попросите прочитать вслух. Если человек не успевает или ошибается — текст слишком искажён.

Также полезно временно закрыть глаза и посмотреть на силуэт текста. Хороший вытянутый заголовок должен быть узнаваемым даже как контур.

Экспорт и адаптация вытянутого текста

При экспорте вытянутого текста в PNG, SVG или PDF важно учитывать, как сохраняются векторные данные.

• При экспорте в PNG текст растрифицируется. Убедитесь, что разрешение достаточно высокое (2x или 3x для Retina).
• При экспорте в SVG Figma сохраняет текст как векторный объект с применённой трансформацией. Однако в некоторых программах (например, Illustrator) он может отображаться с искажениями, если не разгруппировать.
• Если вы передаёте макет разработчику, уточните, нужно ли реализовывать эффект через CSS (например, transform: scaleY(2)) или использовать изображение.

Альтернатива для разработки

Если текст должен быть интерактивным (например, кнопка с вытянутым текстом), разработчик может использовать CSS:

.stretched-text {
  display: inline-block;
  transform: scaleY(2);
  transform-origin: top;
}

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

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

Мы пообщались с Сергеем Нестеровым, старшим продуктовым дизайнером из дизайн-студии «Формат», чтобы понять, как профессионалы используют вытянутый текст в реальных проектах.

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

По словам Сергея, ключевой момент — тестирование. «Мы провели A/B-тест: одна группа видела обычные заголовки, другая — вытянутые. Результат: на 18% больше пользователей переходили дальше по воронке в группе с вытянутым текстом. Люди воспринимали его как более современный и энергичный.»

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

Заключение

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

• Вытянутый текст создаётся через масштабирование фрейма, а не через параметры шрифта.
• Используйте Shift для фиксации ширины при растягивании.
• Применяйте эффект только в заголовках и декоративных элементах.
• Создавайте компоненты для повторного использования.
• Проверяйте читаемость и адаптивность на разных устройствах.