Как увеличить шрифт в фигме

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

Как изменить размер текста: основные методы

Изменение размера шрифта в Figma начинается с выделения текстового фрейма. После этого в правой панели свойств (Inspector) открывается раздел «Text», где доступны параметры шрифта, включая его размер. Поле «Font size» позволяет ввести нужное значение вручную или использовать стрелки для увеличения/уменьшения.
Если вы работаете с компонентами или текстовыми стилями, важно помнить, что изменение размера шрифта может повлиять на все экземпляры. В этом случае рекомендуется либо создать новый стиль, либо отвязаться от родительского компонента, чтобы избежать нежелательных изменений в других частях проекта.
Figma поддерживает дробные значения размера шрифта, например 14.5 или 16.75 pt. Это особенно полезно при работе с тонкой настройкой типографики для высокоточных макетов. Однако стоит учитывать, что такие значения могут некорректно отображаться при экспорте или в коде, если разработчики используют целочисленные переменные.

Пошаговое изменение размера текста

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

Горячие клавиши для быстрого изменения шрифта

Figma предлагает несколько сочетаний клавиш, которые ускоряют процесс изменения размера шрифта. Хотя сама программа не имеет встроенных горячих клавиш для увеличения/уменьшения только шрифта, вы можете использовать общие команды масштабирования, которые часто путают с изменением текста.
Комбинация Ctrl/Cmd + + увеличивает масштаб холста, а Ctrl/Cmd + - — уменьшает. Это не меняет реальный размер шрифта, а лишь делает его визуально больше на экране. Новички часто принимают это за изменение размера текста, что может привести к ошибкам при передаче макета разработчикам.
Однако есть сторонние решения. Например, плагины вроде Text Resizer позволяют назначить свои горячие клавиши для увеличения и уменьшения шрифта на 1 или 2 пункта. Это особенно удобно при итеративной работе с типографикой.

Полезные комбинации клавиш

• Ctrl/Cmd + + — увеличение масштаба холста.
• Ctrl/Cmd + - — уменьшение масштаба.
• Ctrl/Cmd + 0 — сброс масштаба до 100%.
• Shift + Alt + T — создание нового текстового фрейма (в некоторых плагинах — вызов текстовых стилей).

Масштабирование vs размер шрифта: в чём разница?

Одна из самых распространённых путаниц в Figma — различие между масштабированием холста и фактическим изменением размера шрифта. Масштаб влияет только на ваше восприятие макета, тогда как размер шрифта — это физическое свойство текстового объекта, которое будет экспортировано и передано разработчикам.
Представьте, что вы увеличили масштаб до 200%. Текст стал крупнее, но его свойства остались прежними: 16 pt. При передаче задачи разработчику он увидит те же 16 pt, а не 32. Это может привести к недопониманию, особенно если дизайнер говорил: «Сделайте шрифт побольше».

Когда что использовать?

• Масштабирование — когда нужно рассмотреть мелкие детали, проверить пиксель-перфект или продемонстрировать макет на презентации.
• Изменение размера шрифта — при создании типографской системы, адаптации интерфейса под разные устройства или улучшении доступности.

Плагины для автоматизации изменения шрифта

Figma — это экосистема, и её сила во множестве плагинов, упрощающих рутинные задачи. Когда речь идёт об увеличении шрифта, несколько инструментов становятся незаменимыми помощниками.
Один из самых популярных — Text Resizer. Он позволяет быстро увеличивать или уменьшать размер шрифта на заданное значение (например, +2 pt) прямо из контекстного меню. Также поддерживаются горячие клавиши, если вы настроили их через Figma Desktop.
Другой полезный плагин — Typography Scale Generator. Он помогает создавать гармоничные типографские системы на основе золотого сечения, модульной шкалы или других математических принципов. Вы задаёте базовый размер, выбираете коэффициент (например, 1.25), и плагин генерирует набор стилей от h1 до caption.

Топ-3 плагина для работы со шрифтами

• Text Resizer — простое увеличение/уменьшение шрифта на шаг.
• Auto Typography — создаёт иерархию текстовых стилей автоматически.
• Font Ninja — анализирует, какие шрифты используются в макете, даже если они не установлены локально.

Работа с типографскими системами и стилями

