Работа с текстом в Figma — это не просто изменение цифры в поле размера шрифта. Это управление визуальной иерархией, читаемостью интерфейса и скоростью выполнения задач. Новички тратят драгоценные минуты на поиски нужной настройки, профессионалы жмут две клавиши и двигаются дальше. Разница между этими подходами — не уровень таланта, а знание инструмента. Figma предлагает несколько способов увеличения текста, от очевидных до неожиданно эффективных. Каждый метод имеет свою область применения, и понимание этих нюансов отделяет того, кто просто умеет пользоваться редактором, от того, кто управляет им виртуозно. 🎯
Базовые способы увеличения текста в Figma
Figma предоставляет три основных механизма изменения размера текста, каждый из которых решает конкретную задачу. Первый — прямое редактирование через панель свойств, второй — использование горячих клавиш, третий — масштабирование текстового блока как объекта. Понимание различий между этими методами критически важно для эффективной работы.
Прямое редактирование размера шрифта изменяет типографические свойства текста без влияния на другие параметры. Когда вы меняете размер с 16 до 24 пикселей через панель свойств, текст становится крупнее, но межстрочный интервал, трекинг и другие настройки остаются неизменными или пересчитываются пропорционально, в зависимости от настроек.
Масштабирование текстового блока — принципиально иной подход. Вы растягиваете объект как графический элемент, что влияет на все свойства пропорционально. Этот метод полезен при работе с готовыми композициями, но может привести к нестандартным значениям размера шрифта вроде 17.3px, что усложняет дальнейшее редактирование.
| Метод | Область применения | Влияние на другие свойства |
| Панель свойств | Точная настройка типографики | Минимальное, контролируемое |
| Горячие клавиши | Быстрая итерация размеров | Только размер шрифта |
| Масштабирование объекта | Адаптация готовых композиций | Пропорциональное изменение всех параметров |
Выбор метода зависит от контекста работы. При создании дизайн-системы приоритет отдается точному контролю через панель свойств. При быстром прототипировании — горячим клавишам. При адаптации макетов под разные разрешения — масштабированию объектов с последующей фиксацией значений.
Изменение размера текста через панель свойств
Панель свойств в Figma — основной инструмент управления типографикой. Она расположена в правой части интерфейса и активируется при выделении текстового слоя. Поле "Font size" — ваша точка входа для изменения размера шрифта.
Процесс прост до банальности: выделите текстовый слой, найдите поле размера шрифта в правой панели, введите нужное значение и нажмите Enter. Figma поддерживает различные единицы измерения — пиксели по умолчанию, но можно указать rem, em или проценты, добавив соответствующий суффикс.
Менее очевидная, но крайне полезная функция — изменение размера шрифта для части текста. Выделите нужный фрагмент внутри текстового блока, измените размер только для него. Это позволяет создавать акценты без разбиения текста на отдельные слои, что упрощает последующее редактирование контента.
Марина Соколова, UI-дизайнер
Работала над лендингом для стартапа, заказчик менял решение о размере заголовков пять раз за два дня. Первые три раза вручную правила каждый заголовок через панель свойств, теряя по 15 минут на итерацию. Потом догадалась создать текстовый стиль для заголовков — один клик, и все 47 заголовков на 12 экранах меняются синхронно. Время правки сократилось до 30 секунд. Заказчик продолжал менять мнение, но меня это уже не волновало. 😎
Панель свойств также содержит дополнительные настройки типографики: межстрочный интервал (line height), межбуквенное расстояние (letter spacing), высоту абзаца (paragraph spacing). При изменении размера шрифта эти параметры могут оставаться абсолютными или пересчитываться относительно нового размера — зависит от того, указали вы их в пикселях или процентах.
Профессиональный подход — использование текстовых стилей (Text Styles). Создайте стиль для каждого типа текста в проекте: заголовки первого уровня, второго, основной текст, подписи. Изменение размера шрифта в стиле автоматически применяется ко всем связанным текстовым слоям. Это не просто экономия времени — это системный подход к типографике.
Горячие клавиши для быстрой работы с текстом в Figma
Горячие клавиши в Figma — разница между медленной работой мышью и молниеносной итерацией идей. Для изменения размера текста существует два основных сочетания клавиш, которые должны стать мышечной памятью любого дизайнера.
Cmd/Ctrl + Shift + > — увеличение размера шрифта на один шаг. Cmd/Ctrl + Shift + < — уменьшение на один шаг. "Шаг" в Figma не фиксирован — редактор использует умную логику изменения размеров, основанную на текущем значении. Для маленьких размеров шаг составляет 1px, для средних — 2px, для крупных — может достигать 4-8px.
Выделение текста перед использованием горячих клавиш — обязательное условие. Figma не применит изменения, если текстовый слой не активен. Можно выделить как весь текстовый блок (клик по слою), так и фрагмент текста (двойной клик и выделение).
Менее известная, но полезная комбинация — Cmd/Ctrl + A для выделения всего текста внутри активного блока. Связка действий "Cmd/Ctrl + A, затем Cmd/Ctrl + Shift + >" позволяет мгновенно увеличить весь текст в блоке без использования мыши.
| Сочетание клавиш | Действие | Контекст применения |
| Cmd/Ctrl + Shift + > | Увеличение шрифта | Выделенный текст или слой |
| Cmd/Ctrl + Shift + < | Уменьшение шрифта | Выделенный текст или слой |
| Cmd/Ctrl + A | Выделить весь текст | Внутри текстового блока |
| Cmd/Ctrl + B | Жирное начертание | Выделенный текст |
Горячие клавиши особенно эффективны при создании визуальной иерархии. Вместо того чтобы каждый раз открывать панель свойств и вводить конкретное значение, вы итеративно увеличиваете или уменьшаете размер, визуально оценивая результат. Это быстрее и часто приводит к более органичным результатам, чем жесткое следование заранее определенной типографической шкале.
Масштабирование текстовых блоков в проекте
Масштабирование текста как графического объекта — метод, который новички часто путают с изменением размера шрифта, и эта путаница приводит к проблемам. Когда вы захватываете угол текстового блока и растягиваете его с зажатой клавишей Shift (пропорциональное масштабирование) или без неё, Figma обрабатывает это как трансформацию объекта, а не как типографическое редактирование.
Результат масштабирования — изменение всех свойств текста пропорционально. Если размер шрифта был 20px, а вы увеличили блок в 1.5 раза, размер станет 30px. Межстрочный интервал, межбуквенное расстояние, отступы — всё масштабируется. Звучит удобно, но дьявол в деталях: значения становятся нестандартными, что усложняет поддержку дизайн-системы.
Профессиональное использование масштабирования требует дополнительного шага — фиксации значений. После масштабирования откройте панель свойств, округлите размер шрифта до ближайшего стандартного значения (например, с 23.7px до 24px), проверьте и при необходимости скорректируйте остальные параметры. Это превращает хаотичное масштабирование в контролируемый процесс.
Есть сценарии, где масштабирование незаменимо. Адаптация десктопного макета под мобильные устройства — классический пример. Вы можете выделить группу элементов, включая текст, и масштабировать её под новые размеры экрана. Да, потребуется финальная полировка значений, но начальная точка будет найдена быстрее, чем при ручной настройке каждого параметра.
Игорь Петров, продуктовый дизайнер
Клиент попросил адаптировать макет лендинга с десктопа на планшет за два часа до презентации. Попытался масштабировать всё пропорционально — получил кашу из дробных значений шрифтов: 18.4px, 31.2px, 13.7px. Заказчик во время презентации заметил, что "что-то не так с текстом". Пришлось после встречи потратить час на округление всех значений до нормальных. Теперь масштабирую, затем сразу фиксирую значения — даже под дедлайном. 💼
Альтернативный подход — использование Auto Layout для текстовых блоков. Вместо масштабирования вы управляете размером контейнера, а текст внутри сохраняет свои типографические свойства. Это более предсказуемый и управляемый способ работы с адаптивностью, хотя и требующий предварительной настройки структуры.
Советы по эффективной работе с текстом в Figma
Эффективность работы с текстом определяется не только знанием инструментов, но и системным подходом к организации типографики в проекте. Первый и важнейший совет — создайте типографическую систему до начала дизайна интерфейса, а не в процессе.
Типографическая система включает текстовые стили для всех типов контента: заголовки разных уровней, основной текст, подписи, кнопки, метки форм. Каждый стиль — это не просто размер шрифта, но комплекс параметров: font family, weight, size, line height, letter spacing, paragraph spacing. Создание стилей занимает 20-30 минут в начале проекта, но экономит часы работы в дальнейшем.
Второй совет — используйте относительные единицы для line height. Вместо абсолютного значения 24px укажите 150% или 1.5. При изменении размера шрифта межстрочный интервал будет пересчитываться автоматически, сохраняя визуальную гармонию. Абсолютные значения оправданы только в исключительных случаях, когда требуется жесткий контроль высоты строки.
Третий совет касается работы с многострочными заголовками. Используйте параметр "Text resize" со значением "Auto width" для заголовков, которые должны оставаться в одну строку, и "Auto height" для текста, который может переноситься. Это предотвратит ситуации, когда увеличение размера шрифта ломает вёрстку.
- Создавайте локальные копии текстовых стилей для экспериментов — это позволяет тестировать изменения без риска сломать основную систему
- Используйте плагины для массового изменения размеров текста, например "Find and Replace" для замены конкретных значений по всему проекту
- Настройте сетку baseline grid для выравнивания текста по вертикальной сетке — это обеспечивает визуальную последовательность при разных размерах шрифта
- Проверяйте читаемость текста на разных разрешениях экрана — размер, идеальный для десктопа, может быть слишком мелким для мобильных устройств
- Документируйте решения по выбору размеров шрифта — это упрощает передачу проекта другим дизайнерам и разработчикам
Четвертый совет — изучите концепцию типографической шкалы. Вместо произвольного выбора размеров используйте математические соотношения: модульная шкала (1.25, 1.5, 1.618) или фиксированные интервалы (4px, 8px steps). Это создает визуальную гармонию и упрощает принятие решений о размерах текста.
Пятый совет связан с производительностью. Большое количество уникальных текстовых стилей замедляет работу Figma, особенно в крупных проектах. Оптимальное число стилей для проекта средней сложности — 15-25. Если стилей больше 50, пересмотрите систему на предмет избыточности. Возможно, некоторые стили можно объединить или использовать варианты одного базового стиля.
Шестой совет — используйте компоненты для повторяющихся текстовых блоков с фиксированной структурой (карточки товаров, превью статей, элементы списков). Изменение размера текста в главном компоненте автоматически обновит все экземпляры. Это особенно эффективно в сочетании с текстовыми стилями: вы управляете как структурой блока, так и типографикой контента.
Последний, но не менее важный совет — регулярно проводите аудит типографики в проекте. Figma позволяет увидеть все используемые размеры шрифтов через панель "Text" в режиме инспектирования. Если обнаруживаются "дикие" значения вроде 17px или 23px при типографической шкале, кратной 4, это сигнал о нарушении системы. Найдите источник проблемы и исправьте его до того, как несоответствие распространится по всему проекту.
Управление размером текста в Figma выходит за рамки технического навыка — это элемент дизайнерского мышления. Выбор метода изменения размера шрифта определяется контекстом: точная типографическая настройка через панель свойств, молниеносная итерация горячими клавишами или пропорциональное масштабирование для адаптации композиций. Каждый инструмент имеет своё место в арсенале профессионала. Системный подход к типографике — создание стилей, использование относительных единиц, регулярный аудит — превращает хаотичную работу с текстом в управляемый процесс. Разница между дизайнером, который знает, как увеличить текст, и дизайнером, который понимает систему типографики, измеряется не часами работы, а годами опыта. Но этот опыт можно ускорить, внедрив правильные практики с первого проекта. 🚀
