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

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

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

Самый простой способ изменить размер шрифта — воспользоваться панелью свойств (Inspector) в левой части интерфейса Figma. После выделения текстового элемента в разделе «Text» появится поле «Font size», где можно ввести числовое значение в пикселях. Это прямой и интуитивно понятный подход, особенно для новичков.

Помимо ручного ввода, доступны стрелки вверх/вниз рядом с полем, позволяющие увеличивать или уменьшать размер с шагом 1 px. Этот метод удобен при тонкой настройке, например, когда нужно подобрать идеальную высоту строки между заголовком и подзаголовком.

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

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

Figma также позволяет быстро изменить размер текста через контекстное меню. Для этого кликните правой кнопкой мыши по текстовому элементу и выберите пункт «Font size». Здесь отображаются часто используемые значения, а также поле для ввода своего.

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

Масштабирование через преобразование

Некоторые пользователи пытаются изменить размер текста с помощью масштабирования (Scale Tool, клавиша K). Однако это неправильный подход: при масштабировании меняется не только шрифт, но и весь объект — его рамка, отступы, обводки. В результате теряется четкость рендеринга и нарушается адаптивность.

Текстовые стили и их роль в масштабировании

Один из ключевых принципов профессионального дизайна — согласованность. Чтобы не задавать размер шрифта вручную каждый раз, Figma предлагает использовать текстовые стили (Text Styles). Это заранее определённые наборы параметров: шрифт, размер, начертание, межстрочный интервал, цвет и другие.

Создание текстового стиля начинается с настройки нужного текстового блока. Затем в панели свойств нажмите значок квадрата рядом с разделом «Text» и выберите «Create new style». Дайте стилю осмысленное имя, например «Heading/H1/24px/Bold».

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

Как редактировать существующий текстовый стиль

Если вы изменили один из элементов, использующих текстовый стиль, Figma покажет значок «•» рядом с названием стиля — это означает, что элемент отклонился от оригинала. Чтобы вернуть согласованность, можно либо сбросить изменения, либо обновить сам стиль.

Для обновления стиля кликните по значку «•» и выберите «Redefine style». Теперь все элементы, использующие этот стиль, примут новые параметры, включая размер шрифта.

Auto Layout и адаптивный текст

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

Чтобы это работало, нужно правильно настроить направление (horizontal/vertical) и выравнивание. Например, если текст должен расширяться по горизонтали, установите направление «Horizontal» и параметр ширины — «Hug contents».

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

Настройка min/max размеров

Иногда текст становится слишком длинным, и фрейм выходит за границы макета. Чтобы избежать этого, можно задать минимальную и максимальную ширину/высоту для фрейма с Auto Layout. Это ограничит растяжение и предотвратит «разъезжающийся» дизайн.

Также можно использовать параметр «Fixed width» или «Fixed height», если размер должен оставаться неизменным независимо от содержимого. В таком случае текст будет либо обрезаться, либо переноситься на новую строку.

Горячие клавиши и ускорение работы

Ускорение рабочего процесса — залог продуктивности. Figma поддерживает множество сочетаний клавиш для быстрого изменения размера текста.

Основные:

• Ctrl/Cmd + «+» — увеличить размер шрифта на 1 px
• Ctrl/Cmd + «–» — уменьшить размер шрифта на 1 px
• Alt + стрелки вверх/вниз — изменение размера с шагом 0.1 px (для тонкой настройки)
• Shift + Alt + стрелки — шаг 10 px

Эти комбинации работают только при активном текстовом курсоре (внутри текстового поля).

Кастомизация шага изменения

По умолчанию шаг изменения — 1 px, но его можно настроить в настройках Figma. Перейдите в «Preferences» → «Shortcuts» и найдите раздел «Text». Там вы можете изменить поведение горячих клавиш или назначить свои.

Также можно использовать плагины, такие как Text Resizer, которые позволяют быстро переключаться между предустановленными размерами (например, 12, 14, 16, 20 px) с помощью одной комбинации.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с текстом в Figma. Ниже — самые частые проблемы и пути их решения.

Ошибка 1: Масштабирование вместо изменения font size

Как уже упоминалось, использование инструмента Scale (K) для изменения текста — грубое нарушение. Оно приводит к размытости, некорректному экспорту и проблемам при передаче в код.

Решение: всегда используйте поле «Font size» или горячие клавиши.

Ошибка 2: Отсутствие текстовых стилей

Работа без стилей приводит к хаосу: один и тот же заголовок может быть 24 px на одном экране и 25 px — на другом. Это усложняет поддержку и согласование с разработчиками.

Решение: создайте библиотеку текстовых стилей в начале проекта. Используйте системные имена, например: «Body/M/16px/Regular», «Caption/S/12px/Medium».

Ошибка 3: Игнорирование Auto Layout

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

Решение: внедряйте Auto Layout на этапе проектирования компонентов. Это сэкономит время при локализации и A/B-тестировании.

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

Профессионалы подчеркивают: даже самая мелкая типографская неточность может повлиять на восприятие бренда. Например, разница в 1 px между заголовками на разных платформах вызывает ощущение «недоделанности».

Также эксперты рекомендуют использовать типографские шкалы — заранее определённые последовательности размеров (например, 12, 14, 16, 20, 24, 32 px), основанные на гармоничных соотношениях (1.2, 1.5, 2.0). Это помогает избежать «плавающих» значений и создаёт визуальную иерархию.

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

Заключение

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

Главное — выйти за рамки ручного ввода и перейти к системному подходу: используйте текстовые стили, Auto Layout и горячие клавиши. Это сэкономит время, снизит количество ошибок и повысит качество вашей работы.

• Всегда меняйте размер текста через поле Font size, а не через масштабирование.
• Создавайте и используйте текстовые стили для обеспечения консистентности.
• Применяйте Auto Layout, чтобы текст адаптировался к содержимому.
• Используйте горячие клавиши для ускорения рутинных операций.
• Избегайте распространённых ошибок — они могут стоить вам часов правок.