Как в Фигме растянуть текст


Когда мы создаем текстовые поля в Фигме, им присваиваются некоторые стандартные параметры, которые могут быть не очень удобны при дальнейшей работе. На скриншоте снизу мы видим, например, что реальный текст вылезает за границы поля, а соответственно, нам как минимум будет неудобно позиционировать другие элементы в документе.

Форматирование текста в Фигме
Форматирование текста в Фигме

 

Стрелкой на изображении ниже отмечено подменю, в котором находятся некоторые полезные поля, позволяющие нам нормально позиционировать и декорировать текст. 

Меню параметров текста в Фигме
Меню параметров текста в Фигме

Как изменить межстрочное расстояние

Чтобы изменить расстояние (отступ по вертикали) между строками, измените параметр Line Heigh.

Значение по умолчанию — Auto. Оно будет рассчитываться исходя из размера шрифта. 

Допустимые значения: от нуля и до бесконечности (ну или почти бесконечности). 

Межстрочное расстояние в Фигме
Межстрочное расстояние в Фигме

Если захотите снова установить значение Auto, просто оставьте это поле пустым. 

Как изменить расстояние между абзацами

Чтобы увеличить или уменьшить расстояние между параграфами (иными словами там, где в тексте присутствует перенос), измените параметр Paragraph Spacing. 

Расстояние между абзацами в Фигме
Расстояние между абзацами в Фигме

Значения Auto для этого параметра не предусмотрено, по умолчанию Figma ставит его равным 20. 

Как изменить отступ у абзаца

Для того, чтобы сделать у абзаца отступ (там, где есть перенос текста), измените параметр Paragraph Identation. 

Значение по умолчанию — 0. 

Отступ в абзаце в Фигме
Отступ в абзаце в Фигме

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

Как изменить расстояние между символами (кернинг)

Чтобы  изменить расстояние между символами, измените параметр Letter Spacing. Этот параметр измеряется в процентах и по умолчанию равен нулю. 

Межсимвольное расстояние в Фигме
Межсимвольное расстояние в Фигме

Выравнивание текста в Figma

Figma позволяет выравнивать текст внутри контейнера по вертикали и горизонтали: 

Для изменения выравнивание переключите тумблеры параметров Text Align и.Align 

Выравнивание текста в Фигме по горизонтали
Выравнивание текста в Фигме по горизонтали
Выравнивание текста в Фигме по вертикали
Выравнивание текста в Фигме по вертикали

Ресайзинг текста или как растянуть текст в Фигме

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

Этот параметр скрыт в дополнительном меню и содержит три предустановки: Grow Horizontally, Grow Vertically, Fixed size. 

Меню параметров текста в Фигме
Меню параметров текста в Фигме

Grow Horizontally

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

Растягивание текста во всю ширину
Растягивание текста во всю ширину

Учтите, что при смене параметра Resizing формат текста вы сможете вернуть назад только сочетанием ctrl+z / cmnd+z, а не выставлением прежнего параметра. 

Также важно отметить, что если вы измените ширину текста после выставления Grow Horizontally, ресайзинг автоматически переключится на Grow Vertically. 

Grow Vertically

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

Растягивание текста по высоте в зависимости от ширины
Растягивание текста по высоте в зависимости от ширины

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

 

Fixed size

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

Фиксированный размер текста в Фигме
Фиксированный размер текста в Фигме

Продолжение во второй части. 


Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<