Не работает figma font helper

Как добавить шрифт в фигму (Figma) за 2 минуты. Видео инструкция.

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

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

Как установить шрифт в фигму в браузере

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

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

Инструкция по установке Font Installer

1. Для установки Font Installer перейдите по адресу: https://www.figma.com/downloads/
2. Справа выберите нужную операционную систему. Windows или MacOs и скачайте приложение.
3. Установите приложение Font Installer и все шрифты с вашего компьютера будут отображаться в браузерной версии Figma.

Как добавить шрифт в фигму

Чтобы добавить новый шрифт в фигму, скачайте файл шрифта в формате «Otf». Например возьмем шрифт gilroy. Кликните на файл шрифта 2 раза и нажмите на кнопку установить. После этого можно перезагрузить фигму и этот шрифт появиться в вашей программе.

Какие шрифты лучше устанавливать в фигму?

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

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

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

Шрифты, которые я рекомендую использовать в Figma:

• Montseratt
• Open Sans
• Raleway
• Roboto
• Noto sans
• Ubuntu
• Oswald
• Rubik
• Bebas Neue
• Pt sans
• Pt serif
• Playfair display

Заключение

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

Источник

Шрифты в Figma: особенности, применение и выбор

Шрифты — одна из важных составляющих работы над проектом. Рассказываем, какие возможности для использования шрифтов есть в Figma.

Применение и выбор шрифтов

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

Разберемся, как работать со шрифтами в Figma и какие есть особенности в их использовании.

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

Выберите один или несколько текстовых объектов.

Шрифты отображаются на панели справа в блоке Text. В первом поле вы увидите текущий шрифт. У меня это Montserrat.

Чтобы изменить гарнитуру шрифта, нажмите стрелку «вниз» справа от шрифта. Откроется Font Picker (список шрифтов) — выберите нужный.

Если вы знаете правильное наименование шрифта, то можете выбрать гарнитуру, не открывая Font Picker. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название — вот так:

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.

Курс «Графический дизайнер с нуля до PRO»

Попробуйте курс по графическому дизайну бесплатно

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

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

В этом случае браузерная версия отличается от десктопной.

• Для десктопной версии все локально установленные шрифты в вашей системе будут автоматически доступны в Figma. Найти их можно там же, где и Google Fonts — в Font Picker.
• Для браузерной версии локально установленные шрифты изначально недоступны. Сначала вам нужно будет установить приложение Figma Font Helper.

Установка Figma Font Helper

Есть два способа установки. Первый — через свою учетную запись в браузерной версии Figma.

Нажмите на свой логин в верхнем левом углу и выберите Account Settings.

Прокрутите вниз до раздела Fonts и нажмите на кнопку Download Installer to enable local fonts, чтобы скачать инсталлятор для локальных шрифтов.

После того, как вы скачали Figma Font Helper, запустите установщик и следуйте инструкциям на экране. Устанавливается буквально в два клика. Чтобы проверить работу инсталлятора, зайдите в профиль браузерной версии. Вы увидите следующую картину:

Второй способ еще проще. Вам нужно скачать Figma Font Helper с официального сайта и установить.

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

Очень полезная функция при работе со шрифтами в Figma.

Если в файле используется шрифт, недоступный вам через средство выбора шрифтов (через веб-шрифты Google или локальные источники), то появится такое предупреждение.

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

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

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

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

Откройте выпадающий список и выберите нужный шрифт.

Figma автоматически сопоставит стиль выбранного шрифта со стилем отсутствующего, но вы можете сделать это сами.

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

Все ваши тексты в проекте обновлены.

Использование иконочного шрифта

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

Остановимся подробнее на использовании иконочных шрифтов на примере Font Awesome.

Font Awesome — иконочный шрифт в Figma

Создайте текстовый объект в Figma.

В разделе Text на панели свойств в Font Picker выберите Font Awesome 5 Brands.

Перейдите по ссылке https://fontawesome.com/cheatsheet — вы попадете на страницу таблицы иконочного шрифта, который по умолчанию интегрирован в Figma.

Этот шрифт разделен на три большие категории:

1. Solid Icons.
2. Regular Icons.
3. Brand Icons.

Выберите подходящую иконку, выделите и скопируйте ее в буфер обмена — Ctrl+C.

Затем переключитесь в Figma и вставьте эту иконку в созданный ранее текстовый объект — Ctrl+V.

Теперь вы можете настраивать эту иконку по своему усмотрению как обычный шрифт.

Также в Font Awesome можно выбрать стиль иконок — Regular или Solid.

Regular — контурное начертание, Solid — заливка.

Заключение

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

Figma

Полное руководство по cамому прогрессивному инструменту для дизайнеров: навыки быстрой работы с высоким качеством. На протяжении курса вы с нуля создадите проект, при создании которого задействуете все возможности Figma.

Новости

+7 (499) 444-90-36 Отдел заботы о пользователях

Москва, Ленинский проспект, дом 6, строение 20

• Участник Skolkovo
• Премии Рунета 2018, 2019, 2020

• Все направления
• Программирование
• Дизайн
• Маркетинг
• Управление
• Игры
• Мультимедиа
• Для бизнеса

• О Skillbox
• О Платформе
• Центр карьеры
• Отзывы
• Контакты
• Вакансии
• Школа кураторов

• Вебинары
• Все вебинары
• Плейлисты
• Расписание

• Журнал
• Партнерская программа
• Лицензия
• Корпоративным клиентам
• Для работодателей

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Источник

Как починить Figma после последнего обновления

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

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

Uh oh … we can’t open that file

Что собственно у меня произошло? Просто Figma перестала открываться, белый экран, а потом ошибка, что где-то слетел webGL. С какого и почему, неизвестно. Но ошибка подсказывала, что это может быть из-за видео карты или драйверов. Жест!

Видюха работала исправно, не смотря на то, что ей 10 лет. Драйвера я на всякий случай обновил, но это не помогло. А так как работать figma перестала именно после своего обновления, то я предположил, что с последним обновлением могли перестать поддерживать старые видео карты. Но сама эта мысль очень абсурдна, ведь для проектирование графических интерфейсов особые мощности то и не нужны. Раньше Figma запускалась и быстро летала и на менее мощной машине. Но поделать было нечего.

Последним шагом стала переустановка системы, потому что все предыдущие шаги и переустановка самой Figma не помогли. Не помог и запуск программы с параметром -disable-gpu-compositing.

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

Решение пришло откуда не ждали

В один прекрасный день, Дима сказал, что у него обновилась Figma и попросил чекнуть апдейт для своей машины. Я запустил ПК, открыл Figma, но апдейта не случилось как должно было. Ну и не надо, подумал я, а сам краем глаза заметил маячащие обновления системы Windows.

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

И, Господи, чудо! Оно ожило!

В этот момент один товарищ вспомнил о недавней легенде, что какое-то Виндовское обновление ломало аппаратную работу с 3D графикой. А видимо новое обновление этот косяк исправило. Конечно, это тоже догадка. Но очевидно, что был какой-то софтверный конфликт. Так, что если вы тоже столкнулись с такой проблемой, то принудительно обновите систему и переустановите Figma!

Источник