Как добавить шрифт в Figma с компьютера и в браузере за 2 минуты

Из этой статьи вы узнаете, как добавить шрифт в figma (с компьютера и в браузере), как установить иконочный шрифт в фигме и какие шрифты лучше всего использовать при работе с дизайном.

Шрифты и типографика в целом — это важная составляющая любого дизайна. С помощью шрифтов можно создавать определенное настроение у пользователя, управлять удобством восприятия контента и передавать мета-сообщение тематики сайта.

Особенностью фигмы является то, что она синхронизирует все шрифты с сервисом google fonts. То есть все те шрифты, которые присутствуют на этом сервисе, автоматически доступны и в figma. Это очень удобно, потому что нет необходимо их отдельно скачивать.

Как добавить шрифт в Figma с компьютера

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

Как установить шрифт себе на компьютер? Очень просто. Скачиваете нужный вам шрифт, распаковываете архив, переходите в папку со шрифтом, выбираете шрифт (один или несколько), нажимаете правой кнопкой мыши и выбираете пункт «Установить для всех пользователей».

Можете устанавливать по одному, а можете выбрать сразу все и установить все разом. Помимо этого, можно просто перенести нужные вам шрифты в локальную папку со шрифтами на вашем компьютере. На windows она находится в «Панели управления». Если вы используете 10-ку, то сперва переключите вид на «Мелкие значки», тогда вы сразу увидите нужную вам папку.

Выбираете необходимые шрифты и переносите их туда. Либо стандартным сочетанием клавиш ctrl+c/ctrl+v.

Как добавить шрифт в Figma в браузере

При использовании сторонних шрифтов (не с гугл фонтс) у вас могут возникнуть проблемы при открытии макета в браузере. Браузер изначально подтягивает только шрифты из сервиса google fonts. Других он не видит и поэтому может возникнуть конфликт. Чтобы этого избежать, нужно провести некоторые манипуляции.

Во-первых, зайти через браузер в свой аккаунт фигмы и перейти в свой профиль.

Спустится немного нижи и найти пункт «Fonts» с большой синей кнопкой

Скачиваете эту утилиту и устанавливаете ее, следуя инструкции. Весь процесс занимает буквально 2 минуты. После установки, у вас подтянутся все локальные шрифты, которые находятся на вашем компьютере.

Теперь можете без проблем пользоваться ими и в браузерной версии программы. Бинго!

Как работать с отсутствующими шрифтами в Figma

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

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

После замены, во всех макетах автоматически обновятся шрифты. Но будьте с эти аккуратны, потому что каждый шрифт имеет свою размерность и если размеры шрифтов у вас не совпадут, то во всем макете «поплывут» отступы до элементов. Придется вручную все выравнивать.

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

Как добавить иконочный шрифт FontAwesome в Figma

Помимо стандартных шрифтов есть возможность загрузить иконочные шрифты от популярного сервиса Font Awesome. Для тех, кто не знает, Font Awesome — это сервис, который позволяет вставлять иконки через обычный шрифт, а не через файл svg. Это бывает удобно, когда лень скачивать какую-то иконку. Вместо этого можно просто ее «написать».

Для этого нам нужно сначала установить иконочный шрифт себе на компьютер. Переходите на официальный сайт fontawesome.com в раздел «Start»

Спускаетесь вниз и находите пункт «Desktop»

И далее нажимаете на кнопку «Download for free»

У вас скачается шрифт и вам нужно просто установить его себе на компьютер по тому принципу, который мы рассматривали в начале статьи. При распаковке, шрифты будут находиться в папке otfs, там их 3 штуки, все 3 и надо установить.

Принцип работы иконочного шрифта в Фигме

Для начала создайте текстовую пустую область с помощью инструмента «Text».

Далее перейдите на сайт fontawesome.com. Там будут все иконки, которые доступны для использования. Они подразделяются на 3 вкладки «Solid», «Regular» и «Brands».

Solid — это иконки с заливкой, Regular — с обводкой, а Brands — иконки брендов. В зависимости от типа иконки вам нужно выбирать и соответствующий шрифт в фигме. Для использования нужно выделить иероглиф иконки и выбрать пункт «Копировать».

Далее перейти в figma и в текстовый контейнер вставить нашу иконку.

У нас ничего не отображается, потому что выбран шрифт «Roboto». Нам нужно выбрать шрифт Font Awesome. Я копировал иконку из раздела «Solid», поэтому именно такой шрифт я и выбираю. После этого моя иконка корректно отобразится.

Чтобы манипулировать размерами иконки, нужно изменять размеры шрифта. Помимо этого, вы можете легко перевести иконку в вектор и пометить для экспорта. Для этого достаточно выбрать текстовый контейнер и нажать сочетание клавиш Ctrl+Shift+O.

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

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

Но здесь есть 2 нюанса. Во-первых, все те шрифты, которые вы скачиваете на сомнительных сайтах являются пиратскими со всеми вытекающими. Используя их в дизайне, особенно коммерческом, вы подставляете клиента.

Во-вторых, главная функция шрифта — быть удобочитаемым, чтобы посетитель мог без напряга прочитать текст. Различные экзотические шрифты не всегда могут похвастаться подобным функционалом.

Проще всего, использовать шрифты с сервиса google fonts. Они и бесплатные и их можно легко подключить к проекту при разработке. Но единственный минус — шрифтов с поддержкой кириллицы не так много.

Заключение

В этой статье я рассказал вам как добавить шрифт в figma (с компьютера и в браузере), как установить иконочный шрифт в фигме и какие шрифты лучше всего использовать при работе с дизайном.

Если хотите освоить Figma на профессиональном уровне, тогда рекомендую пройти курс «Дизайнер интерфейсов», на котором вы научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.

Автор: Георгий Тимофеев

🔥 Не забудьте скачать мою книгу
«от Курьера до Дизайнера интерфейсов»

В ней я рассказываю свою историю, как мне удалось стать дизайнером с полного нуля и как бы я сегодня действовал, если бы начинал все с «чистого листа».