Шрифты в Figma: особенности, применение и выбор

Шрифты — одна из важных составляющих работы над проектом. Рассказываем, какие возможности для использования шрифтов есть в Figma.

Применение и выбор шрифтов

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

Разберемся, как работать со шрифтами в Figma и какие есть особенности в их использовании.

Шрифты в Figma можно применять ко всему текстовому объекту, нескольким объектам, словам или выделенным буквам внутри объекта. Рассмотрим на примере.

Выберите один или несколько текстовых объектов.

Способы, как можно поменять шрифт в рамках целого текстового объекта или отдельного слова

Шрифты отображаются на панели справа в блоке Text. В первом поле вы увидите текущий шрифт. У меня это Montserrat.

Меняем гарнитуру шрифта

Чтобы изменить гарнитуру шрифта, нажмите стрелку «вниз» справа от шрифта. Откроется Font Picker (список шрифтов) — выберите нужный.

Гарнитуру можно выбрать из списка доступных шрифтов

Если вы знаете правильное наименование шрифта, то можете выбрать гарнитуру, не открывая Font Picker. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название — вот так:

Гарнитуру можно выбрать через поиск, если вы знаете ее название

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.


Использование локальных шрифтов

Если вы хотите использовать в Figma дополнительные шрифты, которые не включены в список веб-шрифтов Google, загрузите нужные на компьютер и берите их.

В этом случае браузерная версия отличается от десктопной.

  • Для десктопной версии все локально установленные шрифты в вашей системе будут автоматически доступны в Figma. Найти их можно там же, где и Google Fonts — в Font Picker.
  • Для браузерной версии локально установленные шрифты изначально недоступны. Сначала вам нужно будет установить приложение Figma Font Helper.

Установка Figma Font Helper

Есть два способа установки. Первый — через свою учетную запись в браузерной версии Figma.

Нажмите на свой логин в верхнем левом углу и выберите Account Settings.

Установка Figma Font Helper через учетку в браузерной версии

Прокрутите вниз до раздела Fonts и нажмите на кнопку Download Installer to enable local fonts, чтобы скачать инсталлятор для локальных шрифтов.

Загружаем локальные шрифты

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

Ура! Теперь локальные шрифты доступны, о чем говорит вот такая надпись

Второй способ еще проще. Вам нужно скачать Figma Font Helper с официального сайта и установить.

Управление отсутствующими шрифтами

Очень полезная функция при работе со шрифтами в Figma.

Если в файле используется шрифт, недоступный вам через средство выбора шрифтов (через веб-шрифты Google или локальные источники), то появится такое предупреждение.

Figma предупреждает, что дизайнер пытается настраивать шрифт, которого нет в библиотеке

Такое предупреждение будет появляться каждый раз, когда вы попытаетесь редактировать текст, шрифта которого у вас нет.

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

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

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

В окне Missing Fonts можно проверить, какие из используемых в проекте шрифтов не доступны

Откройте выпадающий список и выберите нужный шрифт.

Подбираем шрифт из доступных на замену отсутствующего

Figma автоматически сопоставит стиль выбранного шрифта со стилем отсутствующего, но вы можете сделать это сами.

После того, как вы выбрали шрифт, нажмите кнопку Apply для завершения замены.

Не забывайте нажать Apply, чтобы сохранить замену шрифта

Все ваши тексты в проекте обновлены.

Новый шрифт автоматически заменит недоступный шрифт по всему документу

Использование иконочного шрифта

Figma поддерживает популярный и простой в использовании набор иконок Font Awesome. Если вам не подходит этот набор и вы хотите использовать другие иконки, создайте свой иконочный шрифт любым удобным способом — например, с помощью сервиса IcoMoon, и установите локально на вашем устройстве. После установки он будет доступен в Figma вместе с другими шрифтами.

Остановимся подробнее на использовании иконочных шрифтов на примере Font Awesome.

Font Awesome — иконочный шрифт в Figma

Создайте текстовый объект в Figma.

Создаем текстовый объект

В разделе Text на панели свойств в Font Picker выберите Font Awesome 5 Brands.

Выбираем иконочный шрифт

Перейдите по ссылке https://fontawesome.com/cheatsheet — вы попадете на страницу таблицы иконочного шрифта, который по умолчанию интегрирован в Figma.

Этот шрифт разделен на три большие категории:

  1. Solid Icons.
  2. Regular Icons.
  3. Brand Icons.

Выберите подходящую иконку, выделите и скопируйте ее в буфер обмена — Ctrl+C.

Копируем понравившуюся иконку со страницы доступных иконочных символов

Затем переключитесь в Figma и вставьте эту иконку в созданный ранее текстовый объект — Ctrl+V.

Вставляем иконку в текстовый объект. Готово!

Теперь вы можете настраивать эту иконку по своему усмотрению как обычный шрифт.

Также в Font Awesome можно выбрать стиль иконок — Regular или Solid.

Regular — контурное начертание, Solid — заливка.

Слева стиль по умолчанию Regular, справа — Solid

Заключение

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

Курс

Figma


Полное руководство по cамому прогрессивному инструменту для дизайнеров: навыки быстрой работы с высоким качеством. На протяжении курса вы с нуля создадите проект, при создании которого задействуете все возможности Figma.

Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox