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

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

Figma — один из самых популярных инструментов для дизайна интерфейсов, прототипирования и совместной работы команд. Её гибкость и простота привлекают как новичков, так и опытных UX/UI-дизайнеров. Одной из базовых, но критически важных операций является изменение размера текста. От этого зависит читаемость, визуальная иерархия и общее восприятие макета. Однако даже такой простой на первый взгляд процесс может вызывать вопросы: как точно задать размер, как сохранить согласованность между элементами, как настроить динамическое изменение при редактировании содержимого.

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

Изменение размера текста в Figma начинается с выделения текстового элемента. После этого в правой панели свойств становится доступен блок «Text», где можно настроить шрифт, начертание, межстрочный интервал и, конечно, размер. Поле «Font size» принимает числовое значение в пикселях. Вы можете ввести его вручную или использовать стрелки вверх/вниз для увеличения или уменьшения на 1 пиксель.

Кроме того, существует возможность изменять размер прямо на холсте с помощью комбинаций клавиш. Например, при выделенном текстовом слое нажатие Ctrl + Shift + > (Cmd + Shift + > на Mac) увеличивает размер шрифта на 1 пиксель. Это особенно удобно при тонкой настройке. Также можно использовать инструмент Text (T), кликнуть по области и начать печатать — по умолчанию будет применён последний использованный стиль.

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

Пошаговая инструкция: изменение размера вручную

1. Выберите инструмент «Selection» (V) или нажмите V на клавиатуре.
2. Кликните по текстовому элементу на холсте.
3. В правой панели найдите раздел «Text».
4. Найдите поле «Font size» и введите нужное значение или используйте стрелки.
5. Нажмите Enter, чтобы применить изменения.

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

Автоматическое масштабирование и динамика

Одно из ключевых преимуществ Figma — функция Auto-resize (авто-подбор размера). Она позволяет текстовому блоку автоматически изменять свою высоту (и ширину) в зависимости от содержимого. Это особенно полезно при работе с кнопками, полями ввода, карточками товаров и другими динамическими элементами.

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

Также стоит обратить внимание на режим «Truncate» — он ограничивает текст по ширине и добавляет многоточие, если содержимое не помещается. Это полезно для заголовков в лентах или списках, где важно сохранить единый размер карточки.

Типы масштабирования: сравнение

Работа со стилями текста

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

Чтобы создать текстовый стиль, измените параметры текста (включая размер), затем в правой панели нажмите на значок «+» рядом с названием стиля. Назовите стиль понятно: например, «Heading/H1 – 24px SemiBold» или «Body/Small – 14px Regular». После этого этот стиль появится в выпадающем списке и станет доступен другим участникам команды.

Применение стилей особенно важно при работе в команде. Разработчики могут точно сверяться с именами стилей, а дизайнеры — избегать «текстового хаоса», когда каждый заголовок имеет уникальный размер.

Как назначить стиль тексту

• Выделите текстовый элемент.
• В правой панели в разделе «Text» найдите поле «Style».
• Нажмите на него и выберите нужный стиль из списка.
• При необходимости создайте новый стиль через значок «+».

Если вы работаете с Figma Tokens или плагинами вроде Style Dictionary, можно синхронизировать текстовые стили с кодовой базой. Это обеспечивает единый источник истины для всех участников процесса.

Частые ошибки и как их избежать

Одной из самых распространённых ошибок является ручное изменение размера текста без использования стилей. Со временем это приводит к появлению множества почти одинаковых значений: 16px, 16.5px, 17px — что нарушает визуальную гармонию. Решение — стандартизация через текстовые стили и использование типографской сетки.

Ещё одна проблема — игнорирование Auto-resize. Дизайнеры часто оставляют фиксированные размеры, что приводит к обрезанию текста при локализации. Например, английский текст «Submit» занимает меньше места, чем русский «Отправить». Авто-подбор решает эту проблему на этапе проектирования.

Также стоит избегать «плавающих» размеров шрифтов. Использование произвольных значений (например, 18.3px) усложняет верстку и может вызвать недопонимание у разработчиков. Лучше придерживаться шага в 1–2 пикселя и использовать округлённые значения.

Советы по эффективной работе

Для повышения производительности используйте сочетания клавиш. Вот несколько полезных:

• Ctrl + Shift + > / / <) — увеличить/уменьшить размер шрифта на 1 пиксель.
• Alt + стрелки — перемещение текста на 1 пиксель.
• Shift + Alt + стрелки — изменение размера шрифта на 10 пикселей.
• Ctrl + D (Cmd + D) — дублирование текстового элемента с сохранением стилей.

Настройте типографскую шкалу в начале проекта. Например, используйте базовый размер 16px и мультипликатор 1.2 (16 → 19 → 23 → 28 → 34 px). Это создаёт гармоничную иерархию и упрощает принятие решений.

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

Интервью с Мариной Петровой, Product Designer в EdTech-стартапе

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

Мы используем Auto-resize для всех динамических блоков. Это особенно важно при локализации — наш продукт доступен на 8 языках. Без автоматического подбора мы бы постоянно сталкивались с обрезанием текста.

Советую новичкам: не экономьте время на настройке стилей. Один час в начале проекта сэкономит вам десятки часов правок в будущем.»

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

Заключение

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

• Всегда задавайте размер текста через панель свойств или горячие клавиши.
• Используйте Auto-resize для динамических элементов и многоязычных проектов.
• Создавайте и применяйте текстовые стили для единообразия.
• Избегайте произвольных значений размера — придерживайтесь типографской сетки.
• Тестируйте текст в разных языках и контекстах, чтобы избежать обрезания.