Свойства текста в бесплатной программе для веб-дизайна и UI/UX-дизайна Figma (Фигма)

Свойства текста

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

Давайте наберем какой-нибудь текст, а затем, найдем заголовок Text на панели свойств и посмотрим на первое поле. С помощью этого поля можно выбрать шрифт:

  • если клинуть на стрелочку, которая располагается в правой части поля, то откроется список со всеми доступными шрифтами.
  • давайте найдем шрифт с названием Ubuntu и выберем его.
  • как вы видите внешний вид текста изменился.
  • теперь давайте воспользуемся другим способом, которые используется наиболее часто для выбора шрифта.
  • кликните в поле прямо на название шрифта, таким образом он выделиться серым фоном, теперь можно начать вводить название нового шрифта, например Roboto. Мы еще не ввели название шрифта полностью, но программа автоматически дописала его остаток, это значит шрифт найден. Теперь можно нажать клавишу Ввод, чтобы шрифт применился.

Следующее поле, в котором сейчас написано Regular, что в переводе на русский значит Регулярный или Обычный – позволяет задать начертание шрифта.

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

Дальше идет поле Letter Height – оно позволяет управлять межстрочным расстоянием, чтобы понять как оно работает, нам понадобится:

  • ввести текст состоящий из нескольких строк;
  • хорошо, теперь давайте введем значение 150 в поле межстрочного расстояния;
  • как вы видите межстрочное расстояние увеличилось;
  • кстати, межстрочное расстояние могут еще называть «Интерлиньяж», на всякий случай запомните это название, чтобы не растяряться, когда его услышите.

Letter Spacing – это поле следующее за интерлиньяжем и называется полем трекинга или полем межбуквенного пространства. Оно позволяет равномерно увеличить пространство между буквами. Обычно это необходимо тогда, когда вы набираете текст заглавными знаками. Введите какое-нибудь значение, чтобы посмотреть как это работает, но потом сотрите его, чтобы оно нам не мешало.

Следующее поле назвается Paragraph Spacing, оно управляет размером отступа между параграфами. Параграфом в программе Figma считается тот участок текста, который отделен от других строк нажатием клавиши ввода. Давайте сделаем текстовый блок состоящий из двух параграфов, для этого:

  • зайдем в режим редактирования текста кликнув дважды по нему, он автоматически выделится;
  • теперь нажмем клавиши сommand + C для Mac или ctrl + C для Windows чтобы скопировать выделенный текст;
  • затем кликнем в пустом месте в конце последней строки, чтобы перевести корретку набора текста в этом место;
  • теперь создадим параграф нажатием клавиши ввод.
  • Как видите каретка набора текста перенеслась на другую строку, теперь нажмите ctrl + V для Windows или commant + V для Mac, чтобы вставить скопированный ранее текст.
  • сейчас текст выглядит как один параграф, но давайте введем значение 18 в поле Paragraph Spacing на панели свойств.
  • отлично, как вы можете заметить теперь оба параграфа разделяются строкой.

И последнее поле называется Paragraph Indent, что в переводе на русский означает Красная строка, если вы помните из школы, то красной строкой называется первая строка абзаца и она может набираться с отступом слева для повышения читабельности.

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

первая группа переключателей позволяет управлять выравниванием текста по горизонтали, в типографике это свойство называется «Выключка». Соответственно выключка может быть четырех типов: выключка влево, по центру, вправо и выключка по формату. Если с первыми тремя все понятно, то на четвертом стоит заострить внимание. Выключка по формату означает, что текст будует выравниваться с ровным левым и правым краем (как в книгах). Это происходит за счет произвольного увеличения пространства между словами. На практике такой текст выглядит некрасиво, поэтому в вебе он не используется, за исключением тех случаев, когда это делается вручную, но это большая отдельная тема, которая рассматривается в рамках курса по типографике. А пока просто запомните, что не стоит применять выключку по формату.

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

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

И последнее свойство текста называется Fill, что означает «Заливка» или просто цвет текста.

  • Как вы уже догадались, с помощью него мы можем изменить цвет текста. Это необходимо довольно редко, т.к. в 99% случаев текст либо черный или белый, иногда его делают серым, а раскрашивают очень редко. Чтобы изменить цвет текста кликните на квадратик с цветом и выберите подходящий цвет. О том как работает панель выбора цвета мы будем говорить в отдельной теме.
  • Также здесь можно изменить прозрачность текста. Если указать прозрачность меньше 100% то под текстом начнут просвечиваться нижележащие объекты.
  • Далее следует иконка с изображением капельки, кликнув на которую можно изменить «режим наложения» — это свойство, которое изменяет способ отображения слоёв, в зависимости от их заливки и того какая заливка находиться под ними. Это довольно обширная тема, которая рассматривается отдельно. Для текста режимы наложения используются довольно редко.
  • И последняя иконка глаза позволяет отключить отображение текста.

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