Какой шрифт Figma подставляет по-умолчанию?
Здравствуйте
На скрине 4 разных шрифта, все не поддерживают кириллицу. Английский символы в своем шрифте, а русские в непонятном. Фигма сама для русского подставляет какой-то свой шрифт. Как понять какой? При выделении она все равно показывает название шрифта, который выбрал я, но по факту, в русских символах, это не он.
Лучшие кириллические шрифты в Figma
За несколько лет работы веб-дизайнером, накопилась некоторая коллекция классных кириллических шрифтов, с которыми мы сейчас познакомимся.
Playfair Display
Бесплатный шрифт, который по умолчанию встроен в Фигму. Шрифт с засечками, который подойдет для дорогих ниш.
Gilroy
Платный шрифт. Я его применяю в деловых тематиках: сложные многостраничные сайты, сайты конференций, сайты крупных компаний. Обладает легкой структурой символа, что позволит пользователям не уставать во время чтения.
Gotham Pro
Бесплатный и универсальный шрифт для фигма, который я использую не только в вебе, но и в полиграфии. Его можно назвать «рабочей лошадкой», которая будет хорошо смотреться в большинстве композиций.
Stolzl
Платный, легкий шрифт. Подходит для молодежных тематик, а также для композиций, использующих много воздуха.
P22Underground
Тоже очень легкий шрифт, но один из самых строгих в категории «Без засечек». Его классно использовать в «дизайнерских» макетах, если композиция хаотичная. Это дает классный контраст в макете.
Это были основные шрифты, которыми я (автор d-e-n.info) пользуюсь часто. Передо мной не стояла задача просто показать вам список шрифтов. Важно понимать: какие эмоции вы хотите передать с помощью текста, а затем уже проблематика выбора уходит, так как у вас есть мой вариант, на который можно ориентироваться; после этого просто находите похожие шрифты, или выбираете мой вариант.
Для того чтобы установить шрифт в Figma – я крайне рекомендую скачать десктопную версию, установить шрифт в систему и затем Фигма сама его загрузит к себе.
Не рекомендую использовать онлайн версию, но если вы хотите установить шрифт в браузерную версию Figma, то вам нужно скачать и установить Figma Font Helper.
Гайд по работе с текстом и шрифтами в Фигме
В данной статье мы НЕ будем разбирать теоретические основы типографики и правила манипулирования шрифтами. Все это мы уже обсуждали в статье о шрифтовых парах и типографике.
Текущий пост будет иметь прикладной характер и расскажет про инструменты, которые есть в Фигме для создания текстового контента. Мы разберем различные типы шрифтов, их комбинации, что и где лучше использовать. А так-же что обходить стороной.
Весь текстовый контент на сайтах условно можно разделить на заголовки и основной текст. Так например к основному тексту можно отнести описание в карточке с товарами или параграф в статье. В свою очередь к заголовкам можно отнести пункты меню или название товара, в той же карточке.
Заголовки и основной текст обычно являются компонентами одного текстового блока. Поэтому шрифты, используемые для них, должны сочетаться друг с другом. А значит мы должны использовать парные шрифты для этих двух групп контента.
Первое о чем нужно знать при выборе шрифта. Фигма использует в качестве умолчательных шрифтов коллекцию Google Fonts. Поэтому, процесс выбора лучше вести не в самом редакторе Фигмы, а искать напрямую на сайте Google. Банально из-за лучшего интерфейса и большего числа фильтров.
Здесь легко найти шрифт под любую задачу, будь это рукописный, кириллический или декоративный шрифт.
Как известно, 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”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.
16 удобных плагинов Figma для работы с текстом
Font Preview
Typescale — мгновенно генерирует гармоничные модульные системы типографики на основании заданного соотношения
Typescale
SBOL Typograph — типографит кириллические тексты: исправляет пробелы, кавычки, тире, написание телефонов и валют. В плагин также встроен ёфикатор
SBOL Typograph
Retextifier — единовременное редактирование нескольких текстовых слоёв
Retextifier
Главред — помогает сделать текст для сайтов, блогов, профессиональной литературы, СМИ и рекламы коротким и понятным
Главред
Contento — «рыбный» контент для макетов, сгенерированный из открытых бесплатных источников
Contento
Accidently Great Font Pairings — генерирует шрифтовые пары от Google Fonts
Accidently Great Font Pairings
Add numbers to texts — быстро создает нумерованные списки
Add numbers to texts
autosizetext — автоматически увеличивает или уменьшает текст, чтобы он идеально «вписался» в границы текстового контейнера
autosizetext
Batch Styler — меняет несколько текстовых стилей одновременно (шрифт, начертание, высота строки, трекинг)
Batch Styler
Circular Text
Deepl translate — переводит тексты с одного языка на другой прямо в Figma (всю страницу или выделенную часть, поддерживает 26 языков)
Deepl translate
Find and Replace — позволяет найти и пакетно заменить текст на странице (как в текстовом редакторе)
Find and Replace
Perfecter — настраивает гармоничные соотношения размеров шрифтов, интервалов, элементов с применением математических расчетов
Perfecter
Font Explorer — помогает быстро «примерить» понравившиеся шрифты к проекту и одновременно сравнить все варианты
Font Explorer
Glyphs — плагин включает 184 графических символа, в том числе глифы и лигатуры
Glyphs