Шрифты в Figma: как настроить и использовать

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

Чтобы добавить новый шрифт в веб-версию Figma, нужно:

1. Скачать шрифт. Обширные коллекции шрифтов представлены на сайтах FontSpace, 1001 Free Fonts, Font Squirrel и других.

2. Разархивировать шрифт. Для этого дважды кликаем по названию шрифта и в открывшемся окне нажимаем кнопку «Установить».

Стандартный процесс установки шрифта в веб-версии Figma не займёт много времени. Из архива эксперта

3. Скачать и установить Figma Font Helper. Утилита находится на официальном сайте Figma, есть версии для Windows и macOS.

Figma Font Helper, или установщик шрифта, — инструмент, который позволяет использовать новые шрифты

4. Убедиться, что Figma Font Helper работает. Для этого нужно открыть настройки аккаунта и проскроллить до раздела Fonts. Если помощник установлен, пользователь увидит сообщение: «Local fonts are enabled» — «Локальные шрифты включены».

В разделе сразу указано, сколько всего шрифтов доступно дизайнеру. Источник: Figma. Из личного архива эксперта

Figma также покажет лейбл «New» у нового шрифта. Источник: Figma. Из личного архива эксперта

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

1. Установить шрифт на устройстве: скачать и разархивировать.
2. Нажать «Установить» в открывшемся окне.
3. Закрыть и снова открыть приложение Figma. Новый шрифт будет доступен в блоке «Text» при выборе шрифта.

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

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

При изменении шрифта дизайнер также может изменить его начертание. Источник: Figma. Из личного архива эксперта

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

Шрифт Lufga — выразительный геометрический гротеск, который прекрасно читается и сразу привлекает внимание. Источник: behance

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

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

Пример шрифтовой пары из антиквы и гротеска. Источник текста: paratype. Из личного архива эксперта

Что важно проверить при выборе шрифта:

● Читабельность. Буквы и цифры в шрифте легко читаются, нет элементов, которые выбиваются из общего настроения, и непонятных пробелов между буквами или словами.
● Адаптивность. Нужно посмотреть, как шрифты будут выглядеть на разных устройствах и при разных разрешениях экрана. Можно выбирать шрифты без засечек: их легче читать с компьютера и мобильных устройств.
● Количество начертаний. Хорошо, когда у шрифта несколько начертаний, — это позволит дизайнеру выстраивать визуальную иерархию текста.
● Лицензия. Особенно важно для коммерческих проектов: нелегальное использование шрифта может довести компанию до суда.

Проверка типа лицензии на сайте Paratype.ru. Источник: Paratype.ru

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

Шрифт и его настройки отображаются на правой панели в блоке «Text». Источник: Figma. Из личного архива автора

Параметры и настройки в блоке «Текст»:

● Шрифт. Отображается полное название. Изначально предлагается использовать Roboto, но можно выбрать любой доступный шрифт.

● Начертание. Количество начертаний может быть разное, обычно это light, regular, semibold и bold. Если у шрифта одно начертание, параметр будет неактивен.

● Кегль. Или размер шрифта. Его можно менять прямо в поле или использовать выпадающий список со значениями.

● Высота линии. Или интерлиньяж. Позволяет контролировать вертикальное расстояние между строками текста в абзаце. Помогает сбалансировать дизайн и улучшить читаемость. По умолчанию стоит значение Auto. Можно установить фиксированную высоту строки в пикселях — px, или высоту строки, равную процентам от размера шрифта, — %.

● Межбуквенное расстояние. Промежуток между символами в слове, строке или абзаце. Влияет на читабельность. Не следует путать с кернингом — регулированием расстояния между отдельными символами. По умолчанию межбуквенное расстояние равно нулю.

● Расстояние между абзацами. Пустое пространство между абзацами помогает сконцентрировать внимание на тексте, а также повысить читабельность.

● Изменение размера. Отвечает за то, как текстовый слой сжимается или увеличивается в соответствии с содержимым. Доступно несколько настроек: автоматическая ширина, автоматическая высота, фиксированный размер.

● Выравнивание. Делится на горизонтальное — по левому краю, центру, правому краю, и вертикальное — по верху, центру, низу.

Дополнительные настройки текста — в выпадающем списке. Источник: Figma. Из личного архива эксперта

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

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

1. Кликнуть на иконку вопроса в правом нижнем углу интерфейса.
2. Выбрать строку Change keyboard layout.
3. Перейти в блок Text.

Полный список комбинаций горячих клавиш расположен в области Text. Источник