Решаем проблему с поддержкой шрифтов на linux в figma. БЕЗ figma-linux
Если не хотите читать мои приключения, а сразу перейти к установке скрольте до следующего заголовка.
Предыстория
Постараюсь максимально кратко описать свою проблему, дабы вы могли понять что и зачем я делаю. Также стоит заметить, что я ближе к любителю, нежели к профессионалу в вопросах дизайна, открытого ПО, фронта и бека. И вообще лучше не мешать градусы, головушка заболит.
Я очень много работаю в терминале, слезать с него больно и не хочется, к сожалению в windows такого же мощного инструмента нет(кроме wsl, но даже это не покрывает мои потребности на 100%), тут еще и фронтенд разработка подъехала и каждый раз дуалбутиться ради одного приложения не вариант. Первое, что я нашел на просторах интерната был репозиторий figma-linux, но вот проблема — у меня приложение подтормаживает, а некоторые настойки не применяются. Хотелось бы конечно иметь производительность хотя бы на уровне браузера. И это самая БОЛЬШАЯ проблема, т.к в браузерной версии шрифты google-fonts — максимум. Решение я искал и почти нашел figma-linux-font-helper, но у меня это не заработало.
Попытка поставить figma через wine в принципе не увенчалась успехом, приложение не коннектится к интернету. Решение так и не находилось, пока я случайно не скачал вместо figma — font installer(то самое приложение справа), и да он доступен только для macos и для windows. И тут меня осенило! Если не ставиться figma, то можно поставить font installer и пользоваться шрифтами сколько угодно. Немножко погуглив я узнал, что wine спокойно подтягивает шрифты из системы, к слову использую я арческий дистрибутив garuda, в котором wine идет из коробки.
Для установки figma agent, он же font installer, не нужны никакие дополнительные зависимости в winetricks. Устанавливаем, и все шрифты летят прямиком в браузер, но хотелось бы иметь иконочку на панельке, это уже чистый перфекционизм — nativefier в помощь. Сие творение позволяет конвертнуть любое web-приложение в нативное. Далее создаем символическую ссылку и кидаем ее в любую удобную вам панельку. Но есть маленькая проблемка: когда будете экспортировать что-то из макета прога будет кидать всё в
По итогу с помощью wine устанавливаем font installer, чтобы работали локальные шрифты. А с помощью nativefier ставим figma, желательно с роутом на Recents или Drafts, чтобы не приходилось каждый раз логиниться.
Важно! После каждого перезапуска системы сервер шрифтов падет. Чтобы его поднять, нужно выполнить в терминале команду wineboot , перед открытием figma и все будет ОК.
Краткий алгоритм
В интернете полно гайдов как поставить тот или иной язык программирования, библиотеку или программу, не будем на этом зацыкливаться, я лишь даю действия которые нужно совершить чтобы всё заработало.
Качаем и устанавливаем node.js и npm. Первое, что пришло в голову — через nvm.
Ставим wine. Для каждого дистрибутива свой алгоритм, да и статья не об этом.
Качаем font installer для windows.
С помощью nativefier превращаем браузерную версию figma в десктопную. Рекомендую что-то такое nativefier «https://www.figma.com/files/recent» именно с роутом на недавние, на что угодно, главное не на логин.
Запускаем полученное приложение, и вуаля: нормальная производительность + поддержка установленных в системе шрифтов, правда экспорты идут в
/Downloads, но это не беда.
Создаем символическую ссылку на исполняемый файлик и кидаем её куда хотим. Я вот на панельке закрепил — удобно.
Важно! После каждого перезапуска системы сервер шрифтов падет. Чтобы его поднять нужно выполнить в терминале команду wineboot , перед открытием figma и все будет ОК.
Ну и последнее, если сервер шрифтов перестал работать, то сгоняйте и скачайте новую версию с официального сайта figma.
Почему в фигме не работают шрифты
Как установить Figma Font Helper
- Откройте браузер файлов в Figma.
- Нажмите на свое имя в верхнем левом углу.
- Выберите настройки учетной записи из вариантов.
- Прокрутите вниз до раздела «Шрифты».
- Нажмите Download Installer, чтобы включить локальные шрифты:
- Или загрузите Font Helper с веб-сайта Figma: https://www.figma.com/downloads/
- Запустите установщик и следуйте инструкциям на экране.
Спасибо 
Как добавить шрифт в фигму (Figma) за 2 минуты. Видео инструкция.
В этой статье и видео уроке вы узнаете, как добавить шрифт в фигму (Figma) буквально за пару минут. Это быстрая, пошаговая инструкция.
Если вы задаётесь вопросами как установить, загрузить, скачать и добавить новые шрифты в фигму, то посмотрите видео выше или воспользуйтесь текстовым руководством внизу.
Как установить шрифт в фигму в браузере
Сперва отмечу, что если вы установите десктопную версию программы Figma, то у вас будут отображаться все установленные шрифты, которые есть на вашем компьютере.
Если вы привыкли работать в браузере и хотите, чтобы шрифты, которые установлены у вас на компьютере отображались в браузерной версии программы, то вам необходимо установить специальное расширение «Font installer».
Инструкция по установке Font Installer
- Для установки Font Installer перейдите по адресу: https://www.figma.com/downloads/
- Справа выберите нужную операционную систему. Windows или MacOs и скачайте приложение.
- Установите приложение 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 (https://fonts.google.com/).
Все начертания, а также поддержка или не поддерживание кириллицы — абсолютно все параметра соответствуют Google Fonts. Единственное разработчики добавили иконочный шрифт Font Awesome (https://fontawesome.com/), чтобы можно было просто рисовать простые иконки.
Для того, чтобы добавить шрифт в фигму вам нужно установить десктопную версию программы. Есть возможность установить шрифты в браузерную версию (Через Figma font Helper), но я это не рекомендую делать, так как браузер будет очень сильно дополнительно нагружать систему за счет своего движка.
Как добавить шрифт в Figma? Как загрузить шрифт в Фигму?
Если вы хотите загрузить шрифты в Фигму, тогда вам придется скачать desktop-ную версию программы (Скачать программу Figma). В ней шрифты подгружаются из вашей системы, поэтому, чтобы использовать сторонний шрифт:
- Установите его на компьютер;
- Скачайте и запустите программу Figma (если вы в процесс работы установили шрифт, тогда просто перезапустите программу, чтобы она установила новый шрифт.
!Внимание! Если вы добавили шрифт в Figma, а затем открыли проект через веб-версию Фигмы, то вы получите ошибку, что данный шрифт не доступен в веб-версии и нужно либо заменить шрифт, либо редактировать проект в десктопной версии программы.
Как добавить шрифт в Фигму, если вы используете браузерную версию программы?
Также данную информацию ищут по запросу «как установить шрифт в фигму». Сейчас постараюсь наглядно показать как это сделать.
Открываем настройки программы (Пункт меню Settings)
В разделе Fonts нажимаем на кнопку «Download installer»
Теперь наши шрифты в системе и в Figma синхронизированы
Для того чтобы добавить шрифт в Figma — переходим на любой сайт со шрифтами (например WebFontsPro) и просто устанавливаем себе в систему