Как установить шрифты для фигмы

Установка шрифтов в Figma — это важный этап для дизайнеров, которым нужно использовать кастомные или корпоративные типографические решения. Процесс не требует установки на компьютер, если вы работаете с Google Fonts, но при использовании локальных файлов (.ttf, .otf) потребуется специальное расширение. Главное — правильно подключить шрифт и убедиться, что он отображается во всех проектах.

Как работают шрифты в Figma: основы и ограничения

Figma — облачный дизайн-инструмент, который не хранит шрифты локально по умолчанию. Вместо этого он опирается на два источника: системные шрифты, установленные на вашем компьютере, и внешние библиотеки, такие как Google Fonts. Это означает, что если вы открываете чужой файл с нестандартным шрифтом, а он у вас не установлен, Figma применит замену (fallback), например, на Arial или Helvetica.
Шрифты в Figma привязаны к текстовым слоям. Каждый текстовый объект содержит информацию о семействе, начертании (Regular, Bold, Italic и т.д.) и размере. Однако само начертание должно быть зарегистрировано в системе как отдельный файл. Например, Roboto Bold — это не просто стилизация Regular, а отдельный файл .ttf/.otf.
Если вы работаете в браузере, Figma не может напрямую получить доступ к системным шрифтам. Именно поэтому для полноценной работы с кастомными шрифтами требуется десктопное приложение. Оно синхронизируется с установленными шрифтами через специальный сервис — Figma Font Installer.

Как установить локальные шрифты в Figma: пошаговая инструкция

Для использования собственных шрифтов (.ttf, .otf, .woff2) в Figma необходимо выполнить несколько шагов. Этот процесс одинаково работает на Windows и macOS, но имеет небольшие различия в интерфейсе установки.

1. Скачайте шрифт — получите файлы шрифта с сайта разработчика, маркетплейса (например, Creative Market, MyFonts) или от заказчика. Убедитесь, что у вас есть лицензия на использование.
2. Установите шрифт в систему — на Windows дважды щёлкните по файлу и нажмите «Установить». На macOS откройте через «Просмотр шрифтов» (Font Book). После установки перезапустите Figma Desktop.
3. Запустите Figma Desktop — только десктопная версия может обнаруживать системные шрифты. Браузерная — нет.
4. Откройте панель текста — выберите текстовый слой, кликните по полю выбора шрифта и найдите своё семейство в списке.
5. Проверьте все начертания — если, например, Light или Medium не отображаются, значит, эти файлы не установлены. Установите недостающие варианты.

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

Как проверить, что шрифт установлен

Чтобы убедиться, что Figma видит ваш шрифт:

• Откройте любой текстовый слой;
• Начните вводить название шрифта в поле выбора;
• Если оно появилось в списке — всё готово.

Если шрифт не отображается, попробуйте найти его в стандартном редакторе системы: Notepad (Windows) или TextEdit (macOS). Если и там его нет — проблема в установке.

Использование менеджеров шрифтов

Профессиональные дизайнеры часто используют менеджеры шрифтов: Suitcase Fusion, FontBase, NexusFont. Они позволяют временно активировать шрифты без постоянной установки. Figma корректно работает с такими инструментами, но важно, чтобы шрифт был «включён» в момент запуска Figma.

Подключение Google Fonts: быстрый способ без установки

Google Fonts — бесплатная библиотека, интегрированная прямо в Figma. Она идеально подходит для прототипирования, учебных проектов и открытых решений. Доступно более 1500 шрифтов, включая популярные Roboto, Inter, Open Sans и Lato.
Чтобы использовать Google Fonts:

• Выберите текстовый слой;
• Кликните по названию шрифта в правой панели свойств;
• Нажмите «Search in Google Fonts»;
• Введите название или выберите из каталога;
• Figma автоматически подгрузит шрифт и применит его.

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

Преимущества и недостатки Google Fonts

Общие шрифты в команде: как избежать «отвалившихся» начертаний

Один из самых частых кошмаров командного дизайна — когда у одного дизайнера шрифт отображается корректно, а у другого — заменяется на fallback. Это происходит, если хотя бы одно начертание не установлено. Например, файл использует Montserrat ExtraBold, но у коллеги установлен только Regular.
Чтобы избежать таких ситуаций, используйте следующие практики:

• Создайте гайд по шрифтам — документируйте, какие шрифты используются в проекте, где их скачать и как установить.
• Используйте плагины вроде “Font Detective” — они показывают, какие шрифты используются в файле и какие отсутствуют.
• Создайте shared text style — заранее задайте стили заголовков, абзацев и кнопок, чтобы все использовали одни и те же значения.
• Разместите шрифты в общем доступе — например, в Google Drive или Notion с инструкцией по установке.

Если вы используете корпоративный шрифт, рекомендуется оформить лицензию для всей команды. Некоторые шрифты продаются по модели per-user, и использование без лицензии может повлечь юридические последствия.

Как проверить шрифты в команде

Перед сдачей макета на ревью выполните проверку:

1. Откройте файл на другом устройстве или попросите коллегу проверить.
2. Используйте режим «Present» — он показывает, как файл выглядит у других.
3. Запустите плагин «Find and Replace Fonts» — он покажет все шрифты и поможет массово заменить отсутствующие.

Распространённые ошибки и как их исправить

Даже опытные дизайнеры сталкиваются с проблемами шрифтов. Ниже — самые частые случаи и решения.

Ошибка: Шрифт не появляется в списке Figma

• Причина: шрифт не установлен или Figma не перезапущена.
• Решение: переустановите шрифт и перезапустите Figma Desktop. Проверьте, отображается ли он в системном редакторе текста.

Ошибка: Отображается только Regular, но нет Bold или Italic

• Причина: отдельные начертания — это отдельные файлы. Возможно, вы установили только Regular.
• Решение: скачайте и установите все нужные начертания. Убедитесь, что в системе они отображаются под одним именем семейства.

Ошибка: Коллега видит другой шрифт

• Причина: шрифт не установлен у участника команды.
• Решение: отправьте файлы шрифтов и инструкцию. Используйте Google Fonts, если возможно.

Ошибка: Шрифт «проседает» при экспорте

• Причина: экспорт в PDF или SVG может не включать шрифты, если они не встроены.
• Решение: при экспорте в PDF выберите опцию «Embed fonts». Для SVG — конвертируйте текст в кривые (Outline Stroke).

Экспертное мнение

Вопросы и ответы

Заключение

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

• Figma видит только установленные системные шрифты и Google Fonts.
• Для локальных шрифтов обязателен Figma Desktop и перезапуск приложения после установки.
• Google Fonts — лучшее решение для командной работы и быстрого прототипирования.
• Всегда проверяйте отображение шрифтов у коллег перед сдачей проекта.
• Конвертируйте текст в контуры при экспорте, если нужна 100% точность.