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

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

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

Самый простой способ изменить размер шрифта — выделить текстовый слой и перейти в панель свойств справа. Там вы найдёте поле «Size», где отображается текущее значение в пикселях. Просто введите новое число — например, 18 вместо 16 — и нажмите Enter. Figma мгновенно применит изменение. Важно: если вы выделили несколько текстовых слоёв с разными размерами, ввод нового значения применится ко всем сразу, но только если они используют один и тот же стиль. Если стили различаются — Figma отобразит «Mixed» и не позволит изменить размер через поле ввода, пока вы не выберете единый стиль.

Представьте, что вы проектируете интерфейс мобильного приложения и вам нужно увеличить заголовки с 20 до 24 пикселей. Простое ручное изменение может занять несколько минут, если текстовых блоков десятки. Гораздо эффективнее — использовать стили текста, о которых речь пойдёт ниже. Но даже при ручном изменении важно помнить: Figma работает с размером шрифта в пикселях, а не в пунктах (pt), как в Adobe Photoshop. Это связано с тем, что Figma ориентирован на веб- и мобильные интерфейсы, где пиксель — базовая единица измерения.

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

Как использовать стили текста для единого форматирования

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

Чтобы создать стиль текста: выделите текстовый слой, перейдите в панель свойств, нажмите на значок «+» рядом с полем «Text Style» и задайте имя, например, «H1 / Bold / 24». Теперь любой новый текстовый слой можно привязать к этому стилю, просто выбрав его из выпадающего списка. Если позже вы решите изменить размер с 24 на 26 — достаточно отредактировать сам стиль, и все его экземпляры обновятся мгновенно.

Для удобства рекомендуется структурировать стили по иерархии: H1, H2, H3, Body, Caption, Button. Используйте префиксы, чтобы быстро находить нужный стиль — например, «Typography / H1 / Bold». Это особенно важно в командах: когда разработчики и тестировщики знают, что «H1» всегда соответствует 24px, они не тратят время на уточнения.

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

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

Создайте основной компонент кнопки, добавьте внутрь текстовый слой. Затем перейдите в панель «Properties» → «Component properties» → «Add property» → выберите «Text». Теперь вы можете создать вариации: «Default», «Large», «Small». В каждой вариации задайте свой размер шрифта. При использовании компонента на макете вы сможете переключать вариации — и размер текста изменится автоматически.

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

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

Частые ошибки при изменении размера шрифта и как их избежать

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

• Изменение размера вручную без стилей. Это приводит к хаосу: 15 разных значений для «заголовка 2», и никто не знает, какой из них — правильный. Решение: создавайте и используйте стили текста.
• Использование нестандартных значений. Например, 17px или 23px. В дизайн-системах приняты кратные значения: 8, 12, 16, 20, 24, 32. Это упрощает верстку и согласование с разработчиками. Решение: придерживайтесь сетки на 4 или 8px.
• Неправильное выравнивание текста. При изменении размера шрифта текст может смещаться, если выравнивание не установлено в «Top» или «Center». Особенно заметно в кнопках. Решение: всегда проверяйте «Vertical alignment» в свойствах текста.
• Изменение размера через масштабирование (Scale). Некоторые пользователи выделяют текст и тянут за углы — это изменяет не размер шрифта, а масштаб всего слоя, что искажает пропорции. Решение: никогда не используйте Scale для текста. Только поле «Size».

Если вы видите, что текст обрезается после изменения размера — проверьте высоту фрейма или контейнера. Figma не автоматически увеличивает высоту блока при увеличении шрифта, если он не настроен на «Auto layout». Включите Auto Layout (в панели свойств) — тогда контейнер будет подстраиваться под содержимое.

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

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

1. Ctrl + Shift + > (Cmd + Shift + > на Mac) — увеличить размер на 2px.
2. Ctrl + Shift + < (Cmd + Shift + < на Mac) — уменьшить размер на 2px.
3. Ctrl + Alt + Shift + > (Cmd + Option + Shift + >) — увеличить на 10px.
4. Ctrl + Alt + Shift + < (Cmd + Option + Shift + <) — уменьшить на 10px.

Эти комбинации работают только при выделенном текстовом слое. Если вы работаете с несколькими текстовыми элементами — они изменятся все одновременно. Это идеально для быстрой настройки макетов в режиме прототипирования.

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

Адаптивная типографика: масштабирование шрифтов под разные экраны

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

Создайте компонент «Text Block» с тремя вариациями: Mobile (16px), Tablet (18px), Desktop (20px). Затем используйте его в разных фреймах — для каждого разрешения. При этом сохраняйте один и тот же стиль текста, чтобы цвет, межстрочный интервал и шрифт оставались согласованными. Для более сложных сценариев используйте плагины, такие как «Type Scale» или «Fontify», которые автоматически генерируют каскады шрифтов на основе базового размера.

Также можно применять «Constraints» (ограничения) к текстовым слоям. Например, если вы хотите, чтобы заголовок оставался в центре при изменении ширины экрана — установите «Horizontal» в «Center». Но помните: ограничения не влияют на размер шрифта, только на положение.

При тестировании адаптивности используйте функцию «Preview» (Ctrl/Cmd + P). Она покажет, как текст будет выглядеть на разных устройствах. Если шрифт кажется слишком мелким — не увеличивайте его вручную, а создайте новую вариацию компонента с корректным размером.

Экспертное мнение: как дизайнеры крупных продуктов управляют типографикой

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

Они используют плагин «Style Dictionary» для экспорта стилей в CSS-переменные. Это позволяет разработчикам напрямую подключать дизайн-систему к коду без ручного перевода значений. Также все стили текста имеют имена в формате `typography/{level}/{weight}/{size}` — например, `typography/h2/bold/24`. Это делает поиск и поддержку максимально прозрачными.

Часто задаваемые вопросы

Заключение

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

Системный подход к типографике снижает количество ошибок, ускоряет ревью и делает дизайн-систему живым, поддерживаемым документом. Даже если вы работаете в одиночку — внедрение этих практик окупится уже на втором проекте.

• Всегда используйте стили текста — не редактируйте размер вручную.
• Применяйте 8-пиксельную сетку для кратности значений.
• Используйте компоненты с вариациями для адаптивной типографики.
• Не изменяйте размер через масштабирование — только поле «Size».
• Оптимизируйте работу с горячими клавишами и Auto Layout.