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

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

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

Основные способы увеличения шрифта

Самый прямой способ изменить размер шрифта в Figma — использовать панель свойств справа. После выделения любого текстового объекта в правой панели активируется раздел «Text», где доступны параметры шрифта, включая размер. Поле «Font size» позволяет ввести числовое значение вручную, например 16, 24 или 32. Для быстрого изменения можно использовать стрелки вверх и вниз рядом с полем — каждое нажатие увеличивает или уменьшает размер на 1 единицу.
Кроме этого, Figma поддерживает горячие клавиши для изменения размера шрифта. На Windows это Ctrl + Shift + . (точка) для увеличения и Ctrl + Shift + , (запятая) для уменьшения. На macOS аналогично: Cmd + Shift + . и Cmd + Shift + ,. Эти комбинации особенно полезны при частой корректировке текста, поскольку позволяют не отрывать руки от клавиатуры.

• Выделите текстовый слой с помощью инструмента «Text» (T).
• Перейдите в правую панель свойств и найдите поле «Font size».
• Измените значение с помощью стрелок, ввода с клавиатуры или горячих клавиш.
• Наблюдайте за изменениями в макете в реальном времени.

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

Использование относительного изменения

Figma не предлагает встроенного механизма для процентного увеличения шрифта, но можно вручную рассчитывать новые значения. Например, если текущий размер 16 px, а нужно увеличить на 25%, новое значение составит 20 px. При частом использовании таких расчётов рекомендуется использовать плагины, автоматизирующие процесс.

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

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

1. Настройте текстовый блок с нужным размером шрифта и другими параметрами.
2. Выделите его и нажмите значок «Create style» (плюс) в поле «Text style» на правой панели.
3. Введите имя стиля, например «Heading 1 – 32px SemiBold».
4. Нажмите «Create», и стиль станет доступен во всех последующих проектах (если включена синхронизация библиотек).

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

Глобальные стили и библиотеки

Если вы работаете в команде, настройте общие библиотеки компонентов и стилей. Это позволяет централизованно управлять типографикой. Например, если главный дизайнер решает увеличить размер заголовков со 120 до 136 px, он меняет стиль в библиотеке, и все проекты, подключённые к ней, получают обновление.

Советы по удобному масштабированию интерфейса

Иногда пользователи путают увеличение шрифта в макете с масштабированием самого холста. Масштабирование (zoom) не влияет на реальные размеры элементов — оно лишь меняет отображение на экране. Тем не менее, правильное использование зума помогает точнее работать с мелкими деталями.
Чтобы увеличить масштаб, используйте:

• Колесо мыши + удерживание Alt (Windows) или Option (macOS);
• Горячие клавиши: + и - на клавиатуре;
• Инструмент Zoom (Z) на панели слева.

Для комфортной работы с текстом рекомендуется переключаться между масштабами 100%, 200% и «Fit to screen». На 200% легко проверять пиксель-перфект выравнивание, а на 100% — оценивать общее восприятие.

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

Одна из распространённых ошибок — изменение размера шрифта без использования стилей. Это приводит к фрагментации дизайна: один и тот же заголовок может иметь 24 px в одном месте и 25 px в другом. Со временем это усложняет поддержку и согласование с разработчиками.
Ещё одна проблема — попытка «растянуть» текстовый блок, чтобы увеличить шрифт. В Figma текст не масштабируется через трансформацию (как вектор). Растягивание текстового слоя изменит только ширину поля, но не размер букв. Это может привести к переносам строк и нарушению композиции.

Также стоит избегать «магических чисел» — случайных значений вроде 17.3 или 29.8. Лучше придерживаться сетки размеров, например: 12, 14, 16, 20, 24, 32, 48, 64. Это упрощает чтение макета и передачу данных в код.

Проверка читаемости

Увеличение шрифта — не всегда решение проблемы читаемости. Иногда важнее настроить контраст, межбуквенный интервал (tracking) или выбрать более подходящее начертание. Например, жирный шрифт на маленьком размере может быть хуже воспринимаем, чем обычный на чуть большем размере.

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

Мы пообщались с Дмитрием Соколовым, старшим UI-дизайнером в продуктовой команде fintech-стартапа, который уже 5 лет использует Figma в повседневной работе.

По его словам, команда также использует плагин «Text Style Manager» для массового редактирования и проверки соответствия дизайн-системе. «Это спасает при ребрендинге, когда меняется вся типографика. Без стилей мы бы потратили неделю, а так — пара часов.»

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

Заключение

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

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