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

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

Фигма не видит шрифт(десктоп)?

642d89d0c5e3b636383934.jpeg
Фигма отказывается видеть конкретно этот шрифт. Другие скачанные шрифты видит. Трио офис шрифт находит и корректно работает с ним. Возможно, из-за названия фигма не хочет его видеть, но проблема ещё и в том, что я не могу поменять название шрифта. При этом, это созданный мной шрифт.
642d8f166dc2e592211946.png
642d8c8fa5017692061384.jpeg
Разрешения все менял, всех удалял, всех добавлял — ничего не меняется.
Шрифт переформатировал, удалял, форматировал ещё раз, из ттф в отф.
Сохранил как «веб-формат»:
имя в личной информации менялось на ново-заданное, конвертировал обратно в отф — опять это название в описании, оно «внутреннее», оно всегда отображается как название шрифта в папке windows\fonts и ищется программой по этому имени.

  • Вопрос задан 05 апр.
  • 265 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

tank666

Дизайнер, Figma-эксперт, автор плагинов для Figma.

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

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

Ответ написан 05 апр.

Комментировать

Нравится 3 Комментировать

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

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

40 показов
40K открытий

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

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

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

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

Связь 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 для работы или других целей, обратите внимание на эту статью. В ней мы расскажем, как установить новый шрифт в Figma в браузере, добавить уже скачанный в веб-версию и в приложение на компьютере, раскроем причины того, почему Фигма не видит установленный шрифт.

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

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

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

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

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

Более того, сейчас у вас есть уникальная возможность сэкономить на обучении: мы предлагаем скидку в размере 10 000 ₽ на курсы в любой из школ-партнёров, представленных на сайте tutortop. Это отличный шанс инвестировать в своё образование и карьеру, не переплачивая.

Получите онлайн-курсы стоимостью 20 000 ₽ абсолютно бесплатно и промокод 10 000 ₽ на обучение.

Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.

Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.

Чтобы убедиться в том, что установка прошла успешно, нужно зайти в аккаунт через браузер и выбрать пункт 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.

Анна Уженкова

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

Лиза Шарипова

Веб-дизайнер. Занимается дизайном с 2020 года. Училась в Skillbox, BBE, проходила курсы по типографике и композиции. Полностью упаковывала образовательный продукт для IT-компании EPAM и делала лендинг для международного стартапа. Любит путешествовать и находит в этом вдохновение.

Шрифты в Figma: как настроить и использовать

Рассказываем, как настроить интерлиньяж, разрядку, абзацные отступы и установить дополнительные шрифты.

Иллюстрация: Оля Ежак для Skillbox Media

Редакция «Дизайн» Skillbox Media

Редакция «Дизайн» Skillbox Media

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

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

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

Выбор шрифтов и базовые настройки

Шрифты отображаются на панели инструментов справа в блоке Text. В нём есть несколько полей, которые помогут вам с настройками типографики:

  • Сам шрифт — отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.
  • Начертание — находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это light, regular и bold.
  • Кегль, или размер шрифта, — находится напротив начертания.
  • Разрядка || — расстояние между буквами.
  • Интерлиньяж — расстояние между строками.
  • Абзацный отступ .
  • Выравнивание.
    Горизонтальное — по центру , по левому или правому флагу . Вертикальное — вверх , вниз или по центру .

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

Управление отсутствующими шрифтами

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

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

Чтобы изменить шрифт, в уведомлении кликните на поле с жёлтым квадратом и выберите замену. При необходимости можно изменить и начертание:

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

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

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