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

web_design
Аудіо доріжка
43524

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

image_1

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

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

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

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

  1. Перейдіть на сторінку Figma downloads та знайдіть блок Font installers. Тут потрібно вибрати версію для вашої операційної системи.
  2. image_2
  3. Завантажте та встановіть Figma Agent. Якщо у цей момент у вас була відкрита сторінка Figma, оновіть її.
  4. image_3
  5. Тепер перейдіть до свого облікового запису, натисніть на іконку профілю (правий верхній кут), виберіть Settings і переконайтеся, що в блоці Fonts з'явилося повідомлення "Local fonts are enabled". Тут же відображатиметься кількість шрифтів із системи, які «підтягнулися» до Figma.
  6. Залишилося розібратися,як додати шрифт до 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 – інструмент для командної роботи над проектом. Але якщо в однієї людини шрифт не встановлено, вона просто не відобразиться.

image_4

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

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

Курс "Курс Web-дизайна"

Курс Web-дизайна

Хочеш отримати навчання від Юрія Лінника?

На курсі ви освоїте:

  • Знання особливостей веб-проектів (респонсив, адаптив)
  • Знання принципів юзабіліті сайтів
  • Розробка дизайну під різні пристрої (десктоп, планшети, смартфони)
  • Роботу з дизайн макетами у Figma
  • Розуміння принципів проектування та розробки сайтів та інтерфейсів