Как залить шрифт в фигму

Як завантажити та використовувати шрифт у Figma

Figma — це один з найбільш популярних кроссплатформенних графічних редакторів для веб-дизайнерів, який працює в хмарі, підтримує спільне редагування, доступний прямо в браузері або як програми для MacOS, Windows, iOS і Android.

Саме роботі з Figma присвячено суттєву частину курсу Wezom Академії. «Web-дизайн з нуля до крутого портфоліо» . А сьогодні ми хочемо розглянути таку важливу тему, як шрифти у Figma. Тому що тут є деякі особливості, залежно від того, яку версію редактора ви використовуєте — браузерну або десктопну.

Як завантажити шрифт у Figma онлайн

За промовчанням браузерна версія Figma використовує базу Google Fonts. Це велика бібліотека, якої в принципі більшості веб-дизайнерів (особливо новачків) достатньо. Але іноді необхідність додати якийсь особливий шрифт у Figma все-таки з’являється.

Алгоритм додавання шрифтів до браузерної версії наступний:

1. Перейдіть на сторінку Figma downloads та знайдіть блок Font installers. Тут потрібно вибрати версію для вашої операційної системи.
2. Завантажте та встановіть Figma Agent. Якщо у цей момент у вас була відкрита сторінка Figma, оновіть її.
3. Тепер перейдіть до свого облікового запису, натисніть на іконку профілю (правий верхній кут), виберіть Settings і переконайтеся, що в блоці Fonts з’явилося повідомлення «Local fonts are enabled». Тут же відображатиметься кількість шрифтів із системи, які «підтягнулися» до Figma.
4. Залишилося розібратися, як додати шрифт до Figma крім тих, що вже містяться у вашій операційній системі. Все просто. Вам потрібно завантажити файл шрифту у форматі .ttf та додати його до системи. Алгоритм у Windows та MacOS трохи відрізняється:

• Windows. Клацніть правою кнопкою миші на файлі та в контекстному меню натисніть «Встановити».
• MacOS. Двічі клацніть лівою кнопкою миші на файлі і у вікні, натисніть «Встановити шрифт».

Готово, шрифт доданий до системи та «підтягнувся» у Figma. Тільки не забудьте оновити вікно редактора.

Зверніть увагу! Якщо ви повторно інсталюєте Windows і MacOS, необхідно буде інновувати Figma Agent. А ось при переустановці або зміні веб-браузера, що використовується, повторна установка не потрібна — Figma Agent працює на рівні системи.

Як встановити шрифт у Figma у програмі MacOS або Windows

Візуально та технічно десктопна програма практично не відрізняється від веб-версії. Але різниця, як кажуть, у дрібницях. І одна з таких «дрібниць» – саме шрифти.

Отже, як додати шрифти до Figma якщо ви використовуєте десктопний клієнт?

Насправді ще простіше, ніж для веб-версії. Справа в тому, що десктопні програми за промовчанням підключають усі встановлені шрифти з вашої системи. Встановлювати Figma Agent та виконувати будь-які додаткові дії не потрібно.

Алгоритм додавання нових шрифтів до системи абсолютно той самий:

• Windows. Правий клік миші по файлу — «Встановити».
• MacOS. Подвійний клік миші по файлу — «Встановити шрифт».

До речі, якщо такий спосіб видається незручним, можете спробувати використовувати сторонні інструменти. Наприклад, менеджер шрифтів FontBase Freemium для Mac, Windows та Linux. Але це не обов’язково, штатних засобів роботи зі шрифтами більшості достатньо.

Порада! Підключайте сторонні шрифти лише коли це дійсно необхідно

Отже, ми розібралися, як завантажити шрифти у Figma. Але тут виникає інше питання: чи варто зловживати цією можливістю і підключати сторонні шрифти до кожного проекту?

Насправді ні. Простіше та зручніше працювати з інтегрованими Google Fonts та без зайвої необхідності не підключати до проекту зовнішні шрифти. І причин тому кілька:

1. Багато шрифтів, які ви вільно завантажуєте з інтернету, насправді захищено законом про авторське право. І їх використання цілком може спричинити неприємні наслідки для вас та ваших клієнтів.
2. Figma – інструмент для командної роботи над проектом. Але якщо в однієї людини шрифт не встановлено, вона просто не відобразиться.

Саме другий пункт особливо важливий. Уявіть ситуацію: ви працюєте над проектом, підключаєте якийсь унікальний шрифт, а потім надаєте доступ до проекту колеги. Він відкриває документ і отримує попередження, що деякі шрифти з макету недоступні. Програма запропонує замінити їх на інший шрифт, щоб людина могла працювати з документом. Він погоджується та… шрифт скидається і у вас теж !

Подібні моменти можуть завдати просто безліч незручностей. А тому перед тим, як встановити шрифти у Figma , переконайтеся, що в цьому реально є потреба. І якщо вона дійсно є, поділіться файлами з колегами, щоб вони додали їх в систему і могли повноцінно працювати над загальним проектом.

Как добавить шрифт в фигму (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 на всех версиях продукта (приложения Mac, Windows и браузерная) предоставляет пользователям доступ к библиотекам Google Fonts.

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

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

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

Работа со шрифтами в Figma

Какие шрифты Figma применяет в работе? Как установить новый шрифт?

Если вы используете веб-версию программы Figma, то у вас будут доступны шрифты, которые по умолчанию синхронизированы с Google Fonts (https://fonts.google.com/).

Все начертания, а также поддержка или не поддерживание кириллицы — абсолютно все параметра соответствуют Google Fonts. Единственное разработчики добавили иконочный шрифт Font Awesome (https://fontawesome.com/), чтобы можно было просто рисовать простые иконки.

Для того, чтобы добавить шрифт в фигму вам нужно установить десктопную версию программы. Есть возможность установить шрифты в браузерную версию (Через Figma font Helper), но я это не рекомендую делать, так как браузер будет очень сильно дополнительно нагружать систему за счет своего движка.

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

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

1. Установите его на компьютер;
2. Скачайте и запустите программу Figma (если вы в процесс работы установили шрифт, тогда просто перезапустите программу, чтобы она установила новый шрифт.

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

Как добавить шрифт в Фигму, если вы используете браузерную версию программы?

Также данную информацию ищут по запросу «как установить шрифт в фигму». Сейчас постараюсь наглядно показать как это сделать.

Открываем настройки программы (Пункт меню Settings)

В разделе Fonts нажимаем на кнопку «Download installer»

Теперь наши шрифты в системе и в Figma синхронизированы

Для того чтобы добавить шрифт в Figma — переходим на любой сайт со шрифтами (например WebFontsPro) и просто устанавливаем себе в систему