Как загрузить, добавить и установить русский шрифт с кириллицей в фигму

Аватар автора курса

Автор — Ян Агеенко

Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»

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

Видео-версия урока

Выбрать плеер:

Как выбрать шрифт в фигме

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

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

Какие русские шрифты с кириллицей уже есть в фигме

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

  • Шрифты с засечками (Антиквы, Serif)
  • Шрифты без засечек (Гротески, Sans Serif)
  • Просто красивые и необычные шрифты. В этой категории также могут быть гротески и антиквы, однако у них есть свои особенности и уникальные черты.
  • Small Caps — шрифты, у которых маленькие буквы имеют форму заглавных.
  • Вытянутые, или узкие шрифты
  • Моноширинные — шрифты, у которых каждая буква имеет одинаковую ширину.
  • Жирные, или массивные шрифты (здесь речь про саму гарнитуру, а не просто начертание)
  • Рукописные, или курсивные шрифты
  • Пиксельные шрифты
  • Графически сложные шрифты, выполненные в виде как-то-то рисунка

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

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

Как скачать, установить и добавить новый шрифт в фигму

Вы можете скачать из интернета любой шрифт и установить его себе на компьютер. Если вы используете десктопную версию фигмы, шрифт появится в ней автоматически в разделе Installed by you:

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

Другие полезные уроки по фигме

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

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

Панели инструментов и слоев в интерфейсе Фигмы: как их открыть, убрать или увеличить

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

Как сделать иконку в фигме или найти готовую с помощью плагинов (svg, пнг, 3д)

Сегодняшний урок полностью посвящен иконкам в фигме. Я покажу, как их можно нарисовать, а также где найти готовые векторные или объемные (3д). Также я покажу несколько хороших плагинов для иконок в фигме. Еще вы узнаете, как сохранять иконки в форматах свг и пнг. Советую смотреть этот урок в видео-формате, поскольку там я показываю всё это более подробно, чем в текстовом варианте.