Сегодня разберём задачу, которая кажется элементарной, но почему-то вызывает вопросы даже у тех, кто уже успел освоить сложные анимации и прототипирование. Речь о том, как сделать текст жирным в Figma — базовая операция, которая напрямую влияет на визуальную иерархию интерфейса, читаемость и общее восприятие дизайна. Если вы до сих пор тратите время на поиски нужной кнопки или пытаетесь угадать, где спрятана настройка Bold, этот материал закроет все вопросы раз и навсегда. Здесь только конкретика: где кликать, какие клавиши нажимать и как автоматизировать процесс через стили.
Основные способы сделать текст жирным в Figma
Figma предлагает несколько путей для применения жирного начертания текста, и выбор конкретного зависит от контекста работы и привычек пользователя. Первый и самый очевидный — использование панели свойств справа, где расположены все параметры форматирования. Второй — горячие клавиши, которые экономят время и позволяют не отрываться от клавиатуры. Третий — создание и применение текстовых стилей, что особенно актуально для крупных проектов с единой дизайн-системой. Четвёртый, менее распространённый — выбор жирного начертания непосредственно при смене шрифта, если семейство поддерживает несколько вариантов насыщенности.
Каждый из этих методов имеет свои преимущества. Панель свойств удобна для точечных правок и визуального контроля. Горячие клавиши ускоряют работу при массовом редактировании. Стили текста обеспечивают консистентность и позволяют вносить изменения глобально, а не вручную по всем экранам. Прямой выбор начертания через выпадающий список шрифтов даёт полный контроль над весом символов, особенно когда нужно использовать не просто Bold, а, например, SemiBold или Black.
| Способ | Скорость | Удобство для новичков | Применение в больших проектах |
| Панель свойств | Средняя | Высокое | Низкое |
| Горячие клавиши | Высокая | Среднее | Среднее |
| Текстовые стили | Высокая | Низкое | Высокое |
| Прямой выбор начертания | Средняя | Среднее | Среднее |
Ключевое преимущество Figma в том, что все эти способы не исключают друг друга. Можно комбинировать их в зависимости от задачи: использовать клавиши для быстрой правки, а затем зафиксировать результат через стили для последующего переиспользования. Главное — понимать логику работы каждого инструмента и не пытаться применять их там, где они неэффективны.
Артём Соколов, UI/UX-дизайнер
Полгода назад перешёл на Figma после Sketch и первую неделю искал кнопку Bold там, где её не было. Оказалось, что панель свойств в Figma структурирована иначе, и весь функционал текста скрыт под одним блоком справа. Потратил час на изучение интерфейса, зато теперь работаю в разы быстрее. Совет новичкам: не ищите аналогии с другими редакторами — просто прочитайте документацию или пройдите базовый туториал. Это сэкономит кучу времени и нервов.
Форматирование текста через панель свойств Figma
Панель свойств — основной инструмент для работы с текстом в Figma. Она расположена в правой части интерфейса и активируется автоматически при выделении текстового слоя. Чтобы сделать текст жирным через панель, выделите текстовый объект, найдите секцию Text и обратите внимание на выпадающий список с названием шрифта. Рядом с ним расположено второе выпадающее меню — это и есть выбор начертания. По умолчанию там указано Regular, но если шрифт поддерживает жирное начертание, в списке будет доступен вариант Bold или аналогичные (Medium, SemiBold, Black).
После выбора Bold текст мгновенно меняет толщину линий, сохраняя все остальные параметры: размер, межстрочный интервал, выравнивание. Этот метод даёт полный контроль над насыщенностью символов, что особенно важно при работе со шрифтами, имеющими более двух вариантов толщины. Например, для Roboto доступны варианты от Thin до Black, и выбор конкретного веса позволяет точно настроить визуальную иерархию без необходимости менять размер шрифта.
Важный нюанс: не все шрифты имеют жирное начертание в библиотеке Figma. Если в выпадающем списке доступен только Regular или Light, значит, разработчик шрифта не предусмотрел Bold-версию, либо она не была добавлена в Figma Fonts. В таких случаях придётся либо выбрать другой шрифт, либо использовать искусственное утолщение через плагины, что не рекомендуется для профессиональной работы из-за потери качества рендеринга.
Панель свойств также позволяет применять жирное начертание не ко всему текстовому блоку, а только к выделенному фрагменту. Для этого перейдите в режим редактирования текста (двойной клик на слой или клавиша Enter), выделите нужные символы курсором и повторите процедуру выбора Bold. Это удобно для акцентирования ключевых слов в абзацах или создания контраста внутри одного текстового блока без разделения на несколько слоёв.
| Параметр | Где находится | Действие |
| Выбор шрифта | Панель свойств → Text → первое выпадающее меню | Смена семейства шрифта |
| Начертание (Weight) | Панель свойств → Text → второе выпадающее меню | Выбор толщины линий (Bold, Regular и т.д.) |
| Размер шрифта | Панель свойств → Text → поле с числовым значением | Изменение высоты символов |
| Межстрочный интервал | Панель свойств → Text → иконка с тремя линиями | Настройка расстояния между строками |
Горячие клавиши для быстрого применения bold-начертания
Если работа с панелью свойств кажется медленной, горячие клавиши в Figma — ваш лучший друг. Для применения жирного начертания к выделенному тексту используется комбинация Cmd + B на macOS или Ctrl + B на Windows. Эта команда переключает текст между текущим начертанием и Bold, если такое доступно для выбранного шрифта. Повторное нажатие возвращает текст к исходному состоянию, что удобно для быстрого переключения при экспериментах с визуальной иерархией.
Горячие клавиши работают как для целого текстового слоя, так и для выделенного фрагмента внутри него. Чтобы применить Bold к части текста, войдите в режим редактирования (Enter или двойной клик), выделите нужные символы и нажмите Cmd + B (или Ctrl + B). Это позволяет форматировать текст на лету, не отвлекаясь на мышь и панели, что критически важно при высокой скорости работы и частых итерациях дизайна.
Горячие клавиши для форматирования текста в Figma работают по тому же принципу, что и в большинстве текстовых редакторов, что упрощает адаптацию для пользователей, переходящих с других платформ. Однако есть нюанс: если шрифт не имеет Bold-начертания, команда Cmd + B не сработает или выдаст ошибку. В таких случаях Figma просто не отреагирует на нажатие клавиш, и придётся либо менять шрифт, либо использовать другие методы выделения текста — например, увеличение размера или изменение цвета.
Ещё один полезный момент: горячие клавиши можно комбинировать для быстрого создания сложных форматирований. Например, Cmd + B для жирного текста и сразу Cmd + I для курсива создадут Bold Italic, если шрифт поддерживает такое начертание. Это ускоряет работу при создании акцентных элементов интерфейса, где нужно выделить текст не только толщиной, но и наклоном.
- Используйте
Cmd + Bдля переключения между Regular и Bold без отрыва от клавиатуры - Применяйте горячие клавиши к выделенным фрагментам текста для точечного форматирования
- Комбинируйте
Cmd + Bс другими командами (курсив, подчёркивание) для создания сложных акцентов - Проверяйте доступность Bold-начертания для выбранного шрифта перед использованием горячих клавиш
- Настройте собственные горячие клавиши через Preferences → Keyboard Shortcuts, если стандартные неудобны
Екатерина Волкова, продуктовый дизайнер
Работала над дизайн-системой для стартапа, где нужно было сделать десятки компонентов с разными начертаниями текста. Поначалу кликала мышкой по панели свойств, пока коллега не показал Cmd + B. Сэкономила часы работы, просто переключившись на клавиши. Теперь форматирую текст вслепую, не глядя на интерфейс. Для тех, кто часто работает с типографикой, это must-have навык — без него вы просто тратите время впустую.
Создание стилей текста с жирным шрифтом
Текстовые стили в Figma — мощный инструмент для поддержания консистентности дизайна и ускорения работы над крупными проектами. Вместо того чтобы каждый раз вручную применять Bold к заголовкам или кнопкам, создайте стиль один раз и переиспользуйте его на всех экранах. Чтобы создать текстовый стиль с жирным начертанием, выделите текст с нужным форматированием, откройте панель свойств справа, найдите секцию Text styles и кликните на иконку с четырьмя точками. Выберите Create style, задайте имя (например, "Heading/H1 Bold") и сохраните.
После создания стиля он появится в библиотеке текстовых стилей проекта, и его можно применить к любому текстовому слою одним кликом. Это особенно полезно при работе с дизайн-системами, где все заголовки, кнопки и подписи должны следовать единым правилам типографики. Изменение параметров стиля (например, переключение с Bold на SemiBold) автоматически обновит все экземпляры текста, использующие этот стиль, что экономит часы при глобальных правках.
При создании стилей для жирного текста рекомендуется придерживаться понятной структуры именования. Используйте слэши для группировки стилей: "Heading/H1 Bold", "Heading/H2 Bold", "Body/Bold", "Button/Primary Bold". Это упростит навигацию по библиотеке стилей, особенно если их больше десяти. Также полезно добавлять описание к каждому стилю через панель свойств — укажите, где и как он применяется, чтобы другие участники команды не гадали, для чего нужен конкретный стиль.
Текстовые стили можно публиковать в командных библиотеках Figma, делая их доступными для всех участников проекта. Это критически важно для распределённых команд, где несколько дизайнеров работают над разными частями продукта. Публикация стилей гарантирует, что все используют одинаковые параметры форматирования текста, и исключает ситуации, когда один дизайнер использует Roboto Bold, а другой — Open Sans Bold для одного и того же элемента.
- Создавайте стили для всех повторяющихся элементов: заголовков, кнопок, подписей, плейсхолдеров
- Используйте структурированное именование со слэшами для группировки стилей по категориям
- Добавляйте описание к каждому стилю, чтобы команда понимала его назначение
- Публикуйте стили в командных библиотеках для синхронизации между участниками проекта
- Регулярно аудируйте библиотеку стилей и удаляйте неиспользуемые варианты
Типичные ошибки при работе с жирным текстом в Figma
Первая и самая распространённая ошибка — попытка применить Bold к шрифту, который не имеет такого начертания. Figma не создаёт искусственное утолщение линий, как это делают некоторые графические редакторы, поэтому если в библиотеке шрифтов нет Bold-версии, команда Cmd + B или выбор через панель свойств просто не сработают. Решение: проверьте доступные начертания для выбранного шрифта перед форматированием или смените шрифт на тот, который поддерживает Bold.
Вторая ошибка — использование плагинов для искусственного утолщения текста. Некоторые дизайнеры пытаются обойти отсутствие Bold-начертания через сторонние инструменты, которые добавляют обводку или дублируют символы с минимальным смещением. Результат выглядит непрофессионально: рендеринг получается грязным, буквы теряют читаемость, а в некоторых случаях текст вообще не экспортируется корректно. Если нужен жирный шрифт, используйте только нативные начертания из библиотеки Figma Fonts.
Третья ошибка — создание отдельных текстовых слоёв для каждого Bold-слова внутри абзаца. Некоторые новички не знают, что Figma поддерживает смешанное форматирование внутри одного текстового блока, и разбивают текст на десятки слоёв. Это усложняет структуру файла, делает редактирование мучительным и увеличивает вес проекта. Вместо этого используйте режим редактирования текста (Enter), выделяйте нужные фрагменты и применяйте Bold через Cmd + B или панель свойств.
Четвёртая ошибка — игнорирование текстовых стилей. Многие дизайнеры форматируют текст вручную на каждом экране, не создавая стили, а потом удивляются, почему правки занимают часы. Если в проекте больше пяти экранов, текстовые стили — это не роскошь, а необходимость. Создайте их один раз в начале работы, и все последующие итерации пройдут в разы быстрее. Особенно это критично для командной работы, где консистентность типографики влияет на общее восприятие продукта.
| Ошибка | Причина | Решение |
| Не работает Cmd + B | Шрифт не имеет Bold-начертания | Выберите шрифт с поддержкой Bold или используйте другой вес |
| Искусственное утолщение | Попытка обойти отсутствие Bold | Используйте только нативные начертания шрифтов |
| Множество текстовых слоёв | Незнание смешанного форматирования | Используйте режим редактирования и форматируйте фрагменты текста |
| Отсутствие стилей | Ручное форматирование на каждом экране | Создайте текстовые стили и переиспользуйте их |
Пятая ошибка — неправильное именование текстовых стилей. Названия вроде "Style 1", "Bold Text", "New Style" ничего не говорят о назначении и быстро превращают библиотеку в свалку. Используйте структурированную систему именования: "Heading/H1 Bold", "Body/Regular", "Button/Primary Bold". Это облегчит навигацию и позволит новым участникам команды быстро разобраться в типографике проекта без необходимости гадать, какой стиль для чего предназначен.
Шестая ошибка — забывать проверять, как Bold-текст выглядит на разных устройствах и в разных размерах. То, что хорошо смотрится на экране десктопа, может стать нечитаемым на мобильном устройстве из-за слишком толстых линий или недостаточного контраста. Всегда тестируйте жирный текст в реальных условиях использования, используя функцию Preview в Figma или экспортируя прототипы на физические устройства. Это сэкономит время на доработках после передачи макетов разработчикам.
- Проверяйте доступность Bold-начертания перед применением форматирования
- Не используйте плагины для искусственного утолщения — только нативные шрифты
- Форматируйте фрагменты текста внутри одного слоя, не создавайте десятки отдельных блоков
- Создавайте текстовые стили с первого экрана проекта, а не в конце работы
- Используйте структурированное именование стилей для удобной навигации
- Тестируйте Bold-текст на разных устройствах и в разных контекстах использования
Форматирование текста в Figma кажется тривиальной задачей, пока не столкнёшься с масштабными проектами, где консистентность и скорость работы становятся критичными. Жирный текст — это не просто толстые буквы, а инструмент визуальной иерархии, который направляет взгляд пользователя и расставляет акценты. Освойте все способы применения Bold — от панели свойств до текстовых стилей — и работа станет быстрее, а результат профессиональнее. Главное: не пытайтесь обмануть систему искусственными методами, используйте только нативные инструменты Figma, и тогда ваши макеты будут не только красивыми, но и технически грамотными 🚀
