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

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

Основные шаги изменения размера шрифта

Figma предоставляет интуитивно понятный интерфейс для редактирования текста. Чтобы изменить размер шрифта, начните с выделения текстового слоя в рабочей области. После этого перейдите в правую панель свойств (Inspector), где расположены все параметры оформления.

В разделе «Text» найдите поле «Font size». Оно находится сразу под выбором шрифта и начертания. Вы можете ввести числовое значение вручную или использовать стрелки вверх/вниз для увеличения или уменьшения размера с шагом 1 pt. Для более точной настройки можно вводить дробные значения — например, 14.5 или 16.2.

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

Редактирование через контекстное меню

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

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

Точная настройка через клавиши

Для тонкой регулировки можно использовать горячие клавиши. При выделенном тексте нажмите Cmd/Ctrl + Plus (+) для увеличения размера на 1 pt и Cmd/Ctrl + Minus (-) для уменьшения. Эти комбинации работают только в том случае, если текст уже находится в режиме редактирования.

Если вы хотите изменить размер без входа в редактирование, воспользуйтесь панелью Inspector. Там же можно быстро переключаться между ранее использованными размерами, если они были сохранены как текстовые стили.

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

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

Чтобы создать текстовый стиль, сначала настройте текстовый элемент: выберите шрифт, размер, цвет, межстрочный интервал. Затем в правой панели нажмите значок «+» рядом с названием стиля (по умолчанию «Body», «Heading 1» и т. д.) или введите своё имя, например, «Button Text Small».

Созданный стиль автоматически появляется в выпадающем списке «Text style» и становится доступным во всём файле. Это особенно полезно при командной работе — все дизайнеры используют единые параметры, что исключает расхождения.

Глобальные стили и их преимущества

Текстовые стили в Figma бывают локальными и глобальными. Локальные действуют только в текущем файле, тогда как глобальные могут быть импортированы из библиотек (Team Library). Это позволяет централизованно управлять типографикой в масштабах всей компании.

Например, если в дизайн-системе задан стиль «H2 / 24 pt / Inter Medium», любой проект, подключённый к этой библиотеке, будет использовать именно эти параметры. При обновлении стиля в библиотеке все связанные экземпляры в файлах обновятся автоматически.

Массовое применение стилей

Если вы работаете с большим количеством текстовых элементов, можно использовать плагины, такие как Text Style Master или Find and Replace, чтобы быстро назначить нужный стиль всем фрагментам с определённым размером. Это помогает привести макет в соответствие с гайдлайнами за считанные минуты.

Сочетания клавиш для быстрого управления

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

Наиболее полезные комбинации:

• Cmd/Ctrl + Shift + > — увеличить размер шрифта на 1 pt;
• Cmd/Ctrl + Shift + < — уменьшить размер шрифта на 1 pt;
• Cmd/Ctrl + A — выделить весь текст в блоке;
• Alt + стрелки — перемещение курсора по словам;
• Cmd/Ctrl + K — быстрый доступ к ссылкам и стилям.

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

Совершенствование рабочего процесса

Профессиональные дизайнеры часто создают собственные шаблоны с предустановленными текстовыми стилями. Например, набор из 6 размеров: 12, 14, 16, 18, 24 и 32 pt, соответствующих H1–H6 и caption. Такой подход ускоряет старт новых проектов и снижает вероятность ошибок.

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

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

Новички в Figma часто допускают типичные ошибки при работе с размерами шрифтов. Понимание этих проблем помогает избежать потерь времени и неконсистентности в макетах.

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

Чтобы этого избежать, перед изменением размера блока убедитесь, что включена опция Preserve text sizing. Она находится в правой панели при активном Auto Layout. Если она отключена, текст будет растягиваться пропорционально контейнеру.

Проблемы с совместимостью при импорте

Ещё одна частая ситуация — импорт текста из других программ (например, Sketch или Adobe XD). При этом размеры шрифтов могут отображаться некорректно из-за различий в системах рендеринга.

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

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

Figma поддерживает динамическое изменение размера шрифта в зависимости от ширины контейнера. Эта функция называется Text auto resize и доступна в настройках текстового блока при включённом Auto Layout.

Включив этот режим, вы можете выбрать одно из двух поведений:

• Truncate — текст не меняет размер, но обрезается при нехватке места;
• Fill container — шрифт автоматически уменьшается или увеличивается, чтобы заполнить ширину блока.

Для большего контроля можно установить минимальный и максимальный размер шрифта. Например, задайте min: 12 pt, max: 24 pt. Тогда текст будет адаптироваться в этих пределах, не становясь слишком маленьким или огромным.

Это особенно полезно при создании адаптивных кнопок, карточек или мобильных интерфейсов, где длина текста может варьироваться (например, «Отправить» vs «Отправить сообщение»).

Практические примеры использования

Представьте, что вы проектируете форму входа. Поле ввода должно корректно отображать подсказки разной длины. Применив Text auto resize с min/max ограничениями, вы гарантируете, что текст всегда будет читаемым, независимо от языка или длины строки.

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

Экспорт текста и совместимость с другими инструментами

При экспорте макетов в PDF, PNG или SVG важно понимать, как Figma обрабатывает текст. По умолчанию текст остаётся векторным, что обеспечивает высокое качество при масштабировании. Однако при экспорте в растровые форматы (JPG, PNG) текст растеризуется.

Если вы передаёте макет разработчикам, рекомендуется использовать Dev Mode в Figma. Там они могут точно увидеть размер шрифта, межбуквенный интервал (tracking), высоту строки (line height) и другие параметры. Это исключает недопонимание при верстке.

Для интеграции с кодовой базой существуют плагины, такие как Tokens Studio, которые синхронизируют типографские значения из Figma в CSS-переменные. Например, размер 16 pt автоматически преобразуется в `font-size: 16px` (учитывая соотношение 1 pt = 1 px в вебе).

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

Мы поговорили с Дмитрием Петровым, старшим дизайнером в продуктовой команде SaaS-платформы, который более 5 лет использует Figma в производственных условиях.

«Главная ошибка новичков — это отсутствие системы. Они меняют размер шрифта «на глаз», не создавая стилей. В итоге в одном файле оказывается 15 вариантов «почти одинаковых» заголовков: 20 pt, 21 pt, 22 pt. Это хаос. Я рекомендую начинать любой проект с создания типографской шкалы: 12, 14, 16, 20, 24, 32, 48 pt. Чёткая сетка упрощает принятие решений и ускоряет согласование.

Также важно понимать, что размер шрифта — это не только эстетика, но и доступность. Текст меньше 14 pt трудно читать пользователям с ослабленным зрением. Мы придерживаемся WCAG 2.1: минимальный размер основного текста — 16 pt при нормальной контрастности.»

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

Заключение

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

• Размер шрифта изменяется в правой панели свойств через поле «Font size».
• Текстовые стили обеспечивают единообразие и ускоряют обновление макетов.
• Горячие клавиши и Auto Layout повышают производительность.
• Text auto resize позволяет создавать адаптивные текстовые блоки.
• Синхронизация через Team Library гарантирует единые стандарты в команде.