Работа со шрифтами в Figma требует точного понимания настроек типографики. Создание bold-начертания текста часто вызывает вопросы у новичков, особенно при использовании нестандартных шрифтов вроде Pirania Pro или авторских гарнитур.
Настройка жирного текста напрямую влияет на читаемость интерфейса и общее восприятие дизайна. В отличие от других графических редакторов, Figma предлагает несколько способов создания bold-начертания: через встроенные настройки Font Weight, с помощью отдельных файлов шрифтов или через стили текста.
Многие дизайнеры допускают ошибку, применяя эффект bold к тексту без учета особенностей выбранного шрифта. Это приводит к искажению букв и потере качества отображения. В этой инструкции мы разберем правильные методы создания жирного начертания, которые обеспечат профессиональный результат.
Выделение текста и доступ к панели настроек шрифта в Figma
Для работы с текстовыми элементами в Figma предусмотрено несколько способов выделения. Двойной клик по тексту активирует режим редактирования, одиночный клик - выделяет весь текстовый блок целиком. При зажатой клавише Shift можно выбрать несколько текстовых элементов одновременно.
| Действие | Результат |
|---|---|
| Двойной клик + Drag | Выделение части текста внутри блока |
| Ctrl/Cmd + A | Выделение всего текста в активном блоке |
| Alt + клик | Копирование текстового слоя |
После выделения текста панель настроек шрифта автоматически отображается в правой части интерфейса Figma. Здесь доступны базовые параметры: выбор начертания bold, размер, межстрочный интервал. Дополнительные настройки открываются через кнопку с тремя точками в верхнем правом углу панели.
Для быстрого доступа к параметрам bold-начертания используйте сочетание клавиш Ctrl/Cmd + B. При работе с кириллицей убедитесь, что выбранный шрифт поддерживает русские символы в жирном начертании - некоторые шрифты в Figma содержат bold только для латиницы.
| Горячие клавиши | Назначение |
|---|---|
| Ctrl/Cmd + B | Применение bold-начертания |
| Ctrl/Cmd + / | Открытие панели стилей текста |
| T | Активация инструмента текст |
Изменение начертания текста через выпадающее меню Weight
В Figma настройка жирности текста через Weight открывает точный контроль над начертанием. После выделения text-элемента в правой панели находится выпадающий список Weight со значениями от 100 до 900.
Стандартные значения Weight в Figma:
- 400 - обычное начертание
- 500 - среднее начертание
- 700 - жирное начертание
- 900 - сверхжирное начертание
Для активации выпадающего меню Weight кликните на текущее значение толщины шрифта. При работе с системным шрифтом доступны только предустановленные варианты начертания. Загруженные шрифты могут предоставлять дополнительные опции Weight.
Практический совет: При создании текстовых стилей в Figma сохраняйте значение Weight вместе с другими параметрами шрифта для быстрого переиспользования. Это упрощает поддержание единого стиля в проекте.
Отсутствие нужного значения Weight указывает на ограничения выбранного шрифта. В таком случае замените шрифт на аналог с необходимым диапазоном начертаний или используйте стороннюю библиотеку pirania fonts.
Применение Bold-стиля с помощью горячих клавиш Ctrl+B
Быстрое форматирование текста в Figma доступно через сочетание клавиш Ctrl+B (для Windows) или Command+B (для Mac). При нажатии этой комбинации текст автоматически преобразуется в Bold-начертание без необходимости открывать дополнительные меню.
Особенность работы горячих клавиш в Figma заключается в том, что они применяют максимально жирное начертание из доступных в выбранном шрифте. Например, для шрифта Pirania при использовании Ctrl+B автоматически устанавливается значение Weight 700.
Функция быстрого форматирования работает как с уже набранным текстом, так и при создании нового. Можно активировать Bold-режим до начала набора, чтобы весь последующий текст сразу отображался жирным шрифтом. Повторное нажатие Ctrl+B вернет начертание к стандартному.
При работе с несколькими текстовыми блоками одновременно горячие клавиши позволяют форматировать их групповым выделением, экономя время на индивидуальной настройке каждого элемента.
Настройка собственного жирного шрифта через Custom Font Settings
Для создания уникального жирного начертания text в Figma можно настроить пользовательский шрифт через Custom Font Settings. Этот метод позволяет загрузить и использовать любой шрифт с нужной толщиной.
- Создайте новый проект в Figma
- Откройте меню 'File' > 'Font Settings'
- Нажмите кнопку 'Custom Fonts'
- Перетащите файл шрифта в формате .ttf или .otf в специальную область
После загрузки шрифта:
- Выберите загруженный шрифт из списка доступных
- Настройте параметры жирности через панель 'Font weight'
- Установите значение в диапазоне 600-900 для Bold-начертания
Дополнительные возможности настройки:
- Создание собственных стилей текста с pirania-эффектом
- Регулировка межсимвольного интервала
- Настройка сглаживания для жирных шрифтов
- Сохранение пресетов для повторного использования
При работе с кастомными шрифтами учитывайте:
- Размер файла шрифта не должен превышать 30 МБ
- Поддерживаются форматы: .ttf, .otf, .woff
- Загруженные шрифты доступны только в текущем проекте
- Для командной работы нужно добавить шрифт в Team Library
Сохранение Bold-стиля в библиотеке компонентов для повторного использования
Для экономии времени при работе с текстовыми элементами bold-начертания создайте компонент в библиотеке Figma. Нажмите F для активации инструмента Text, введите образец текста и примените bold-стиль.
Выделите готовый текстовый элемент и нажмите Ctrl+Alt+K (или Command+Option+K для macOS) для создания компонента. Переименуйте его в 'Text/Bold/Primary' для удобной навигации в библиотеке.
Разместите компонент на отдельном фрейме 'Typography' в проекте. Добавьте описание параметров в поле Component Description: используемый шрифт, размер, межстрочный интервал. Например: 'Pirania Bold 16/24'.
При необходимости использовать bold-текст на новом артборде, нажмите I для вызова панели Assets и перетащите сохраненный компонент. Все экземпляры компонента будут автоматически обновляться при изменении мастер-компонента.
Для организации библиотеки компонентов создайте отдельный проект 'Design System'. Опубликуйте его через Team Library, чтобы обеспечить доступ всем участникам команды к стандартизированным текстовым стилям.
Проверка корректного отображения жирного шрифта на разных устройствах
После создания жирного текста в Figma следует протестировать его отображение на различных платформах. Экспортируйте макет через File > Export и просмотрите его на смартфонах iOS/Android, планшетах и десктопных браузерах.
Откройте панель Device Preview (Ctrl+Alt+D) для симуляции отображения text-элементов на популярных устройствах. Проверьте сохранение толщины шрифта при масштабировании и различных разрешениях экрана.
Используйте инструмент Pirania для автоматической проверки корректности рендеринга Bold-начертания на разных операционных системах. Этот плагин создает скриншоты интерфейса на различных устройствах.
При обнаружении искажений жирного текста:
- Проверьте поддержку выбранного шрифта системами
- Убедитесь в корректной загрузке font-файла
- Протестируйте альтернативные варианты начертания
- Добавьте fallback-шрифты для страховки
Экспортируйте прототип в HTML/CSS через плагины Figma и проверьте сохранение Bold-стиля при публикации. Это гарантирует идентичное отображение текста в финальной версии продукта.
