Как в фигме сделать шрифт жирным

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

Почему жирный шрифт важен в дизайне интерфейсов

Жирный шрифт — это не просто эстетическое решение. Он напрямую влияет на восприятие информации. Согласно исследованиям Nielsen Norman Group, пользователи сканируют интерфейс в форме буквы «F», и первые элементы, бросающиеся в глаза, — это заголовки с повышенным весом. Жирный текст помогает структурировать информацию, направляя взгляд пользователя к ключевым действиям: кнопке «Купить», уведомлению об ошибке или призыву к действию.

Представьте, что вы проектируете интерфейс мобильного приложения для заказа еды. Если все тексты — одинаковой толщины, пользователь не поймёт, где кнопка «Заказать», а где — описание блюда. Жирный шрифт в заголовке блюда и кнопке «Добавить в корзину» создаёт визуальную иерархию, снижая когнитивную нагрузку.

В современных дизайн-системах, таких как Material Design или Apple Human Interface Guidelines, жирный шрифт (обычно 600–800) используется для заголовков, названий компонентов и призывов к действию. Это не мода — это результат многолетних исследований в области когнитивной психологии и UX-дизайна.

Как сделать шрифт жирным в Figma: пошаговая инструкция

Процесс изменения веса шрифта в Figma интуитивен, но требует внимания к деталям. Вот точная последовательность действий:

1. Выберите текстовый слой на холсте. Можно кликнуть по тексту или выделить его в панели Layers.
2. Откройте панель свойств справа. Если её нет — нажмите Cmd + Option + 4 (Mac) или Ctrl + Alt + 4 (Windows).
3. Найдите поле «Font Weight» — оно находится под «Font Family» и «Font Size».
4. Кликните по текущему значению (например, «Regular» или «400»). Откроется выпадающий список доступных весов.
5. Выберите нужный вес: например, «600» (Semi Bold), «700» (Bold) или «800» (Extra Bold).
6. Если нужного веса нет — убедитесь, что шрифт поддерживает его (см. раздел ниже).

После выбора веса Figma мгновенно обновит отображение текста. Если вы работаете с текстовым блоком, весь его контент изменится. Для отдельных слов — выделите их перед изменением веса.

Доступные варианты веса шрифта в Figma

Не все шрифты имеют одинаковый набор весов. Некоторые — только Regular и Bold, другие — целые семейства от Thin до Black. Ниже приведены распространённые варианты, доступные в Figma для популярных шрифтов:

Почему шрифт не становится жирным: 5 распространённых ошибок

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

1. Шрифт не содержит жирный вариант

Некоторые шрифты, особенно бесплатные или кастомные, имеют только Regular. Например, «Lato» в базовой версии может не включать 700. Решение: проверьте в библиотеке шрифтов Figma или загрузите полную версию из Google Fonts.

2. Вы выбрали «Bold» в текстовом редакторе, но не в Figma

Если вы копировали текст из Word или Google Docs, он может содержать стили, не передающиеся в Figma. Всегда сбрасывайте форматирование: выделите текст → Cmd + (Mac) или Ctrl + (Windows).

3. Используется системный шрифт без поддержки

Некоторые шрифты, встроенные в ОС (например, «Times New Roman»), не всегда корректно импортируются в Figma. Лучше использовать web-шрифты из Figma’s Font Library.

4. Применён override в компоненте

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

5. Ошибка синхронизации с библиотекой

Если вы используете кастомную библиотеку (например, от дизайн-системы компании), шрифт может быть не обновлён. Перезагрузите библиотеку: Cmd + Shift + L → «Reload libraries».

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

Если вы используете шрифт, который не имеет жирного варианта, но вам критически важно его применить — замените его на совместимый.

1. Выберите текстовый слой.
2. В панели свойств нажмите на название шрифта (например, «Arial»).
3. В открывшемся окне поиска введите название альтернативного шрифта: «Inter», «Roboto», «Montserrat» — они все имеют полный набор весов.
4. Выберите нужный шрифт → Figma автоматически сохранит размер, цвет и выравнивание.
5. Проверьте, стал ли текст жирным — теперь вы можете выбрать 600, 700 или 800.

Для крупных проектов рекомендуется создать единый шрифтовой стандарт: например, «Inter для заголовков, Roboto для текста». Это упростит масштабирование и согласованность.

Лучшие практики: когда и как использовать жирный шрифт

Использование жирного шрифта — это искусство баланса. Перебор — визуальный шум. Недостаток — потеря иерархии.

Рекомендации от ведущих дизайн-систем

• Material Design: Заголовки уровня H1–H3 — 600–700, кнопки — 500–600.
• Apple HIG: Заголовки — 700, подзаголовки — 600, кнопки — 600.
• Adobe Spectrum: Текст в интерфейсе — 400–500, акценты — 600–700.

Чек-лист для применения жирного шрифта

• ✅ Используйте жирный шрифт только для ключевых элементов: заголовки, кнопки, уведомления.
• ✅ Не делайте жирным весь текст — это снижает читаемость.
• ✅ Сравнивайте вес с фоном: на светлом фоне можно использовать 600, на тёмном — 700–800.
• ✅ Проверяйте контрастность с помощью Figma’s Contrast Checker (встроенный инструмент).
• ✅ Не смешивайте разные шрифты для одного уровня иерархии — это создаёт хаос.

Пример: что работает, а что — нет

— Хорошо: Заголовок: Inter 700, 24px; Подзаголовок: Inter 500, 18px; Текст: Inter 400, 16px.
— Плохо: Все элементы — 700, без различий. Пользователь не знает, что нажимать.

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

Эксперты рекомендуют использовать вес шрифта как «звуковой сигнал»:
— 400 — фоновый текст (вторичная информация),
— 500–600 — акценты (кнопки, метки),
— 700–800 — критические действия (опасные действия, ошибки, призывы).

Используйте этот подход как шаблон — он работает в 90% случаев.

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

Заключение

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

• Используйте Font Weight в панели свойств Figma — не полагайтесь на копирование из других редакторов.
• Всегда выбирайте шрифт, поддерживающий нужный вес (Inter, Roboto, SF Pro — лучшие варианты).
• Не делайте всё жирным — жирность теряет смысл, если нет контраста.
• Тестируйте изменения в режиме Preview — как текст выглядит в Figma, может отличаться от браузера.
• Используйте горячие клавиши (Cmd + Shift + B) для ускорения работы.