Как растянуть текст в фигме
Прежде чем мы перейдем к техническим приемам растягивания текста, важно понять философию работы с типографикой в Figma. В отличие от растровых редакторов, где текст часто превращается в кривые, Figma сохраняет текст редактируемым, что требует особого подхода к трансформациям.
Растягивание текста - это не просто изменение пропорций, а сознательное дизайнерское решение, которое может повлиять на читаемость, эстетику и соответствие гайдлайнам бренда. В этом руководстве мы рассмотрим как стандартные, так и продвинутые методы работы с текстовыми блоками.
Использование параметра "Width"
Самый фундаментальный способ управления растяжением текста в Figma связан с манипуляцией текстового фрейма - контейнера, в котором находится ваш текст. Каждый текстовый блок в Figma обладает свойством "Auto Width" (Автоматическая ширина) или "Fixed Width" (Фиксированная ширина).
Понимание разницы между этими двумя состояниями - первый шаг к контролю над тем, как текст заполняет отведенное ему пространство. Когда вы изменяете ширину фрейма, вы непосредственно влияете на поведение строк текста внутри него, что является основой для различных техник растягивания.
Пошаговая инструкция
- Выберите текстовый слой, который хотите растянуть, на холсте или в панели слоев.
- Обратите внимание на маркеры изменения размера (белые квадраты) по краям фрейма.
- Зажмите левый или правый маркер и потяните, чтобы изменить ширину фрейма.
- Наблюдайте за поведением текста: Если текст был в режиме "Auto Width" (значок на фрейме или в панели свойств), он начнет переноситься на новые строки, заполняя новую ширину. Это растягивает текст не по горизонтали, а по площади, распределяя его. Чтобы растянуть текст по горизонтали, не разбивая на строки, сначала переключите фрейм в режим "Fixed Width". Для этого потяните за маркер изменения размера, и режим переключится автоматически, либо кликните на значок в панели свойств справа (в секции "Text").
- В режиме "Fixed Width" текст будет стремиться остаться в одной строке. Его растяжение по ширине фрейма теперь контролируется другими параметрами, описанными ниже.
Изменение межбуквенного интервала
Если вам нужно именно визуально растянуть текст по горизонтали, сохраняя при этом все его редактируемые свойства и не превращая в кривые, настройка межбуквенного интервала - ваш основной инструмент.
Этот параметр, часто называемый в дизайнерской среде "трекинг", контролирует равномерное расстояние между всеми символами в выделенном фрагменте текста. Увеличение этого значения буквально "раздвигает" буквы друг от друга, создавая эффект растянутого текста. Этот метод предпочтителен для заголовков, логотипов и акцентов, где требуется управлять плотностью текста.
Пошаговая инструкция
- Выделите текстовый слой или конкретные символы внутри него.
- В правой панели свойств найдите секцию "Text".
- Найдите поле с иконкой, изображающей две буквы "A" со стрелкой между ними (официально называется "Letter spacing").
- Увеличьте значение в этом поле. Вы можете: Ввести числовое значение вручную. Использовать стрелки вверх/вниз. Зажать клавишу Shift и прокрутить колесико мыши над полем для более плавного изменения. Кликнуть на название параметра ("Letter spacing") и перемещать появившийся ползунок.
- Положительные значения раздвигают буквы, отрицательные - сжимают. Для эффекта растягивания используйте положительные значения (например, от 2% до 200% в зависимости от шрифта и желаемого эффекта).
Трансформация текстового слоя
Самый прямой, но и самый рискованный с точки зрения типографических норм способ - это свободное трансформирование текстового слоя, как обычного графического объекта.
Пошаговая инструкция
- Выберите текстовый слой.
- Убедитесь, что он находится в режиме "Fixed Width" (см. Метод 1), если хотите растянуть только по горизонтали.
- Наведите курсор на правый или левый маркер изменения размера фрейма.
- Зажмите клавишу Cmd (Mac) или Ctrl (Windows).
- Теперь, удерживая клавишу, тяните маркер в сторону. Вы увидите, что текст начинает свободно масштабироваться, искажая свои стандартные пропорции.
- Альтернативно, вы можете просто тянуть за боковой маркер без зажатой клавиши, но тогда изменится ширина фрейма, а не масштаб текста (текст перенесется или сожмется, в зависимости от настроек выравнивания).
После такого масштабирования в панели свойств напротив размера шрифта появится значок * (например, 48*), указывающий, что визуальный размер текста не соответствует установленному в параметрах. Редактировать такой текст можно, но расчёты размеров становятся неочевидными.
Преобразование текста в контуры
Это самый радикальный метод, который превращает текст из редактируемого векторного объекта с типографическими свойствами в набор обычных векторных контуров (кривых).
После этой операции вы больше не сможете изменить написание, шрифт или параметры текста через панель "Text". Однако вы получаете абсолютную свободу: можете редактировать каждую точку контура, применять к буквам градиенты заливки (как к форме), и, конечно, свободно растягивать их как обычные векторные фигуры. Используйте этот метод только для финальных, утвержденных элементов, таких как логотипы или декоративные надписи.
Пошаговая инструкция
- Выберите текстовый слой.
- Щелкните правой кнопкой мыши по нему на холсте или в списке слоев.
- В контекстном меню выберите пункт "Outline Stroke". Альтернативно, используйте сочетание клавиш Shift + Cmd + O (Mac) или Shift + Ctrl + O (Windows).
- Текстовый слой превратится в группу (Frame), содержащую векторные контуры каждой буквы.
- Разгруппируйте объект, нажав Shift + Cmd + G (Mac) или Shift + Ctrl + G (Windows), если хотите работать с буквами по отдельности.
- Теперь выберите нужную букву или группу букв и свободно растягивайте их, потянув за любой угловой или боковой маркер, как обычную векторную фигуру.
Вывод
Изучив все четыре метода, становится очевидно, что в Figma не существует единственно правильного способа растянуть текст - есть наиболее подходящий для конкретной задачи. Ключевой критерий выбора - баланс между визуальным контролем и сохранением редактируемости текста как типографического объекта.
Помните главное правило: чем больше свободы для графических манипуляций вы получаете, тем больше дизайнерских ограничений и возможностей для правок теряете.
Использование параметров текстового фрейма и межбуквенного интервала является "неразрушающим" подходом, соответствующим философии современного дизайна интерфейсов и систем. Преобразование в контуры - это окончательное решение, а свободная трансформация - компромисс, требующий осознанности.
Следующая таблица поможет быстро определить оптимальный метод в вашей рабочей ситуации:
| Метод | Лучше всего подходит для | Преимущества | Недостатки | Сохранение редактируемости текста |
|---|---|---|---|---|
| Ширина фрейма | Адаптивных макетов, основного текста, подписей. | Текст остается отзывчивым, идеально для верстки. | Не растягивает шрифт визуально, а лишь управляет потоком. | Полностью |
| Межбуквенный интервал | Заголовков, акцентных надписей, логотипов. | Тонкий контроль, сохраняются все свойства шрифта. | Может ухудшить читаемость при больших значениях. | Полностью |
| Свободная трансформация | Быстрых экспериментов, создания спецэффектов. | Мгновенный результат, полный контроль над пропорциями. | Искажает гарнитуру, нарушает целостность дизайна. | Частично (редактировать можно, но размеры не соответствуют параметрам) |
| Контуры (Outline Stroke) | Логотипов, иконографики, финальных графических элементов. | Абсолютная свобода работы с формой, как с векторным объектом. | Текст невозможно редактировать (изменить слово или шрифт). | Полностью утрачивается |
Начинайте работу с методов 1 и 2. Переходите к методу 3, только если нужен грубый эффект искажения, а к методу 4 - лишь на самом последнем этапе, когда текст утвержден окончательно и требует максимальной графической свободы. Такой подход обеспечит гибкость вашего дизайн-процесса и профессиональное качество типографики.