Увеличение шрифта — это не просто одиночная операция, а часть более широкой типографской системы. В профессиональном дизайне важно не просто сделать текст «побольше», а обеспечить согласованность, иерархию и масштабируемость.
Figma позволяет создавать текстовые стили, которые можно применять к любым текстовым объектам. Например, вы можете создать стиль «Heading 1» с размером 32 pt, жирным начертанием и определённым цветом. Все экземпляры этого стиля будут синхронизированы: измените один — обновятся все.
Это особенно важно при работе в команде. Дизайнеры, работающие над одним проектом, могут использовать единые стили, что исключает путаницу и гарантирует визуальную согласованность. Разработчики также получают чёткие спецификации, что ускоряет верстку.

Как создать текстовый стиль

1. Настройте текст: шрифт, размер, начертание, цвет, интерлиньяж.
2. Выделите текстовый объект.
3. В правой панели нажмите значок «•••» рядом с названием стиля.
4. Выберите «Create text style» и задайте имя (например, «Body / Large / Regular»).
5. Применяйте стиль к другим текстам через выпадающий список.

Типичные ошибки при изменении шрифта

Даже опытные дизайнеры допускают ошибки при работе с размером текста. Одна из самых частых — использование произвольных значений без системы. Например, вместо единой шкалы (12, 14, 16, 20, 24, 32 pt) дизайнер вводит 15, 17.5, 22.3 — это нарушает визуальную гармонию и усложняет жизнь разработчикам.
Другая ошибка — изменение размера шрифта без учёта межстрочного интервала. Увеличив шрифт до 28 pt, вы оставляете line height на уровне 1.2, что делает текст плотным и трудночитаемым. Рекомендуется использовать коэффициенты: 1.4–1.6 для основного текста, 1.1–1.3 для заголовков.
Также распространена проблема с автомасштабированием текста. Figma позволяет привязывать высоту текстового фрейма к содержимому («Auto height»). Если вы увеличиваете шрифт, но фрейм не растягивается, текст может обрезаться. Всегда проверяйте, включена ли опция «Auto» для высоты.

Как избежать ошибок

• Используйте типографскую сетку и шкалу размеров.
• Создавайте стили вместо ручного форматирования.
• Проверяйте поведение текста при изменении размера (обрезание, переносы).
• Тестируйте макет на разных устройствах и в режиме презентации.

Доступность и читаемость: почему размер шрифта критичен

Размер шрифта напрямую влияет на доступность интерфейса. По данным WebAIM, более 80% пользователей с нарушениями зрения используют увеличение текста. Если ваш дизайн не поддерживает читаемость при увеличении, вы исключаете значительную часть аудитории.
Рекомендации WCAG (Web Content Accessibility Guidelines) предписывают минимальный размер основного текста — 16 pt (или 1rem) при нормальной контрастности. Заголовки должны быть пропорционально крупнее, чтобы обеспечивать чёткую иерархию.
Figma позволяет моделировать такие сценарии. Создайте отдельные фреймы с увеличенным текстом (например, +200%) и проверьте, как ведёт себя макет. Не обрезается ли текст? Сохраняется ли кликабельная область? Адаптируются ли карточки?

Проверочный чек-лист доступности

• Основной текст ≥ 16 pt.
• Контраст текста и фона соответствует нормам (AA или AAA).
• При увеличении текста макет не ломается.
• Есть альтернативные способы навигации (иконки, кнопки).
• Текст не обрезается при изменении размера.

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

Профессиональные дизайнеры подходят к размеру шрифта системно. Они не просто «увеличивают», а проектируют типографскую архитектуру. Это включает выбор шрифтов, построение шкал, настройку интерлиньяжа и тестирование на разных устройствах.
Один из ключевых принципов — модульная шкала. Она основана на математических отношениях (например, 1.25, 1.5, 1.618) и создаёт визуально гармоничную иерархию. Такой подход делает интерфейс более предсказуемым и приятным для глаза.
Практический совет: начните с базового размера (16 pt), затем умножайте его на выбранный коэффициент. Например:

• 16 × 1.25 = 20 pt (подзаголовок)
• 20 × 1.25 = 25 pt (заголовок)
• 25 × 1.25 = 31.25 pt (h1)

Такая система легко масштабируется и интегрируется в дизайн-системы. Кроме того, она упрощает работу с разработчиками: достаточно передать таблицу размеров и коэффициент.

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

Заключение

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

• Различайте масштабирование холста и изменение размера шрифта.
• Используйте текстовые стили для согласованности и эффективности.
• Автоматизируйте рутину с помощью плагинов.
• Следите за доступностью: минимум 16 pt для основного текста.
• Стройте типографику на основе модульной шкалы для гармонии.