Как загрузить, добавить и установить русский шрифт с кириллицей в фигму
Автор — Ян Агеенко
Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»
Шрифт — несомненно один из наиболее важных элементов графического и веб-дизайна. Сегодня мы разберемся, какие шрифты в фигме поддерживают кириллицу, а также как добавить в неё новые русские шрифты. В дополнение к уроку предоставляется удобный файл с подборкой и предпросмотром шрифтов, разбитых по категориям.
Видео-версия урока
Как выбрать шрифт в фигме
Для выбора шрифта нужно выделить текст, а затем открыть выпадающий список в блоке Typogrqphy на правой панели фигмы:

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

Я проверил все шрифты, доступные в фигме, и выбрал из них те, что поддерживают русский язык и кириллицу. Все они бесплатные и могут свободно использоваться в ваших проектах. Для удобства я также создал файл, в котором сделал их предпросмотр и разбил на несколько категорий, а именно:
- Шрифты с засечками (Антиквы, Serif)
- Шрифты без засечек (Гротески, Sans Serif)
- Просто красивые и необычные шрифты. В этой категории также могут быть гротески и антиквы, однако у них есть свои особенности и уникальные черты.
- Small Caps — шрифты, у которых маленькие буквы имеют форму заглавных.
- Вытянутые, или узкие шрифты
- Моноширинные — шрифты, у которых каждая буква имеет одинаковую ширину.
- Жирные, или массивные шрифты (здесь речь про саму гарнитуру, а не просто начертание)
- Рукописные, или курсивные шрифты
- Пиксельные шрифты
- Графически сложные шрифты, выполненные в виде как-то-то рисунка
Шрифты из этих категорий, доступные в фигме по умолчанию, можно посмотреть здесь.
Обратите внимание, что в подписях к категориям шрифтов в файлике также есть небольшие рекомендации по использованию: какие из них можно использовать без ограничений, а какие — только для заголовков. Это связано главным образом со сложностью шрифта: чем он проще, тем легче будет читаться и наоборот. Именно поэтому более сложные визуально шрифты рекомендуется использовать только для крупных заголовков. Для мелких же текстов оптимальным будет использование обычных гротесков или антикв.
Как скачать, установить и добавить новый шрифт в фигму
Вы можете скачать из интернета любой шрифт и установить его себе на компьютер. Если вы используете десктопную версию фигмы, шрифт появится в ней автоматически в разделе Installed by you:

Если же вы пользуетесь браузерной версией программы, вам нужно будет загрузить специальное приложение Font Installer (установщик шрифтов) на официальном сайте figma.com/downloads. Это приложение позволяет использовать в браузерной версии фигмы шрифты, установленные на вашем компьютере. Хотя лично я считаю, что если уж всё равно приходится что-то устанавливать, то лучше сразу установить десктопное приложение. Установщик шрифтов при этом заработает автоматически.
Другие полезные уроки по фигме
Как сделать, изменить и посмотреть расстояния и отступы в фигме — межстрочные, между абзацами и другими объектами
В этом уроке вы узнаете, как в Figma работать с расстояниями между объектами и текстовыми элементами. Будет рассказано, как быстро выровнять отступы между слоями, настроить одинаковые интервалы с помощью автолейаутов, измерить расстояние между любыми элементами и правильно задать параметры типографики — включая межбуквенный и межстрочный интервалы, а также отступы между абзацами и пунктами списка.
Как сделать интерактивный кликабельный прототип и анимацию сайта или приложения в фигме
В этом уроке рассказывается, как создавать интерактивные прототипы в Figma. Вы узнаете, как настраивать переходы между страницами сайта или приложения, добавлять анимации, делать кликабельные кнопки с всплывающими окнами и создавать анимированные слайдеры без перехода на другие фреймы. Урок подходит для начинающих и охватывает основные принципы прототипирования в Figma.
Как делать линии, стрелки, обводки, рамки и контуры фигур в фигме
Сегодня поговорим про линии, стрелки и обводки в фигме. Научимся делать их волнистыми и пунктирными, посмотрим как можно применять контуры для создания интересных и красивых рамок. Также на протяжении всего урока я буду давать важные практические советы по работе с линиями. Советую посмотреть видео-версию этого урока, ведь в ней всё показано максимально детально.
