Шрифты в Figma: как выбрать и установить

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

Как выбрать? В Figma используются шрифты Google Fonts, а это более 1000 различных вариантов. Если стандартного наборе не хватает, есть определенные правила выбора парных шрифтов и их установки.

Что собой представляет Figma

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

Главные отличия Figma:

• Вносить корректировки в проект и просматривать его можно в режиме онлайн. Менеджеру и программисту не придётся каждый раз интересоваться у дизайнера, какие он внёс правки в проект. Всю необходимую им информацию они смогут найти в программе.
• Редактор работает через браузер, поэтому не нужно устанавливать дополнительные программы. Так намного проще демонстрировать макет клиенту или коллегам. Для этого необходимо лишь отправить ссылку и выбрать подходящие параметры прав доступа.
• Если купить подписку, то появится возможность использовать инструменты для командной работы над макетом. К примеру, через голосовой чат члены команды могут созвониться прямо в Figma для решения текущих вопросов по макету и внесения корректировок. При этом не надо включать демонстрацию экрана и переключаться между несколькими программами.

Работа со стилем текста в Figma

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

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

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

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31749

Ниже разберёмся со свойствами, которые есть у текстовых стилей в Figma, и параметрами, невозможными в ней задать.

Доступные свойства:

• Подходящие для Figma шрифты, их размер, вес.
• Межстрочный интервал (интерлиньяж).
• Расстояние между буквами и абзацами, структурирование текста.
• Декор текста (зачёркивание и подчёркивание).
• Использование прописных и строчных букв, капитализация.
• Другие возможности Open Type, то есть, работа с табличными сведениями, капителиями и так далее.

Что нельзя задать в Figma:

• Цвет букв.
• Выравнивание (выключка) текста по левому или правому краю, по центру, по формату.
• Выравнивание текстового поля (верхнее, нижнее, по центру).
• Указание размеров текстового поля (по горизонтали, по вертикали, фиксировано).

Сервис позволяет правильно задать интервал. Например, установить для заголовков и для основного текста разный интерлиньяж. Далее обсудим, на что опираться в каждом указанном случае.

• Настройки основного текста

Самое главное в типографике – читаемый текст. Повысить этот показатель можно через увеличение межстрочного интервала. Когда текст написан плотно, его сложнее читать. Какое самое оптимальное расстояние? Размер шрифта необходимо умножить на 1,5, и вы увидите, как преобразится текст.

• Воздействие оптических эффектов

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

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

• Работа с заголовками

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

Во время добавления начертания в Figma можно подобрать размер букв по принципу водопада (от большего к меньшему). Это позволит сделать текст более эстетичным и наглядным.

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

Критерии выбора шрифтов в Figma

Как установить общую систему шрифтов для всех макетов в Figma web? Для этого понадобится разработать единый набор шрифтов с указанными стандартами размеров и интервалов. При этом необходимо брать во внимание типографику заголовка, параметры основного текста, весь спектр установок, и учесть отображение на разных дисплеях. Вариантов должно быть достаточно, но в то же время у дизайнеров не должны «разбегаться глаза», чтобы они не тратили много времени на выбор стиля.

Какими шрифтами лучше пользоваться в сервисе, опираясь на вашу конкретную систему? В данном вопросе необходимо учитывать следующее:

• Уровень производительности. Имеется ли у вас лимит производительности? Как много шрифтов вы можете импортировать в Figma? Есть ли у вас в планах применение шрифтов с других сервисов (которые будут поддерживаться)?
• Специальные параметры. Есть ли у вашей компании собственные шрифты, которые вы планируете использовать?
• Нужна ли дополнительная система шрифтов. Вам будет достаточно единой системы шрифтов, или понадобится несколько стратегий? Например, когда речь идёт о разработке рекламного сайта, необходимо делать акцент на узнаваемости фирмы, и уникальные шрифты здесь очень важны.
• Использование шрифтов парами. Будет ли достаточно одного семейства шрифтов? Если говорить о сочетании, то крупный текст можно выделять декоративным текстовым стилем (только в меру), а основной текст лучше делать максимально разборчивым.

Выбор парных шрифтов в Figma

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

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

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

В Google Fonts есть шрифты variable, которые считаются одними из самых интересных. Их особенность в том, что есть возможность самостоятельно изменить параметры шрифта, что позволяет выбрать подходящие габариты и прочие свойства. Это говорит о том, что мы можем определиться со шрифтом и подкорректировать его так, чтобы он полностью нам подходил.

