Как менять размер текста в фигме

Работа с текстом в Figma — это неотъемлемая часть проектирования интерфейсов, презентаций и макетов. Независимо от того, создаете ли вы мобильное приложение, веб-сайт или прототип сложной системы, точное управление размером шрифта напрямую влияет на читаемость, иерархию и общее восприятие дизайна. В отличие от простых графических редакторов, Figma предлагает гибкие инструменты для масштабирования текста как через интерфейс, так и с использованием стилей и компонентов.

Основные способы изменения размера текста

Наиболее прямой способ — выделить текстовой фрейм с помощью инструмента «Text» (T) и изменить значение в поле «Font size» на правой панели. Это поле находится в разделе «Text» и позволяет вводить числовое значение в пикселях. Вы можете использовать стрелки для увеличения/уменьшения на 1 px или ввести любое значение вручную, включая десятичные дроби (например, 14.5).

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

Figma поддерживает горячие клавиши для быстрого изменения размера:

• Ctrl + Shift + > — увеличить шрифт на 1 px;
• Ctrl + Shift + < — уменьшить шрифт на 1 px.

Эти комбинации работают только при активном выделении текстового объекта и значительно ускоряют процесс настройки.

Изменение через контекстное меню

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

Масштабирование через трансформацию

Хотя технически возможно изменить размер текста с помощью масштабирования (удерживая Shift и перетаскивая углы фрейма), делать это не рекомендуется. Такой подход приводит к искажению шрифта, нарушает четкость рендеринга и делает экспорт некорректным. Всегда используйте параметр «Font size» — он гарантирует идеальную чёткость и предсказуемое поведение при экспорте.

Использование авто-ресайза для динамического текста

Одной из мощных функций Figma является Auto Layout, которая позволяет текстовым блокам автоматически изменять размер в зависимости от содержимого. Это особенно важно при работе с компонентами, такими как кнопки, карточки или строки таблиц, где текст может варьироваться.

Чтобы включить авто-ресайз:

1. Выделите текстовый элемент внутри фрейма с Auto Layout.
2. На панели свойств найдите раздел «Text».
3. Рядом с полем «Font size» появится значок цепи — это параметр «Auto width» или «Auto height».
4. Активируйте нужное направление: ширину, высоту или оба.

После этого текстовый блок будет расширяться или сжиматься по мере ввода новых символов, а весь фрейм будет адаптироваться под него.

Гибкие ограничения и мин/макс значения

Figma позволяет задавать минимальную и максимальную ширину или высоту для текстовых блоков. Это полезно, когда нужно ограничить рост текста, например, в мобильной кнопке. Чтобы установить лимиты:

• Кликните по значку шестерёнки рядом с параметром Auto width/height.
• Укажите min и max значения в пикселях.

Теперь текст будет расти до указанного максимума, после чего начнёт переноситься на новую строку или обрезаться — в зависимости от настроек переноса.

Работа с сохранёнными стилями шрифта

Для поддержания единообразия в больших проектах Figma предлагает создавать и применять текстовые стили. Это позволяет хранить не только размер шрифта, но и его семейство, насыщенность, межстрочный интервал, цвет и другие параметры.

Чтобы создать текстовый стиль:

1. Настройте текстовый элемент так, как вам нужно (размер, шрифт, цвет и т.д.).
2. Выделите его и нажмите на значок «+» рядом с выпадающим списком стилей на панели справа.
3. Присвойте стилю понятное имя, например, «Heading/H1/24px/Bold».
4. Нажмите «Create».

Теперь этот стиль можно применять к другим текстовым блокам одним кликом.

Обновление стилей массово

Если вы изменили основной стиль (например, увеличили размер H1 с 24px до 26px), все элементы, использующие этот стиль, автоматически обновятся. Это исключает необходимость ручного поиска и замены каждого элемента, что особенно критично в проектах с сотнями экранов.

Советы по эффективному управлению текстом

Для профессионального контроля над размером текста рекомендуется придерживаться нескольких принципов. Во-первых, используйте сетку типографики. Определите базовые размеры: например, 12, 14, 16, 20, 24, 32, 48 px. Это создаёт гармоничную иерархию и упрощает принятие решений.

Во-вторых, внедрите систему именования стилей. Используйте единый формат:
`[Тип]/[Название]/[Размер]/[Насыщенность]`.
Например: `Body/Paragraph/16px/Regular`, `Heading/H2/24px/Semibold`.

В-третьих, регулярно проводите аудит текстовых стилей. Удалите дубликаты и неиспользуемые варианты — это уменьшает путаницу и ускоряет работу.

Типичные ошибки и как их избежать

Одна из самых частых ошибок — использование произвольных размеров шрифтов (например, 17.3px или 21px). Это нарушает визуальную гармонию и затрудняет чтение. Всегда стремитесь к округлённым значениям и соблюдайте шаг сетки.

Ещё одна ошибка — отсутствие связи текста с Auto Layout. Без него компоненты теряют гибкость, и при изменении текста дизайнеру приходится вручную подгонять размеры, что замедляет работу.

Экспортное масштабирование и совместимость

Когда вы экспортируете макет, важно помнить, что размер шрифта остаётся неизменным вне зависимости от масштаба экспорта (1x, 2x, 3x). Например, текст 16px будет экспортирован как 16px в 1x, 32px в 2x и 48px в 3x — это корректное поведение для ретина-экранов.

Однако при передаче макетов разработчикам стоит убедиться, что все текстовые стили правильно задокументированы. Figma позволяет просматривать размер шрифта в режиме «Inspect», где разработчики видят точные значения. Также можно использовать плагины, такие как «Stark» или «Content Reel», для автоматической проверки типографики.

Экспертное мнение

«За последние годы я видел множество проектов, где отсутствие контроля над размером текста приводило к хаосу. Команды тратили до 30% времени на исправление типографских несоответствий. Решение простое: внедрите текстовые стили и Auto Layout с первого дня. Это не просто удобство — это профессиональная этика.»

— Михаил Петров, руководитель дизайн-студии «Pixel Logic», 12 лет в digital-дизайне

Он также отмечает важность использования переменных (Variables) в Figma, которые позволяют динамически управлять размерами шрифтов в зависимости от темы или устройства. Эта функция особенно актуальна в 2026 году, когда Figma активно развивает систему динамических свойств.

Вопросы и ответы

Заключение

Управление размером текста в Figma — это не просто техническая операция, а ключевой элемент качественного дизайна. Правильное использование параметра «Font size», сочетание с Auto Layout и внедрение текстовых стилей позволяют создавать гибкие, согласованные и легко поддерживаемые макеты.

• Всегда используйте поле «Font size» вместо масштабирования через трансформацию.
• Внедряйте текстовые стили для единообразия и быстрого обновления.
• Активируйте Auto width/height для динамических компонентов.
• Соблюдайте типографскую сетку и избегайте произвольных значений.
• Передавайте точные данные разработчикам через режим Inspect и библиотеки.