Почему в фигме не работают шрифты
Перейти к содержимому

Почему в фигме не работают шрифты

  • автор:

Гайд по работе с текстом и шрифтами в Фигме

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

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

Выбор шрифта для контента разного типа

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

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

Связь Figma и Google Fonts

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

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

Variable шрифты

Как известно, 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”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.

Ссылка — на цикл статей по Фигме.

Как добавить шрифт в Figma

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

освойте профессию
графический дизайнер с нуля

Содержание

  1. Шрифты в веб-версии Figma
  2. Шрифты в десктопном приложении Figma

Шрифты в веб-версии Figma

онлайн-тест на профориентацию

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

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

Шрифты в библиотеке Google Fonts

онлайн-тест на профориентацию

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

Но иногда такая необходимость может возникнуть, если:

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

Как установить новый шрифт в веб-версию

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

  1. Скачайте нужный шрифт на ваш компьютер, откройте файл и нажмите кнопку «Установить».
  2. Перейдите на официальную страницу загрузки компонентов Figma и найдите столбец Font installers. Это программа, которая поможет связать шрифты на компьютере с вашей браузерной версией Figma. В столбце выберите вашу операционную систему (macOS или Windows).

Страница загрузки компонентов в Figma

  • Скачайте файл InstallFigmaAgent.exe. Кликнув по выбранной операционной системе.
  • Установите программу Figma Agent на компьютер, нажав на кнопку Install. Дождитесь окончания установки.
    Скачиваем файл InstallFigmaAgent.exe
  • Теперь нужно убедиться, что локальные шрифты загрузились в веб-версию Figma. Для этого зайдите в ваш аккаунт через браузер, нажав Main menu → Help and account → Account settings. Открывшееся окошко пролистайте до надписи Fonts. Если под ней написано Local fonts are enabled (Локальные шрифты включены). Это значит, что все прошло успешно.

    Проверка загрузки шрифта в Figma

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

    Так выглядит добавленный шрифт в Figma

    В дальнейшем все шрифты, которые вы будете добавлять на компьютер через кнопку «Установить», будут автоматически подтягиваться в Figma в браузере благодаря программе Figma Agent. Но если вы переустановите операционную систему, все описанные выше операции по добавлению шрифтов придется проделать заново, так как Figma Agent связан с конкретной системой.

    что такое шрифтовые пары и как их подобрать

    Как добавить шрифт в Figma?

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

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

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

    Как добавить шрифт в браузере?

    Для установки шрифта в веб-версию необходимо поставить расширение для браузера Google или любого другого — Font Installer. Найти его можно по ссылке на официальном сайте. Чтобы скачать дополнение, нужно выбрать свою операционную систему и нажать на соответствующую кнопку — Windows или MacOs. Последний шаг — главная установка приложения для отображения скачанных шрифтов для Figma в браузере.

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

    Чтобы убедиться в том, что установка прошла успешно, нужно зайти в аккаунт через браузер и выбрать пункт Main menu. Затем необходимо перейти на доступную вкладку Help and account и Account settings. В открывшемся браузерном окне нужно выбрать Fonts — под надписью должна размещаться строка — Local fonts are enabled. Это говорит о том, что все локальные шрифты в системе text включены.

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

    Если в будущем вы будете добавлять новые шрифты в веб-версию, они загрузятся автоматически благодаря работе Font Installer. Однако после переустановки Windows или при переходе на MacOs придётся повторить выделенный курс с помощью дополнений для последующего использования Figma в браузере.

    Установка скачанного шрифта

    Все шрифт скачиваются в виде архива. После скачивания вам необходимо будет распаковать его в папку, а затем щелкнуть на уже распакованный файл и выбрать строку «Установить» (Install) — это запустит процесс установки шрифта. Обычно установка длится несколько секунд. Сразу после окончания вы можете перейти в «Панель управления» в Figma и выбрать пункт «Шрифты». Скачанные файлы всегда доступны в папке «Загрузки» или любой другой папке со шрифтами, в которую вы сохранили архив с сайта или данные о проекте.

    Установка скачанного шрифта в Figma

    Где найти шрифты для Figma?

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

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

    Установка скачанных шрифтов в десктопную версию Figma ещё проще, чем добавление их в браузер. Десктопная версия умеет распознавать скачанный файл сразу после того, как начнётся процесс загрузки. Это значит, что вам не нужно самостоятельно устанавливать параметр в программу. Достаточно лишь скачать шрифт на компьютер, открыть файл. После нажмите кнопку «Установить», если вы пользуетесь Windows, или же «Установить шрифт», если ваш ноутбук или компьютер работает на macOS. Чтобы шрифт появился в меню в настройках программы, нужно закрыть его и запустить заново.

    Установка скачанного шрифта в Figma

    Почему фигма не видит установленный шрифт?

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

    Проблемы с установкой шрифта в Figma web возникают реже. Но чаще всего они связаны с тем, что не установлено специальное дополнение Font installer. Его не нужно запускать каждый раз, дополнение работает в фоновом режиме — достаточно один раз скачать его в браузере.

    Особенности выбора шрифтов в Figma

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

    Figma для работы

    Дизайн — одно из популярных направлений в работе. Но Figma можно использовать и для других целей. Погрузиться в особенности сервиса помогут онлайн-курсы — ищите идеальный вариант для себя в специальной подборке от tutortop.

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

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

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

    В статье рассказывается:

    1. Что собой представляет Figma
    2. Работа со стилем текста в Figma
    3. Критерии выбора шрифтов в Figma
    4. Выбор парных шрифтов в Figma
    5. Алгоритм установки шрифтов в Figma
    6. Где скачать шрифты в Figma
    7. 5 самых популярных шрифтов в Figma
    8. 15 плагинов для работы с текстом в Figma
    9. Как сохранить проект и использовать его в дальнейшем

    Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

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

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

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

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

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

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

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

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

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

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

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

    Павел Симонов - исполнительный директор Geekbrains

    Павел Симонов
    Исполнительный директор Geekbrains

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Для вас подарок! В свободном доступе до 18.02 —>
    Скачайте ТОП-10
    бесплатных нейросетей
    для дизайнера
    Помогут находить референсы и изображения в 2 раза быстрее
    Чтобы получить подарок, заполните информацию в открывшемся окне

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Дарим скидку от 60%
    на обучение «Веб-дизайнер» до 18 февраля
    Уже через 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», вы получите уведомление о том, что начертания открыты для локальной версии. Теперь вы можете смело пользоваться шрифтами и не бояться, что появятся ошибки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне

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

    Наименование сайта Описание Ссылка
    DaFont Большое количество шрифтов под любой заказ dafont.com
    FontSpace Множество начертаний для коммерческого применения https://www.fontspace.com/popular/fonts
    1001 Free Fonts Тысячи шрифтов, разделённых на категории 1001freefonts.com
    Fontesk Красивые шрифты, которые можно использовать в Figma, но недостаточно фильтров и сортировок https://fontesk.com/fonts/
    TypeType Русский сайт с бесплатными начертаниями https://typetype.ru/freefonts/

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

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

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

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

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

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

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

    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 . Так что если вы можете сократить размер расположения рабочих досок, то желательно это сделать. Помимо этого, можно разделить документ на отдельные страницы.

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

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

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *