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

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

Основные способы изменения размера текста

Изменение размера шрифта в Figma — это базовая, но критически важная операция. Доступ к настройкам осуществляется через правую боковую панель, где отображаются свойства выбранного элемента. После выделения текстового блока в разделе «Text» появляется поле «Font size», в котором можно ввести числовое значение в пикселях.

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

Для быстрого доступа используйте сочетания клавиш. Нажатие Cmd/Ctrl + Shift + > увеличивает размер шрифта на 1 пиксель, а Cmd/Ctrl + Shift + < — уменьшает. Эти комбинации работают только при активном текстовом курсоре. Если нужно изменить несколько текстовых фреймов одновременно, выделите их все и задайте одинаковый размер за один раз.

• Выберите текстовый объект с помощью инструмента «Selection» (V).
• Перейдите в правую панель и найдите параметр «Font size».
• Введите новое значение или воспользуйтесь стрелками.
• Нажмите Enter, чтобы применить изменения.

Использование относительных единиц и масштабирования

Хотя Figma работает преимущественно в пикселях, важно понимать, что размер текста может визуально отличаться на разных устройствах. При масштабировании всего макета (через Zoom) сам размер шрифта не меняется — он остаётся привязанным к пикселям. Однако при использовании компонентов с Auto Layout вы можете настроить текст так, чтобы он масштабировался пропорционально контейнеру.

Для этого включите опцию «Auto width» или «Fixed width» в рамках Auto Layout, а затем установите ограничения на минимальный и максимальный размер шрифта. Это достигается с помощью плагинов или вручную через скрипты, так как нативной функции масштабирования текста в зависимости от ширины поля в Figma пока нет.

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

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

Чтобы создать текстовый стиль:

1. Настройте текст: выберите шрифт, размер, начертание, межстрочный интервал и цвет.
2. Выделите текстовый объект и нажмите на значок «Create style» (звёздочка) рядом с полем «Text».
3. Присвойте стилю осмысленное имя, например «Heading/H1/24px/Bold».
4. Сохраните. Теперь этот стиль будет доступен в выпадающем списке «Text style».

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

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

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

Совместное редактирование и адаптация для разных устройств

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

Когда вы изменяете размер текста внутри фрейма с Auto Layout, контейнер автоматически подстраивается под новый объём. Это особенно полезно при локализации интерфейсов, где длина текста может сильно различаться (например, английский и немецкий языки).

Адаптивный текст в прототипах

Хотя Figma не поддерживает медиазапросы как в CSS, вы можете имитировать адаптивное поведение текста с помощью вариантов компонентов. Например, создайте два состояния кнопки: для мобильного и десктопного макета, с разными размерами шрифтов. Затем свяжите их в прототипе через переходы.

Также можно использовать плагины, такие как «Responsive Font Size» или «Auto Responsive Text», которые автоматически подбирают размер шрифта в зависимости от ширины родительского контейнера. Эти инструменты особенно полезны при создании отзывчивых прототипов.

Ошибки и как их избежать

Одной из распространённых ошибок является использование произвольных размеров шрифтов без соблюдения сетки. Например, чередование 14px, 15px, 16px и 17px создаёт визуальный хаос и усложняет передачу макетов разработчикам. Вместо этого используйте масштабную линейку, например, 12–14–16–20–24–32–48.

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

• Не используйте более 4–5 различных размеров шрифтов в одном проекте.
• Избегайте дробных значений, если они не критичны (например, 14.5px).
• Не изменяйте размер текста через масштабирование объекта (Scale Tool) — это искажает шрифт и ломает экспорт.
• Не игнорируйте проверку читаемости: слишком мелкий текст (менее 12px) плохо воспринимается на мобильных экранах.

Экспорт и совместимость размеров текста

При экспорте макетов в PDF, PNG или SVG важно понимать, как размеры текста будут интерпретироваться разработчиками. Figma отображает размеры в пикселях, что удобно для front-end команд, работающих с CSS. Однако на устройствах с высокой плотностью пикселей (Retina) может потребоваться корректировка.

При передаче макетов через Figma Dev Mode разработчики видят точные значения font-size, line-height и letter-spacing. Вы можете добавить комментарии к текстовым блокам, указав особенности реализации (например, «использовать rem-единицы» или «адаптировать под viewport»).

Совместимость с другими инструментами

Если вы импортируете макеты из Sketch или Adobe XD, возможны расхождения в отображении размеров шрифтов. Это связано с разницей в рендеринге шрифтов между приложениями. Всегда проверяйте текстовые слои после импорта и при необходимости переназначайте стили.

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

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

— Елена Миронова, руководитель отдела дизайна в продуктовой компании, 12 лет в индустрии

Она также отмечает, что современные подходы к дизайн-системам требуют гибкости: «Мы всё чаще используем переменные шрифты и динамическое масштабирование. Хотя Figma пока не поддерживает variable fonts полностью, уже сейчас можно моделировать их поведение с помощью компонентов и плагинов.»

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

Заключение

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

• Всегда используйте текстовые стили вместо ручного форматирования.
• Соблюдайте иерархию шрифтов: не более 5 размеров на проект.
• Применяйте Auto Layout для адаптивного поведения текста.
• Проверяйте читаемость и контрастность на всех устройствах.
• Используйте плагины для автоматизации сложных сценариев.