Форматирование текста в Figma
Инструмент Text
Добавить текст в Figma можно с помощью инструмента Text. Вызвать его можно из панели инструментов сверху (буква T), либо с помощью горячей клавиши T.
Размеры текстового поля
В Фигме предусмотрены 3 вида размещения текстового поля:
- Во всю ширину (Auto Width)
- С автоматической высотой (Auto Height)
- Фиксированные длина и ширина (Fixed Size)
В случае с Auto Width текст будет занимать одну строку, его высота составит одну строчку, а ширина будет рассчитана автоматически. Этот вариант подходит для коротких надписей.
Вариант Auto Height является наиболее привычным: для текстового блока задается фиксированная ширина, а высота блока высчитывается из объема текста.
В случае Fixed Size и ширина и высота блока задаются строго, при этом по высоте текст может выходить за пределы области.
Т
ри данных типа являются по сути пресетами, но вы также можете менять настройки текстового поля в блока параметров с его размерами: эти настройки связаны и переключаются синхронно:
Цвет текста, эффекты и обводка
- Для текста представлены все стандартные виды заливки в привычном поле Fill.
- Для текста также доступны все стандартные эффекты: Blur, Shadow, Background Blur, Inner Shadow
- Для текста можно применять обводку
Свойства текста
В блоке настроек Text вы можете изменить параметры непосредственно текста.
Базовые поля:
- Шрифт (Как установить новый шрифт)
- Начертание
- Размер
- Высоту строчки
- Межбуквенное расстояние
- Отступ нового абзаца
- Размеры текстового поля (рассматривали выше)
- Выравнивание по горизонтали
- Выравнивание по вертикали
Эти параметры представлены в открытом виде и достаточно интуитивны, но есть еще дополнительные свойства, которые скрыты. Панель с ними можно открыть, кликнув на три точки в правом нижнем углу.
Вкладка Basics окна Type Settings:
Resizing — здесь можно найти дополнительный вариант размера текстового поля, который будет заканчивать текст, выходящий за рамки блока, троеточием
Alignment — также содержит дополнительный вариант выравнивания по горизонтали по всей ширине
Decoration — доступны вариант с подчеркиванием и зачеркиванием текста
Paragraph indent — отступ «красной строки»
List style — форматирование обычным и нумерованным списком
Case — форматирование строчных и заглавных букв
Вкладка Details
Содержит дополнительные настройки для гарнитуры
Numbers:
- Style — стиль начертания цифр (отличается для разных шрифтов)
- Position — надстрочные и подстрочные шрифты
- Fractions — собирает дроби и другие выражения в компактный вид
Letterforms:
Ligatures — объеднияет некоторые символы в один (Лигату́ра — знак любой системы письма или фонетической транскрипции, образованный путём соединения двух и более графем)
Ordinals — включает порядковые (но не обнаружено на практике)
Вкладка Variable
Для шрифтов, поддерживающих вариативность Font Weight, толщину можно можно задать в числовом значении.
Дополнительная, но важная информация
- Для заливки, обводки, эффектов и свойств шрифта можно создавать и использовать стили.
- Вы можете менять свойства отдельных букв в текстовом поле. Но вообще-то не рекомендую так поступать
- Текст можно трансформировать в вектор
- Текст можно трансформировать с помощью плагина
- Вы можете найти текст с такими же характеристиками
