Как в figma найти шрифты

Шрифты в веб-версии Figma

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

Но иногда такая необходимость может возникнуть, если:

• заказчик дизайн-проекта использует собственный фирменный шрифт, то есть разработанный специально для его компании.
• вы нашли подходящий для проекта шрифт на стороннем ресурсе, но в библиотеке Google Fonts его нет.

Вот как установить новый шрифт в веб-версию:

1. Скачайте нужный шрифт на ваш компьютер, откройте файл и нажмите кнопку «Установить». 

1. Перейдите на официальную страницу загрузки компонентов Figma и найдите столбец Font installers. Это программа, которая поможет связать шрифты на компьютере с вашей браузерной версией Figma. В столбце выберите вашу операционную систему (macOS или Windows).

1. Скачайте файл InstallFigmaAgent.exe.

1. Установите программу Figma Agent на компьютер, нажав на кнопку Install. Дождитесь окончания установки.

1. Теперь нужно убедиться, что локальные шрифты загрузились в веб-версию Figma. Для этого зайдите в ваш аккаунт через браузер, нажав Main menu → Help and account → Account settings. Открывшееся окошко пролистайте до надписи Fonts. Если под ней написано Local fonts are enabled (Локальные шрифты включены). Это значит, что все прошло успешно.

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

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

Шрифты в десктопном приложении Figma

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

1. Скачать его на компьютер.
2. Открыть файл со шрифтом и нажать «Установить» на Windows или «Установить шрифт» на macOS.

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

Текущий пост будет иметь прикладной характер и расскажет про инструменты, которые есть в Фигме для создания текстового контента. Мы разберем различные типы шрифтов, их комбинации, что и где лучше использовать. А так-же что обходить стороной.

Выбор шрифта для контента разного типа

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

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

Связь Figma и Google Fonts

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

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

Variable шрифты

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

Одним из интересных типов шрифтов, которые предлагает нам Google Fonts, являются variable шрифты. Они интересны тем, что в рамках одного шрифта, мы можем сами менять параметры, тем самым точно подгоняя ширину, высоту и другие свойства. А значит в наших силах, взяв за основу некоторый шрифт, модифицировать его таким образом, чтобы он идеально подходил для нашей задачи.

Одним из представителей, такого шрифта является Roboto Flex.

В левой части изображения можно увидеть панель с настройками – это и есть параметры, которые мы можем модифицировать. После того как вы подобрали нужную конфигурацию для шрифта вы можете использовать эти настройки как в Фигме, так и подключить в css.

В первом случае нам нужно перенести конфигурацию в панель настроек Figma. Для этого выберите нужный шрифт (В нашем случае Roboto Flex), нажмите на “…” (три точки) и в открывшемся меню перейдите на вкладку “Variable”.

Для подключения в css нужно либо скачать шрифт с Google Fonts, либо воспользоваться ссылкой. Оба способа доступны в правом открывшемся sidebar-е.

Как подобрать пару для шрифта

Представим, что у вас есть на примете шрифт, который вам нравится. И вы хотите с одной стороны иметь его в проекте, но с другой найти пару. Которая сочеталась бы с ним. Для этой цели можно использовать генератор шрифтов. В сети их довольно много, но в основном это генераторы, которые сразу предлагают вам готовую пару, но есть и исключение. С помощью Font Joy, можно подобрать пару к уже имеющемуся шрифту.

Для этого выберите нужный вам шрифт в панели слева и зафиксируйте его, нажав на замочек. После чего нажмите на “Generate”. Как пишут сами разработчики, сервис сгенерирует 2 парных шрифта, при помощи ИИ. И да, данный ресурс создает сразу 3 парных шрифта (Для заголовка, подзаголовка и текста). Но если для вас это избыточно, всегда можно отбросить один из них.

Кроме Font Joy также есть Designs AI. По функционалу очень похожи, хотя у второго на мой взгляд более симпатичный интерфейс.

Рукописные, декоративные (и не только) шрифты

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

Однако, также существует ресурс, с большей вариацией различных типов шрифтов. Это Fonts Online.

Здесь можно выставить фильтр на декоративные, кириллические, английские, курсивные шрифты, шрифты для заголовков и множество других подвидов. К сожалению далеко не каждый шрифт, который вы найдете будет находиться в коллекции Google Fonts, а значит он не будет доступен вам из коробки в Фигме. Поэтому здесь у вас 2 выхода:

Как добавить шрифт, если не хватает стандартных

По большому счету при создании макета в фигме вы можете пользоваться шрифтами только из 2-х источников. Это Google Fonts, как уже было много раз озвучено, и шрифты, которые установлены у вас локально на компьютере. В случае с веб версией, гугловые шрифты доступны сразу, а вот установленные у вас на локальном пк фигма не видит, для этого нужно установить специальное дополнение Font installer.

Устанавливаете его себе на пк и забываете про него. Оно работает в фоновом режиме и будет запускаться при старте системы. Теперь все что вам осталось, скачать нужный шрифт, кликнуть дважды по файлу и нажать кнопку “Install”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.

Ссылка — на цикл статей по Фигме.