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

Юрий Линник

web_design

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

42969

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

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

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

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

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

Перейдите на страницу Figma downloads и найдите блок Font installers. Здесь вам нужно выбрать версию для вашей операционной системы.
Скачайте и установите Figma Agent. Если в этот момент у вас была открыта страница Figma, обновите ее.
Теперь перейдите в свой аккаунт, нажмите на иконку профиля (правый верхний угол), выберите Settings и убедитесь, что в блоке Fonts появилось сообщение «Local fonts are enabled». Здесь же будет отображаться количество шрифтов из системы, которые «подтянулись» в Figma.
Осталось разобраться, как добавить шрифт в 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 и без лишней необходимости не подключать к проекту внешние шрифты. И причин тому несколько:

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

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

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