В числе таких шрифтов Roboto Flex.

Слева на изображении находится панель с настройками, в которой есть все параметры, доступные для изменения. После установки подходящих значений для шрифта вы сможете пользоваться этими настройками как в Figma, так и добавить их в css.

В случае с Фигмой необходимо перенести конфигурацию в панель настроек. Чтобы это сделать, выберите шрифт (в нашем примере Roboto Flex), кликните на три точки, в появившемся меню выберите раздел «Variable».

Для перемещения в css или установите шрифт из Google Fonts, или используйте ссылку. Два этих варианта находятся справа в открывшемся sidebar.

Вам необходимо выбрать шрифт в левой панели и кликнуть на замочек, чтобы закрепить его. Далее нажать на «Generate». По словам разработчиков, Font Joy создаст 2 парных шрифта, используя искусственный интеллект. На сервисе можно сгенерировать сразу 3 парных шрифта (для заголовков, подзаголовков и основного текста). Если вам хватит и двух, то лишний можно просто убрать.

Ещё один хороший сервис – Designs AI. У него практически такой же функционал, как у Font Joy, но интерфейс выглядит более эстетично.

Алгоритм установки шрифтов в Figma

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

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

• Первым делом выбирается и устанавливается необходимый шрифт. Это возможно сделать прямо на сервисе.
• Далее его нужно установить.
• После её завершения программу Figma надо перезапустить.

Дарим скидку от 60%
на обучение «Веб-дизайнер» до 10 ноября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

На компьютер программа устанавливается стандартным образом. К примеру, если у вас система Windows, подойдёт один из нижеописанных способов:

• Откройте папку со скаченным файлом. Кликнете на него два раза. Это откроет окно, в котором вы увидите шрифт. Сверху будет кнопка «Установить» – на неё надо кликнуть.
• Скопируйте файл. Через Проводник откройте системную папку Windows. Далее найдите папку Fonts и зайдите в неё. Туда необходимо поместить скопированный файл. Это сделает его доступным для использования.

В конце надо перезагрузить программу Figma. Шрифт добавлен и готов к работе.

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

Чтобы добавить начертания, нет необходимости в изменении системной папки. Сделать всё можно так:

• Создать новую папку, в которой будут храниться шрифты.
• Разместить в ней загруженные файлы.
• Запустить панель управления. В правом верхнем углу выбрать способ отображения «Мелкие значки».
• После изучения списка разделов открыть «Fonts».
• В правой стороне будет меню, в котором необходимо кликнуть на «Параметры …».
• В открывшемся окне установить галочку, которая разрешит копировать в папку Fonts ярлыки файлов.
• Подтвердить данный выбор.
• Открыть папку со шрифтами и скопировать их ярлыки в системную папку.

Перезапустив программу, вы сделаете шрифты доступными для применения.

Как загрузить шрифты в Figma в MacOS

Первым делом разархивируйте загруженный шрифт в директорию и двойным нажатием на тачпаде откройте файл шрифта в окне просмотра. В окне вы выберите «Установить» («Install»). Когда установка завершится, шрифт будет в окне приложения «Шрифты» («Font Book»).

Читайте также!

Референс: что это, как правильно работать

Подробнее

Аналогично Windows в MacOS начертание будет скопировано в нужную системную директорию. Так что, когда шрифт добавится, можно удалить архив со шрифтом и директорию, в которую он был разархивирован.

Загрузка шрифтов в браузерную версию Figma

При работе с онлайн-версией полностью полагаться можно только на Google Fonts. Если вам понадобятся начертания, которых там нет, то без специальных действий в программу их не добавить. Попытки ими воспользоваться могут привести к ошибкам.

Для настройки Figma под использование посторонних шрифтов надо проделать следующие шаги:

• Открыть официальный сайт сервиса.
• Перейти в свой аккаунт и посмотреть профиль.
• Найти раздел Fonts.
• В нём будет большая синяя кнопка «Download installer to enable local fonts». Для установки программы инсталляции нажмите на неё.
• Это запустит загрузку приложения.
• Установить программу надо по сопровождающей её инструкции.

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

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

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

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

Использование иконочных начертаний

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

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

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

