Размер текста в Figma напрямую влияет на читабельность и визуальную иерархию дизайна. Правильно подобранный масштаб шрифта помогает пользователям быстрее воспринимать информацию и взаимодействовать с интерфейсом. Дизайнеры ежедневно сталкиваются с необходимостью точно изменять параметры текстовых элементов для создания понятных и привлекательных макетов.
Figma предлагает несколько способов выбирать и настраивать размеры шрифтов: через панель свойств, горячие клавиши или контекстное меню. Каждый метод имеет свои преимущества в зависимости от конкретной задачи и привычек дизайнера. Масштабирование текста может применяться как к отдельным элементам, так и к группам объектов одновременно.
Правильное управление текстовыми стилями позволяет создавать консистентные интерфейсы и экономить время при работе над крупными проектами. Автоматизация процессов через компоненты и стили помогает поддерживать единый визуальный язык во всех частях дизайн-системы, избегая ручного изменения каждого текстового блока.
Как изменить размер текста через панель свойств в Figma
Панель свойств в Figma предоставляет быстрый доступ к изменению размера текста без использования горячих клавиш. Рассмотрим основные способы работы с текстом через панельные инструменты:
- Выделите текстовый блок в рабочей области
- Найдите в правой панели раздел 'Text'
- Измените размер одним из способов:
- Введите конкретное числовое значение в поле Size
- Используйте стрелки 'вверх/вниз' возле поля Size
- Перетащите ползунок, удерживая курсор на значении размера
Дополнительные параметры настройки размера:
- Активируйте Auto Layout для автоматического масштабирования текстового блока
- Установите фиксированную ширину текстового поля через Width
- Настройте межстрочный интервал через Line height
- Задайте масштаб букв через Scale
При работе с множеством текстовых элементов:
- Выделите несколько текстовых блоков через Shift
- Измените размер для всех элементов одновременно
- Проверьте корректность отображения в различных состояниях фрейма
Быстрые клавиши для масштабирования шрифта в Figma
Масштабирование шрифта через горячие клавиши значительно ускоряет работу в Figma. Выбирать нужный размер текста можно следующими комбинациями:
• Cmd/Ctrl + Shift + > – увеличить размер на 1px
• Cmd/Ctrl + Shift + < – уменьшить размер на 1px
• Alt + стрелка вверх – увеличить размер на 10px
• Alt + стрелка вниз – уменьшить размер на 10px
Текстовый блок можно изменять и непосредственно во время набора. Зажмите клавишу Alt и прокручивайте колесо мыши – размер будет меняться с шагом в 1px. При одновременном удержании Shift шаг увеличится до 10px.
При работе с несколькими текстовыми элементами используйте множественное выделение (Shift + клик) – горячие клавиши применятся ко всем выбранным объектам одновременно. Для точной синхронизации размеров выделите исходный и целевой текст, затем нажмите Cmd/Ctrl + Alt + C для копирования свойств и Cmd/Ctrl + Alt + V для их вставки.
Способы группового изменения размера текста для нескольких элементов
Для массового изменения размера текста в Figma существует несколько специальных приемов работы с множественным выделением:
| Метод | Действия |
|---|---|
| Выделение через слои | Зажмите Shift и выбирайте нужные текстовые блоки в панели слоев слева |
| Выделение на холсте | Удерживая Shift, кликайте по текстовым элементам или обведите их рамкой выделения |
После выделения нескольких текстовых элементов можно:
1. Изменять размер через поле Font size в правой панели - новый размер применится ко всем выбранным элементам
2. Использовать операцию масштабирования (Scale tool) - позволяет пропорционально менять размер текста вместе с контейнером
3. Применять стили текста из библиотеки компонентов - одним кликом обновить параметры для группы элементов
При работе с множественным выделением Figma отображает среднее значение размера шрифта, если у элементов были разные значения. При вводе нового размера он применится ко всем выбранным объектам.
Настройка размера шрифта через Auto Layout в Figma
Auto Layout позволяет автоматически подстраивать размер текстового блока при изменении шрифта. Чтобы настроить текст через Auto Layout, выделите текстовый элемент и нажмите Shift + A для активации функции.
После включения Auto Layout откройте свойства фрейма в правой панели. В разделе 'Text' выберите параметр 'Auto Height' - это обеспечит динамическое изменение высоты блока при масштабировании шрифта. Для контроля ширины установите 'Fixed Width'.
При работе с многострочным текстом в Auto Layout можно изменять размер шрифта, сохраняя пропорции между строками. В настройках 'Spacing Between' укажите значение 'Auto' для автоматического расчета интервалов.
В разделе 'Constraints' Auto Layout позволяет зафиксировать минимальный и максимальный размер шрифта. Установите параметры 'Min Font Size' и 'Max Font Size', чтобы текст не выходил за допустимые границы при масштабировании.
Для responsive-дизайна выбирайте опцию 'Fill Container' в свойствах текстового блока. Это позволит шрифту автоматически подстраиваться под размер родительского элемента при изменении его масштаба.
Создание текстовых стилей с фиксированным размером шрифта
Текстовые стили помогают сохранять фиксированные размеры шрифта для разных элементов интерфейса. Чтобы создать новый текстовый стиль:
1. Откройте панель Styles в правом верхнем углу интерфейса Figma
2. Нажмите '+' возле Text styles для добавления нового стиля
3. Настройте параметры:
- Выбирайте имя стиля (например, 'H1/48px')
- Установите размер шрифта
- Определите начертание
- Задайте высоту строки
Для применения созданного стиля:
- Выделите текстовый элемент
- В панели свойств справа нажмите на иконку стилей
- Выберите нужный стиль из списка
При необходимости изменять размер в стиле:
- Откройте настройки стиля двойным кликом
- Обновите значение размера шрифта
- Изменения автоматически применятся ко всем элементам с этим стилем
Совет: Создавайте отдельные стили для заголовков разного уровня и основного текста. Используйте систему именования, отражающую размер шрифта (например, 'Body/16px', 'Caption/12px').
Проверка корректности размера шрифта для разных устройств
Для тестирования читаемости текста на различных экранах в Figma используйте функцию Device Preview. Выберите текстовый элемент и нажмите Ctrl + Alt + P (Windows) или Cmd + Alt + P (Mac) для активации предпросмотра.
Минимальные размеры шрифта для разных устройств:
- Мобильные: 14-16px для основного текста, 20-24px для заголовков
- Планшеты: 16-18px для основного текста, 24-28px для заголовков
- Десктоп: 16-20px для основного текста, 28-32px для заголовков
При проверке учитывайте расстояние просмотра:
- Смартфоны: 30 см
- Планшеты: 40 см
- Компьютеры: 60 см
Алгоритм проверки:
1. Создайте фреймы под каждое устройство
2. Скопируйте текстовые элементы
3. В панели Properties измените размер для каждого устройства
4. Активируйте режим Preview (Alt + P)
5. Проверьте текст на реальных устройствах через Share → Present
Рекомендация: При масштабировании между устройствами изменяйте размер шрифта с шагом 2px для сохранения визуальной иерархии.
Для автоматизации процесса создайте компонент с вариантами размеров под каждое устройство через Properties → Create Component Set.
