Текстовые слои и типографика

Текст — половина любого интерфейса; умение управлять типографикой отличает аккуратный макет от любительского.

Заголовки, подписи, кнопки, абзацы — всё это текст. Настроите его грамотно — и макет сразу станет дышать.

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

Добавляем текст

Нажмите клавишу T (Text) или кнопку текста в тулбаре.
Один клик на холсте создаёт текст, который растёт по содержимому (Auto width).
Либо протяните рамку — получится текстовый блок фиксированной ширины (Fixed), где текст переносится.
Введите текст и нажмите Esc, чтобы выйти из режима ввода.

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

В разделе Design на правой панели для текста доступны:

Шрифт (Font) — выбор гарнитуры из сотен встроенных.
Начертание (Weight) — Regular, Medium, Bold и т.д.
Размер (Size) — кегль в пикселях.
Line height — высота строки. Для читаемости обычно 1.4-1.5 от размера.
Letter spacing — расстояние между буквами.
Выравнивание — по левому, центру, правому краю, по ширине.

Три типа поведения текстового слоя

  Auto width   ->  растёт вправо по тексту
  Auto height  ->  ширина фикс, высота по тексту
  Fixed size   ->  ширина и высота фиксированы,
                   лишнее обрезается / переносится

Шкала типографики

Профи не ставят случайные размеры. Используют шкалу: например 12 / 14 / 16 / 20 / 24 / 32. Это создаёт ритм. Позже мы превратим такие размеры в текстовые стили.

Шрифты и где их брать

Figma идёт с большой библиотекой Google Fonts — они доступны сразу, без установки. Чтобы использовать корпоративный или системный шрифт, установите его в систему (через десктоп-приложение или Font Installer) — тогда он появится в списке. Если открыть файл со шрифтом, которого у вас нет, Figma честно предупредит «Missing fonts» и предложит заменить. Поэтому в командах договариваются о наборе шрифтов заранее.

В поле начертания (weight) собраны все доступные толщины: Thin, Light, Regular, Medium, SemiBold, Bold, Black. Не каждый шрифт имеет все — это зависит от семейства. Для интерфейсов чаще всего хватает трёх: Regular для основного текста, Medium или SemiBold для подзаголовков, Bold для акцентов.

Списки, абзацы и спецсимволы

В текстовом слое можно делать маркированные и нумерованные списки (кнопки списка на панели текста), задавать отступ абзаца (Paragraph spacing) — расстояние между абзацами, и менять регистр через Type settings (UPPERCASE, lowercase, Capitalize). Truncate text обрезает длинный текст многоточием, что полезно для карточек с заголовками переменной длины. Все эти мелочи отличают вдумчивую типографику от набора текста наугад.

Горячие клавиши

Действие	Клавиша
Инструмент текста	`T`
Жирный / курсив	`Cmd/Ctrl+B` / `Cmd/Ctrl+I`
Увеличить / уменьшить кегль	`Cmd/Ctrl+Shift+>` / `<`
Выход из режима ввода	`Esc`

Ещё один практический момент — ресайз текстового блока. Тяните за боковые маркеры, чтобы менять ширину при типе Fixed или Auto height; угловой маркер с зажатым курсором масштабирует сам кегль. Не путайте эти жесты: случайное масштабирование текста ломает шкалу размеров. Если нужно поменять именно ширину абзаца, тяните боковую грань, а размер шрифта меняйте числом в поле Size — так типографика остаётся под контролем.

Частые ошибки

Растягивают текстовый блок вручную. Лучше переключите тип на Auto width — текст сам подстроится.
Ставят line height по умолчанию. Слишком плотные строки тяжело читать. Задайте 140-150%.
Используют десяток разных размеров. Держитесь шкалы — макет станет стройнее.

Совет профи: типографика держит макет

Текст — это до 90% контента интерфейса, поэтому дисциплина в типографике важнее, чем кажется. Заведите небольшую шкалу размеров (например 12 / 14 / 16 / 20 / 24 / 32) и держитесь её — это создаёт визуальный ритм и иерархию. Ограничьте число начертаний: Regular для тела, Medium/SemiBold для подзаголовков, Bold для акцентов. Следите за длиной строки в абзацах: 45-75 символов читаются комфортнее всего, слишком широкие строки утомляют глаз. И обязательно настраивайте межстрочный интервал (line height) — плотный текст без воздуха тяжело читать. Когда в следующих уроках мы превратим эти размеры в текстовые стили, дисциплина окупится: вся типографика продукта будет меняться из одного места.

Чек-лист

Добавил текст одним кликом и рамкой.
Настроил шрифт, размер, начертание.
Подобрал комфортный line height.
Понимаю три типа изменения размера текста.

Итоги. Текст в Figma — гибкий векторный слой с богатыми настройками типографики. Вы научились добавлять текст, управлять его свойствами и поняли пользу типографической шкалы. Дальше — цвет и заливки.