Как загрузить и использовать шрифт в Figma

web_design
Аудио дорожка
1824

Figma — это один из наиболее популярных кроссплатформенных графических редакторов для веб-дизайнеров, который работает в облаке, поддерживает совместное редактирование, доступен прямо в браузере или в виде приложений для MacOS, Windows, iOS и Android.

image_1

Именно работе с Figma посвящена существенная часть курса Wezom Академии «Web-дизайн с нуля до крутого портфолио». А сегодня мы хотим рассмотреть такую важную тему, как шрифты в Figma. Потому как здесь есть некоторые особенности в зависимости от того, какую версию редактора вы используете — браузерную или десктопную.

Как загрузить шрифт в Figma онлайн

По умолчанию браузерная версия Figma использует базу Google Fonts. Это огромная библиотека, которой в принципе большинству веб-дизайнеров (особенно новичков) достаточно. Но иногда необходимость добавить какой-то особый шрифт в Figma все-таки возникает.

Алгоритм добавления шрифтов в браузерную версию следующий:

  1. Перейдите на страницу Figma downloads и найдите блок Font installers. Здесь вам нужно выбрать версию для вашей операционной системы.image_2
  2. Скачайте и установите Figma Agent. Если в этот момент у вас была открыта страница Figma, обновите ее.image_3
  3. Теперь перейдите в свой аккаунт, нажмите на иконку профиля (правый верхний угол), выберите Settings и убедитесь, что в блоке Fonts появилось сообщение «Local fonts are enabled». Здесь же будет отображаться количество шрифтов из системы, которые «подтянулись» в Figma.
  4. Осталось разобраться, как добавить шрифт в Figma помимо тех, что уже содержатся в вашей операционной системе. Все просто. Вам нужно скачать файл шрифта в формате .ttf и добавить его в систему. Алгоритм в Windows и MacOS немного отличается:
  • Windows. Кликните правой кнопкой мыши на файле и в контекстном меню нажмите «Установить». 
  • MacOS. Дважды кликните левой кнопкой мыши на файле и в открывшемся окне нажмите «Установить шрифт».

Готово, шрифт добавлен в систему и «подтянулся» в Figma. Только не забудьте обновить окно редактора.

Обратите внимание! Если вы переустановите систему Windows и MacOS, необходимо будет установить Figma Agent заново. А вот при переустановке или смене используемого веб-браузера повторная установка не требуется — Figma Agent работает на уровне системы.

Как установить шрифт в Figma в приложении MacOS или Windows

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

Итак, как добавить шрифты в Figma, если вы используете десктопный клиент?

На самом деле все еще проще, чем для веб-версии. Дело в том, что десктопные приложения по умолчанию подключают все установленные шрифты из вашей системы. Устанавливать Figma Agent и выполнять какие-либо дополнительные действия не понадобится. 

Алгоритм добавления новых шрифтов в систему абсолютно тот же:

  • Windows. Правый клик мыши по файлу — «Установить». 
  • MacOS. Двойной клик мыши по файлу — «Установить шрифт».

Кстати, если такой способ вам кажется неудобным, можете попробовать использовать сторонние инструменты. Например, менеджер шрифтов FontBase Freemium для Mac, Windows и Linux. Но это не обязательно, штатных средств работы со шрифтами большинству достаточно.

Совет! Подключайте сторонние шрифты только когда это действительно необходимо

Итак, мы разобрались, как загрузить шрифты в Figma. Но здесь же возникает другой вопрос: стоит ли злоупотреблять этой возможностью и подключать сторонние шрифты к каждому проекту?

На самом деле нет. Проще и удобнее работать с интегрированными Google Fonts и без лишней необходимости не подключать к проекту внешние шрифты. И причин тому несколько:

  1. Многие шрифты, которые вы свободно скачиваете из интернета, на самом деле защищены законом об авторском праве. И их использование вполне может повлечь неприятные последствия для вас и ваших клиентов.
  2. Figma — инструмент для командной работы над проектом. Но если у одного человека шрифт не установлен, он попросту не отобразится.

image_4

Именно второй пункт особенно важен. Представьте ситуацию: вы работаете над проектом, подключаете какой-то уникальный шрифт, а затем предоставляете доступ к проекту коллеге. Он открывает документ и получает предупреждение, что некоторые шрифты из макета недоступны. Програма предложит заменить их на другой подходящий шрифт, чтобы человек мог работать с документом. Он соглашается и… шрифт сбрасывается и у вас тоже!

Подобные моменты могут доставить просто массу неудобств. А потому перед тем, как установить шрифты в Figma, убедитесь, что в этом реально есть необходимость. И если она действительно есть, поделитесь используемыми файлами с коллегами, чтобы они добавили их в систему и могли полноценно работать над общим проектом.

Курс "Курс Web-дизайна"

Курс Web-дизайна

Хочешь получить обучение от Юрия Линника?

На курсе вы освоите:

  • Знание особенностей веб-проектов (респонсив, адаптив)
  • Знание принципов юзабилити сайтов
  • Создание дизайна под разные устройства (десктоп, планшеты, смартфоны)
  • Работу с дизайн макетами в Figma
  • Понимание принципов проектирования и разработки сайтов и интерфейсов