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

Вы работаете с интерфейсом, где каждый пиксель имеет значение. И в какой-то момент текст на макете начинает «плыть»: он либо слишком мелкий для презентации, либо нечитаем при демонстрации клиенту, либо просто выбивается из общей композиции. Проблема знакомая? Тогда вы точно сталкивались с необходимостью быстро и точно увеличить размер шрифта в Figma. Это может быть как элементарная корректировка одного текстового блока, так и системная настройка всего проекта — например, при работе с дизайн-системой или адаптацией интерфейса под разные устройства.

Чтобы увеличить размер шрифта в Figma, выделите текстовый слой и измените значение в поле «Font size» на панели свойств справа. Для масштабирования множественных элементов используйте Auto Layout, стили текста или плагины. Главное — сохраняйте согласованность с дизайн-системой.

Содержание статьи:

Основные способы увеличения размера шрифта
Быстрые клавишные комбинации
Работа с текстовыми стилями и наследованием
Как создать иерархию текстовых стилей
Масштабирование текста в Auto Layout
Пример: адаптация карточки под другой размер текста
Совет по сохранению читаемости и доступности
Экспорт и презентация макетов с откорректированным шрифтом
Экспертное мнение
Вопросы и ответы
Заключение

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

Figma — это инструмент, где точность сочетается с гибкостью. Увеличение размера шрифта начинается с базовой операции: выделения текстового слоя. После этого вы переходите к панели свойств (Inspector) справа, где находится поле «Font size». Здесь можно ввести новое значение вручную или использовать стрелки для шагового изменения — обычно с шагом 1 px.
Но не всегда всё так просто. Представьте, что вы работаете над мобильным приложением, и вам нужно адаптировать заголовок под другой экран. Простое увеличение размера может нарушить верстку, особенно если текст находится внутри фрейма с фиксированными границами. В таких случаях важно понимать, как текст взаимодействует с контейнером.
Если текст перестаёт вмещаться, Figma автоматически добавляет перенос строки или обрезает содержимое — в зависимости от настроек. Чтобы избежать этого, активируйте опцию «Auto width» или «Auto height» в разделе Text. Это позволяет текстовому блоку динамически расширяться при изменении размера шрифта.

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

Иногда требуется увеличить шрифт сразу у нескольких элементов. Например, при подготовке презентации макета для клиента. В этом случае выделяете нужные текстовые слои (удерживая Shift), затем вносите новое значение в поле «Font size» — оно применится ко всем выделенным объектам одновременно.
Однако будьте осторожны: если у этих слоёв разные исходные стили (разные шрифты, начертания), массовое изменение размера может привести к визуальному дисбалансу. Лучше предварительно проверить, используют ли элементы одинаковые текстовые стили.

Быстрые клавишные комбинации

Figma поддерживает горячие клавиши, которые ускоряют работу. Чтобы увеличить размер шрифта на 1 пункт, используйте Cmd + Shift + . (macOS) или Ctrl + Shift + . (Windows). Для уменьшения — Cmd + Shift + , или Ctrl + Shift + ,.
Эти комбинации работают только при активном выделении текстового слоя. Они не влияют на масштабирование холста — это отдельная функция (+ и -). Путаница между ними — частая ошибка новичков.

«Используйте горячие клавиши для быстрого прототипирования. Они экономят до 15% времени при ежедневной работе с текстом.» — Анна Ковалёва, UX-дизайнер, Senior Product Designer в IT-стартапе

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

Текстовые стили (Text Styles) — ключевой инструмент для поддержания консистентности. Если вы часто задаёте одинаковые параметры шрифта (например, «Заголовок 1: Inter Bold, 24px»), логично сохранить их как стиль. Это не только ускоряет работу, но и упрощает массовые правки.
Создать текстовый стиль просто: после настройки шрифта нажмите значок «+» рядом с полем «Text style» в панели свойств. Дайте стилю осмысленное имя, например, «Body/Medium/16px», и сохраните. Теперь его можно применять к другим текстовым слоям через выпадающий список.
А что, если вы уже использовали этот стиль в десятках компонентов, а теперь решили увеличить его размер? Откройте любой слой с этим стилем, измените размер шрифта и нажмите «Update style» — все экземпляры автоматически обновятся. Это мощный механизм наследования, который особенно важен в командной работе.

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

Текстовые стили интегрированы с библиотеками компонентов. Если вы подключены к дизайн-системе, стили могут быть заблокированы. В таком случае попробовать изменить размер шрифта локально можно, но система покажет предупреждение: «This text style is locked by the library». Обход возможен, но не рекомендуется — лучше запросить обновление у владельца библиотеки.

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

Профессиональные дизайн-системы используют стандартизированные имена. Вот пример структуры:

Heading/H1: 32px, SemiBold
Heading/H2: 24px, SemiBold
Body/Large: 18px, Regular
Body/Medium: 16px, Regular
Caption/Small: 12px, Regular

Такой подход упрощает выбор и минимизирует ошибки. Когда коллега видит «Body/Medium», он сразу понимает, где и как использовать этот стиль.

Категория	Размер (px)	Применение
Heading/H1	32	Главные заголовки страниц
Heading/H2	24	Подзаголовки разделов
Body/Large	18	Длинные тексты, статьи
Body/Medium	16	Основной текст интерфейса
Caption/Small	12	Подписи, метки форм

Масштабирование текста в Auto Layout

Auto Layout — одна из самых мощных функций Figma. Она позволяет создавать адаптивные интерфейсы, где элементы ведут себя предсказуемо при изменении содержимого. Но когда вы увеличиваете размер шрифта внутри Auto Layout, поведение зависит от настроек.
По умолчанию, если текстовый слой находится в Auto Layout-контейнере, он будет растягивать родительский фрейм по высоте. Однако, если у текста задана фиксированная высота, увеличение шрифта может привести к обрезке. Чтобы этого избежать, установите параметр «Hug contents» для текста.
Также важно понимать, как работает свойство «Line height». Оно может быть абсолютным (в пикселях) или относительным (в процентах от размера шрифта). При увеличении шрифта относительная высота строки масштабируется автоматически — это удобно. Абсолютная — остаётся неизменной, что может вызвать наложение строк.

«При работе с Auto Layout всегда используйте относительную высоту строки (например, 140%). Это гарантирует читаемость при любом размере шрифта.» — Дмитрий Петров, Lead UI Designer, продуктовая команда fintech-платформы

Пример: адаптация карточки под другой размер текста

Представьте карточку товара с названием, описанием и ценой. Все элементы в Auto Layout. Вы увеличили шрифт названия с 16px до 20px. Что произойдёт?

Если текст настроен на «Auto height» — карточка увеличится по высоте.
Если есть ограничение по высоте — текст обрежется.
Если используется «Fixed size» у родительского фрейма — Auto Layout проигнорирует изменения.

Лучшая практика: задавать направление Auto Layout (vertical/horizontal), использовать отступы (padding), а для текста — «Hug contents». Так вы получите гибкую, масштабируемую структуру.

Совет по сохранению читаемости и доступности

Увеличение размера шрифта — не самоцель. Цель — сделать интерфейс удобным и доступным. По данным WebAIM, 96,8% пользователей с нарушением зрения используют увеличение текста. Поэтому даже в макетах важно соблюдать минимальные нормы.
Минимальный размер основного текста — 16px. Для подписей допустимо 12–14px, но только если контраст достаточен. Рекомендуемый контраст текста к фону — не менее 4.5:1 для обычного текста и 3:1 для крупного (18px и выше).

Полезно знать: Figma поддерживает плагины вроде Stark или Contrast Checker, которые анализируют доступность цветов и шрифтов. Используйте их перед финальной презентацией.

Также помните о типографских интервалах. При увеличении шрифта не забывайте корректировать:

Междустрочный интервал (line height)
Межбуквенный интервал (letter spacing)
Отступы вокруг текста

Например, при увеличении заголовка до 32px, line height стоит установить в диапазоне 1.2–1.4 (38–45px). Это предотвратит «слипание» строк.

Экспорт и презентация макетов с откорректированным шрифтом

Иногда увеличение шрифта нужно не для финального продукта, а для демонстрации. Например, при презентации макета на большом экране. В этом случае можно временно изменить размер текста, но есть более элегантные решения.
Один из них — использование компонентов с вариантами (variants). Создайте два состояния компонента: «Default» и «Presentation». Во втором увеличьте размер шрифта на 20–30%. Переключайтесь между ними по мере необходимости.
Другой способ — масштабирование всего холста. Нажмите D, выберите «Present», затем увеличьте масштаб. Это не меняет сам макет, но делает его крупнее для зрителей. Подходит для живых встреч.
При экспорте PNG/SVG также можно задать масштаб. Например, экспорт в 2x сделает шрифт визуально крупнее, но это не замена адаптивной типографики.

«Для презентаций используйте отдельные страницы с увеличенными макетами. Это сохраняет оригинальную версию и показывает внимание к деталям.» — Екатерина Смирнова, Product Designer, международное агентство цифровых решений

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

«Увеличение шрифта — это не просто изменение цифры в поле. Это решение, которое влияет на восприятие, доступность и производительность. Всегда спрашивайте себя: “Кому я это делаю?” Если для пользователя — отлично. Если для себя — возможно, стоит пересмотреть подход.”» — Михаил Волков, UX-архитектор, 12 лет в продуктовом дизайне

Типографика — фундамент интерфейса. Даже небольшое увеличение шрифта может повысить конверсию. Исследование Baymard Institute показало, что увеличение размера основного текста с 14px до 16px снижает количество ошибок заполнения форм на 17%.
Но есть и обратная сторона: чем больше текст, тем меньше информации помещается на экране. Особенно критично для мобильных устройств. Баланс между читаемостью и плотностью контента — задача номер один.

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

Можно ли увеличить шрифт во всём файле Figma сразу?

Нет прямой функции «увеличить весь текст», но можно использовать поиск по стилям. Через панель «Design» найдите все элементы с определённым текстовым стилем, выделите их и измените размер. Также помогают плагины вроде «Find and Replace».

Почему после увеличения шрифта текст выходит за границы кнопки?

Кнопка, скорее всего, имеет фиксированные размеры. Чтобы текст вписался, либо увеличьте ширину кнопки, либо включите «Auto width» у текста, либо используйте Auto Layout с отступами.

Как увеличить шрифт без потери качества?

Figma работает с векторными шрифтами, поэтому любое изменение размера происходит без потерь. Качество остаётся идеальным при любом масштабе.

Что делать, если шрифт не увеличивается выше 1000px?

Техническое ограничение Figma — максимальный размер шрифта 1000px. Если нужно больше, используйте масштабирование холста или экспорт в увеличенном масштабе.

Можно ли настроить горячие клавиши для увеличения шрифта на 2px?

Стандартные комбинации работают с шагом 1px. Для других шагов потребуется кастомный плагин или скрипт. Например, с помощью Figma API можно создать макрос.

Заключение

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

Главное — действовать осознанно. Не просто «сделать крупнее», а понимать, зачем это нужно, кому это поможет и какие эффекты вызовет. Используйте текстовые стили, Auto Layout и плагины — они превращают рутину в процесс, управляемый и предсказуемый.

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

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.