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

В Figma — одном из самых популярных инструментов для дизайна интерфейсов — размер шрифта напрямую влияет на читаемость, визуальную иерархию и соответствие дизайн-системе. Неправильный размер текста может снизить удобство использования продукта, нарушить баланс макета и привести к переработке целых экранов. Многие новички сталкиваются с путаницей: почему шрифт не меняется при вводе числа? Почему текст выходит за границы контейнера? Как быстро применить единый размер по всему проекту? Ответы на эти вопросы — не просто технические детали, а ключевые навыки профессионального дизайнера. Умение точно и гибко управлять типографикой в Figma — это основа качественного UI-дизайна.

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

Изменение размера шрифта в Figma — одна из базовых, но критически важных операций. Для начала выделите текстовый слой на холсте или в панели Layers. Панель свойств (Properties) справа автоматически отобразит все параметры выбранного текста: семейство шрифта, размер, межстрочный интервал, выравнивание и цвет. В поле «Size» вы увидите текущее значение в пикселях (px). Просто кликните в это поле и введите нужное число — например, 16, 24 или 48. Figma мгновенно обновит отображение.

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

Для точной настройки можно использовать ползунок, который появляется при наведении на поле «Size». Перетаскивание позволяет плавно менять значение, а удержание клавиши Shift при этом даёт более точный контроль — шаг будет 1 px вместо 5. Это особенно важно при работе с мелким текстом, где даже 1 px может повлиять на читаемость.

Как работать со стилями шрифтов

Стили шрифтов — это ядро масштабируемой дизайн-системы. Вместо того чтобы каждый раз вручную настраивать размер, семейство и цвет текста, вы создаёте один стиль — например, «H1 / 36px / Semibold / #1A1A1A» — и применяете его ко всем заголовкам. Любое изменение этого стиля автоматически распространяется на все его экземпляры.

Чтобы создать стиль, выделите текстовый слой, нажмите на значок «+» рядом с полем «Text Style» в панели свойств. Дайте стилю понятное имя — например, «Heading / H2 / 24px / Medium». После этого вы можете применить этот стиль к другим текстовым слоям, просто выбрав его из выпадающего списка.

Если вы хотите изменить размер шрифта для всего проекта — например, поднять все H2 с 24 на 28 px — достаточно отредактировать один стиль. Figma обновит все связанные слои. Это экономит часы работы и исключает рассогласованность.

Не забывайте: если вы вручную изменили размер у слоя, который использует стиль, Figma покажет значок «Override» рядом с названием стиля. Это означает, что локальное изменение отвязано от общего стиля. Чтобы вернуться к стилю — нажмите кнопку «Reset to style».

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

Профессионалы Figma почти никогда не вводят размер вручную. Они используют горячие клавиши — это в разы быстрее и точнее. Вот основные комбинации:

1. Ctrl + Shift + > (Cmd + Shift + > на Mac) — увеличить размер шрифта на 2 px.
2. Ctrl + Shift + < (Cmd + Shift + < на Mac) — уменьшить размер на 2 px.
3. Alt + колесико мыши — плавное масштабирование размера шрифта. При удержании Alt прокрутка колесика меняет размер с шагом 1 px.
4. Ctrl + T (Cmd + T) — открывает окно редактирования текста, где можно сразу менять размер через панель.

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

Для ещё большей скорости можно настроить пользовательские горячие клавиши через Figma Plugins — например, создать команду «Increase H1 by 4px», которая будет работать по сочетанию Ctrl + Alt + H.

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

Даже опытные дизайнеры допускают типичные ошибки при изменении размера шрифта. Вот основные из них:

• Изменение размера через масштабирование слоя — если вы выделяете текстовый слой и тянете за угол, Figma масштабирует весь объект, включая ширину и высоту. Это нарушает типографику, делает текст размытым и несоответствующим стандартам. Всегда используйте поле «Size» или горячие клавиши.
• Отсутствие стилей — если каждый заголовок имеет свой размер, вы рискуете потерять согласованность. В крупных проектах это приводит к десяткам вариаций одного и того же элемента.
• Игнорирование межстрочного интервала — при увеличении размера шрифта межстрочный интервал (line height) не всегда адаптируется автоматически. Рекомендуется устанавливать его в 120–150% от размера шрифта для текста и 110–120% для заголовков.
• Работа без сетки — если вы не используете базовую шкалу (например, 8px или 4px), размеры шрифтов становятся произвольными. Это нарушает визуальную гармонию.

Чтобы избежать этих ошибок, используйте систему типографики на основе кратных значений: 8, 12, 16, 20, 24, 32, 40, 48. Такие размеры легко комбинируются, соответствуют мобильным и десктопным сеткам и легко масштабируются.

Адаптивная типографика в Figma

Сегодня почти все интерфейсы должны работать на разных устройствах — от смартфонов до 4K-мониторов. Figma позволяет создавать адаптивную типографику через компоненты и варианты. Например, вы можете создать один компонент «Button» с двумя вариантами: «Mobile» и «Desktop». В каждом варианте задаёте разные размеры шрифта — 16 px для мобильного и 18 px для десктопа.

Для ещё более точного контроля используйте функцию «Auto Layout». Когда текст находится внутри контейнера с Auto Layout, он автоматически подстраивается под ширину родительского блока. Если вы зададите фиксированный размер шрифта, он останется неизменным. Но если вы установите «Fill container» или используете «Scale» в настройках текста — размер будет адаптироваться.

Также можно использовать плагины, такие как «Type Scale» или «Fontify», которые автоматически генерируют типографическую шкалу на основе базового размера. Это особенно полезно для команд, которые работают над несколькими продуктами одновременно.

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

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

• Всегда используйте стили шрифтов для единого контроля над типографикой.
• Применяйте горячие клавиши Ctrl/Cmd + Shift + >/< для быстрого изменения размера.
• Никогда не масштабируйте текстовый слой через ручное изменение размера — это искажает пропорции.
• Соблюдайте типографическую шкалу (8px, 16px, 24px и т.д.) для визуальной гармонии.
• Тестируйте размеры шрифтов на реальных устройствах — то, что выглядит хорошо в Figma, может быть неразборчиво на экране.