Данные действия позволят разработчику пользоваться шрифтами с иконками в своих проектах. Если не перезапустить Фигму, новое начертание, вероятнее всего, использовать не получится. Для решения этой проблемы сервис надо закрыть и открыть заново.

Где скачать шрифты в Figma

Бесплатные шрифты для Figma можно найти в интернете в большом количестве (даже с поддержкой кириллицы). Мы подобрали 5 лучших сайтов, на которых можно заранее посмотреть начертание, использовать для поиска фильтры и скачивать понравившиеся варианты бесплатно.

Только до 14.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

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

5 самых популярных шрифтов в Figma

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

• Playfair Display

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

• Gilroy

Это платный шрифт для Figma, но он стоит потраченных на него денег. Его используют для оформления многостраничных сайтов, веб-ресурсов крупных компаний и конференций. У начертания уникальный геометрический оттенок.

• Gotham Pro

Относится к универсальным шрифтам, подходящим для оформления самых разных интернет-ресурсов. Необычная стилистика помогает ему гармонично вписаться в различные композиционные решения.

• Stolzl

Данное начертание отлично смотрится в лёгких и «воздушных» композициях и на ресурсах, ориентированных на молодёжь. Шрифт причислен к категории гротескных. У него 6 начертаний и поддержка более 50 языков.

• P22Underground

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

15 плагинов для работы с текстом в Figma

Для более комфортной работы в Figma можно пользоваться такими плагинами:

• Font Preview. Нужен для предпросмотра начертания в реальном времени. В нём можно найти шрифт и добавить его в избранное.
• Typescale. Очень быстро создаёт гармоничные модульные системы типографики с учётом заданной пары.
• SBOL Typograph. Оформляет кириллические тексты: корректирует пробелы, кавычки, тире, написание телефонов и денежных валют. В плагине есть встроенный ёфикатор.
• Retextifier. Вносит изменения одновременно в несколько текстовых слоёв.
• Главред. Через него можно создать лаконичный и доступный текст для сайтов, блогов, профессиональной литературы, СМИ и рекламы.
• Contento. С помощью открытых источников генерирует «рыбный» текст.
• Accidently Great Font Pairings. Создаёт пары из шрифтов от Google Fonts.
• Add numbers to texts. За короткое время делает нумерованные списки.
• Contento. Меняет размер текста, чтобы он гармонично «вписывался» в рамки текстового контейнера.
• Batch Styler. За один раз редактирует несколько текстовых стилей.
• Deepl translate. Не выходя из программы, позволяет переводить текст (полностью или фрагменты) с одного языка на другой (работает с 26 языками).
• Find and Replace. С его помощью можно отыскать и пакетно заменить текст на странице (как в текстовом редакторе).
• Perfecter. Устанавливает гармоничные параметры шрифтов, интервалов, элементов с применением математических расчётов.
• Font Explorer. Через него можно «примерить» шрифт к проекту и сразу сравнить все выбранные начертания.
• Glyphs. В плагине содержится 184 графических символа, в числе которых глифы и лигатуры.

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

Мало знать, как добавить и изменить шрифт в Figma, поэтому далее мы разберём, как сохранить проект и использовать его в дальнейшем.

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

• При сохранении файла использовать формат pdf или svg для подстраховки. В этом случае текст превращается в кривые, теряются компоненты и стили. Кривые в виде концевых стрелок получают контур.
• Делать конвертацию файлов в Sketch или XD. Но здесь есть несколько непростых моментов. Sketch является платной программой и имеет множество версий, а XD относится к Adobe, а значит она тоже вряд ли будет доступна. При конвертации файлов необходимо брать во внимание, что рабочая область в Figma имеет большие размеры, чем в XD, Sketch и Adobe Illustrator. Так что если вы можете сократить размер расположения рабочих досок, то желательно это сделать. Помимо этого, можно разделить документ на отдельные страницы.

Читайте также!

Adobe Illustrator: как и где используется

Подробнее

Многие профессиональные дизайнеры считают, что Figma является уникальным продуктом, способным перевернуть мир графического и веб-дизайна. Для её использования не нужно иметь специальную подготовку. У программы мощный потенциал и доступный для понимания интерфейс. Разработанные макеты располагаются в облаке Figma, так что вам не придётся искать свои проекты по всему компьютеру и заново добавлять их после правок. Отредактированные файлы сохраняются автоматически.

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

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование