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

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

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

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

Базовое изменение размера текста

Изменение размера текста в Figma начинается с простого действия: выделения текстового слоя. После этого в правой панели свойств (Inspector) появляются параметры шрифта, включая размер. Поле «Font size» позволяет ввести значение вручную или использовать стрелки для увеличения/уменьшения. Размер указывается в пикселях (px), что стандартно для цифровых интерфейсов.

Вы можете быстро изменить размер с помощью горячих клавиш. На Windows: Ctrl + «+» или Ctrl + «–». На macOS: Cmd + «+» или Cmd + «–». Эти комбинации увеличивают или уменьшают размер шрифта с шагом в 1 px. Если зажать Shift вместе с этими клавишами, шаг изменится на 10 px, что удобно при работе с крупными заголовками или абзацами.

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

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

Пошаговый алгоритм изменения размера

1. Выберите текстовый слой с помощью инструмента «Text» (T) или щелчком в слоях (Layers panel).
2. Перейдите в правую панель свойств и найдите раздел «Text».
3. Найдите поле «Font size» и введите новое значение или используйте стрелки.
4. Проверьте, как текст отображается в контексте макета — не перекрывает ли он другие элементы.
5. При необходимости скорректируйте межстрочный интервал (Line height), чтобы сохранить читаемость.

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

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

Создание текстового стиля происходит после настройки текстового блока. После того как вы задали нужный размер, шрифт и другие параметры, нажмите на значок «+» рядом с названием стиля в правой панели. Откроется окно, где нужно ввести имя стиля, например «Heading 1», «Body Text» или «Caption Small». После сохранения этот стиль можно применять к любым другим текстовым слоям.

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

Как создать и применить текстовый стиль

• Настройте текстовый блок: выберите шрифт, размер, цвет и интервалы.
• В правой панели нажмите «+» рядом с выпадающим списком стилей.
• Введите понятное имя, например «Button Text Medium».
• Нажмите «Create style».
• Теперь этот стиль доступен во всех текстовых слоях проекта.

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

Иногда кажется, что изменение размера текста произошло само собой. На самом деле, вы могли просто изменить масштаб просмотра макета. Figma позволяет масштабировать холст с помощью колеса мыши с зажатым Ctrl (Windows) или Cmd (macOS). Это не влияет на реальные размеры элементов, а лишь меняет их отображение на экране.

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

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

Если вы работаете с компонентами, можно использовать Instance swapping — замену экземпляров компонентов с разными размерами текста. Это достигается через варианты компонентов (Component Properties), где можно задать разные текстовые стили для разных состояний.

Когда использовать Scale, а когда — ручное изменение?

• Используйте Scale: при быстрой адаптации прототипа, при работе с иконками и иллюстрациями, при временных презентациях.
• Лучше изменять вручную: при работе с текстом в готовом интерфейсе, при соблюдении дизайн-системы, при передаче макетов разработчикам.

Создание системы типографики

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

Начните с определения уровней: H1, H2, H3, Body, Caption. Каждому уровню присвойте конкретный размер, шрифт и интервал. Используйте модульную шкалу (например, 1.2, 1.5, 2.0) для создания гармоничного перехода между размерами. Например, если основной текст — 16 px, то H1 может быть 16 × 1.5 × 1.5 = 36 px.

Figma позволяет хранить эти стили в библиотеке, чтобы использовать в других файлах. Через меню «Local Components» или «Team Library» вы можете опубликовать свои текстовые стили и применять их в новых проектах. Это особенно важно для командной работы.

Плагины, такие как Text Style Organizer, Typografier или Auto Typography, помогают автоматизировать создание и применение стилей. Они могут анализировать ваш макет и предлагать оптимизации, например, объединение похожих стилей или исправление несоответствий.

Шаги к созданию типографской системы

1. Определите базовые размеры: основной текст, заголовки, подписи.
2. Настройте шрифтовые параметры: семейство, насыщенность, интервалы.
3. Создайте текстовые стили в Figma и назовите их понятно.
4. Протестируйте стили в нескольких макетах.
5. Опубликуйте в библиотеке для командного доступа.

Типичные ошибки и как их избежать

Одна из самых распространённых ошибок — отсутствие единой системы текста. Дизайнеры часто создают новые стили «на лету», что приводит к дублированию и путанице. Например, два стиля «Body» с размерами 16 px и 16.5 px. Это затрудняет поддержку и увеличивает время правок.

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

Также часто забывают про доступность. Слишком мелкий текст (менее 14 px) плохо читается, особенно людям с нарушениями зрения. Рекомендуется придерживаться WCAG: минимальный размер основного текста — 16 px, а контраст — не менее 4.5:1.

Чек-лист перед финализацией текста

• Все текстовые элементы используют стили из библиотеки?
• Нет дублирующихся или неиспользуемых стилей?
• Размеры соответствуют типографской иерархии?
• Проверена читаемость на малых экранах?
• Контраст текста и фона соответствует нормам доступности?

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

Интервью с Мариной Петровой, старшим продукт-дизайнером в IT-компании

«Когда я только начинала в Figma, я меняла размер текста в каждом блоке отдельно. Уже на втором проекте это стало кошмаром: клиент попросил увеличить все заголовки на 2 px, и мне пришлось делать это вручную для 70 экранов. С тех пор я начинаю любой проект с типографской системы.

Сейчас у нас в команде есть единая библиотека стилей. Мы используем модульную шкалу 1.125, что даёт плавные переходы между размерами. Все новые проекты наследуют эту систему. Это экономит не только время, но и снижает когнитивную нагрузку у команды.

Советую всем: не экономьте время на старте. Потратьте 30 минут на настройку стилей — вы сэкономите десятки часов в будущем.»

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

Заключение

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

• Всегда используйте текстовые стили вместо ручного задания размера.
• Масштабируйте текст физически только при необходимости, иначе — меняйте стиль.
• Создавайте иерархию текста на основе модульной шкалы.
• Проверяйте читаемость и доступность текста на всех устройствах.
• Автоматизируйте повторяющиеся задачи с помощью плагинов и библиотек.