Текст в Figma: авто-ширина, авто-высота и почему рамка ломает вёрстку
Текстовый слой в Figma ведёт себя по-разному в зависимости от одного переключателя.
От него зависит, будет ли текст переноситься на новую строку и что случится, когда вы вставите длинную фамилию.
Три режима
Документация: у текстового слоя есть свойство resizing, и в разделе Layout правой панели доступны три значения.
Auto width — ширина растёт и сжимается по содержимому, переносов нет: новая строка появляется только по Enter.
Auto height — ширина фиксирована, высота растёт, текст переносится.
Fixed size — фиксированы и ширина, и высота.
Практика: первые два варианта покрывают почти все задачи интерфейса.
Откуда берётся режим
Документация: если создать слой щелчком на холсте, он получит Auto width.
Если создать его перетаскиванием, Figma решит, что вам нужны конкретные размеры, и поставит Fixed size.
Практика: отсюда и берутся «забытые» фиксированные рамки — их сделали перетаскиванием.
Ловушка ручного изменения размера
Документация предупреждает: при ручном изменении размеров рамки на холсте Figma переключит свойство на Fixed size.
Практика: вы потянули за угол «чуть-чуть» — и текст перестал расти. Возвращайте режим в Layout, а не тяните снова.
Что происходит с переполнением
Практика: в Fixed size текст переносится по ширине, но по высоте не обрезается.
Документация формулирует так: текст может выходить за вертикальные границы слоя. Это значит, что он наедет на соседние элементы, а не исчезнет.
Практика: поэтому «текст вылез» — это всегда Fixed size или Auto height с нехваткой места в контейнере.
Интерлиньяж
Документация: line height задаёт вертикальное расстояние между строками.
Значение можно задать в пикселях или в процентах от размера шрифта. По умолчанию стоит Auto — оно вычисляется из собственного интерлиньяжа шрифта и у разных гарнитур различается.
Практика: проценты удобны для системы стилей, пиксели — когда нужна точная привязка к сетке.
Межбуквенное расстояние
Документация: letter spacing задаёт расстояние между символами.
Отдельно оговаривается, что это не кернинг: кернинг правит пары символов в шрифте, а letter spacing — расстояние в целом.
Практика: не пытайтесь лечить плохую пару символов letter spacing по всему слою.
Абзацный отступ
Практика: у текста есть и расстояние между абзацами.
В панели свойств оно идёт рядом с интерлиньяжем. Для многострочных описаний это аккуратнее, чем пустая строка между абзацами.
Практика: пустая строка — это лишний символ, который потом ломает Auto height.
Обрезание и максимум строк
Документация: обрезание текста и ограничение числа строк работает только при определённых настройках — когда resizing стоит Auto height или Auto width, а вертикальное изменение размеров в авто-лейауте задано как hug contents.
Практика: в Fixed size этот механизм не включить — сначала переключите режим.
Авто-лейаут
Практика: текст внутри авто-лейаут-фрейма ведёт себя предсказуемо, если стоит Auto height.
Контейнер растёт вместе с текстом, и ничего не наезжает. Это базовое правило для карточек и списков.
Практика: если карточка должна сохранять высоту, ставьте ограничение строк и обрезание, а не Fixed size вслепую.
Порядок работы
- Создайте слой щелчком, если текст однострочный.
- Переключите на Auto height, если это абзац.
- Задайте ширину один раз.
- Настройте интерлиньяж и межбуквенное расстояние.
- Проверьте длинную строку.
- Для карточек задайте максимум строк.
Практика: шаг 5 — на самой длинной строке из вашего контента, а не на «Lorem».
Где ломается
Fixed size по умолчанию. Текст не растёт.
Ручной ресайз. Режим переключился сам.
Пустая строка вместо отступа. Ломает авто-высоту.
Проценты и пиксели вперемешку. Стили расходятся.
Обрезание без hug contents. Не включается.
FAQ
Какие есть режимы?
Auto width, Auto height и Fixed size.
Какой режим ставится по умолчанию?
Auto width при щелчке, Fixed size при перетаскивании.
Обрезается ли текст по высоте?
Нет, он выходит за границы слоя.
Чем letter spacing отличается от кернинга?
Первое — расстояние между символами, второе — пары в шрифте.
Когда работает ограничение строк?
При Auto height или Auto width и hug contents.
Текст и переменные
Практика: размеры шрифта и интерлиньяж удобно вынести в переменные.
Тогда тема переключается одним изменением, а не правкой каждого слоя. Это тот случай, когда дисциплина в начале экономит дни в конце.
Практика: переменные не отменяют локальные переопределения — следите, чтобы их не осталось.
Проверка на реальных данных
Практика: подставляйте настоящие строки.
Имя из двенадцати букв, адрес в три строки, цена с копейками — всё это ломает макет, который на «Lorem ipsum» выглядел идеально.
Практика: заведите тестовый набор из пяти самых неудобных записей и прогоняйте его перед сдачей.
Копирование слоёв
Практика: при копировании текстовый слой приносит с собой все свойства.
Это и хорошо, и плохо: вместе с оформлением приезжает и режим изменения размеров. Если в другом месте нужна другая логика, переключите её сразу.
Практика: правило простое: вставили — проверили Layout.
Выравнивание
Практика: горизонтальное выравнивание задаёт положение строк внутри рамки.
В Auto width оно почти не заметно: рамка облегает текст. В Fixed size и Auto height выравнивание становится рабочим инструментом — по центру, по правому краю, по ширине.
Практика: вертикальное выравнивание тоже есть, и для кнопок оно важнее горизонтального.
Кнопки и бейджи
Практика: для коротких надписей нужен свой подход.
Кнопка — это фрейм с авто-лейаутом, внутри текст в Auto width и отступы вместо фиксированной ширины. Тогда подпись любой длины не вылезет.
Практика: если поставить фиксированную ширину, кнопка с длинным словом развалится первой.
Итог
Поведение текста в Figma определяется одним переключателем в разделе Layout.
Практика: Auto width для меток, Auto height для абзацев, Fixed size только осознанно, интерлиньяж в процентах для системы, межбуквенное расстояние не путать с кернингом, ограничение строк — при hug contents.