Гайд по работе с текстом и шрифтами в Фигме
В данной статье мы НЕ будем разбирать теоретические основы типографики и правила манипулирования шрифтами. Все это мы уже обсуждали в статье о шрифтовых парах и типографике.
Текущий пост будет иметь прикладной характер и расскажет про инструменты, которые есть в Фигме для создания текстового контента. Мы разберем различные типы шрифтов, их комбинации, что и где лучше использовать. А так-же что обходить стороной.
Весь текстовый контент на сайтах условно можно разделить на заголовки и основной текст. Так например к основному тексту можно отнести описание в карточке с товарами или параграф в статье. В свою очередь к заголовкам можно отнести пункты меню или название товара, в той же карточке.
Заголовки и основной текст обычно являются компонентами одного текстового блока. Поэтому шрифты, используемые для них, должны сочетаться друг с другом. А значит мы должны использовать парные шрифты для этих двух групп контента.
Первое о чем нужно знать при выборе шрифта. Фигма использует в качестве умолчательных шрифтов коллекцию Google Fonts. Поэтому, процесс выбора лучше вести не в самом редакторе Фигмы, а искать напрямую на сайте Google. Банально из-за лучшего интерфейса и большего числа фильтров.
Здесь легко найти шрифт под любую задачу, будь это рукописный, кириллический или декоративный шрифт.
Как известно, 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, то у вас будут доступны шрифты, которые по умолчанию синхронизированы с 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) и просто устанавливаем себе в систему
Как добавить шрифты в Figma
Итак, вы наконец нашли идеальный шрифт для своего дизайна, но он недоступен в Figma. Учитывая, что Figma предлагает сотни потрясающих шрифтов, возможно, вы сможете найти близкую альтернативу. Но зачем идти на компромиссы, если можно добавить собственный шрифт и создать именно тот дизайн, о котором вы мечтали?
Вот как вы можете добавить шрифты в Figma, чтобы сделать ваши проекты более разнообразными. Оставайтесь с нами, чтобы получить ответы на некоторые распространенные вопросы.
Добавление шрифтов
Если вы не можете найти нужный шрифт в обширном репертуаре Figma, вам необходимо загрузить его и установить на свое устройство. Если вы используете настольное приложение Figma для Windows или macOS, шрифты, установленные на вашем устройстве, автоматически появятся в вашем средстве выбора шрифтов. Пользователям браузерных приложений нужно будет сделать дополнительный шаг, прежде чем они смогут пользоваться любым шрифтом в своем интерфейсе Figma. К сожалению, пользователи ChromeOS и Linux не смогут добавлять свои собственные шрифты в Figma. Если вы пользуетесь Windows или Mac, читайте дальше.
Добавление шрифтов в Figma в Windows
Чтобы использовать новый шрифт в Figma, вам нужно загрузить его и установить на свое устройство.
- Загрузите шрифт, который хотите импортировать в Figma.
- Перейдите в папку “Загрузки” и извлеките сжатый файл.
- Откройте папку для ОС Windows.
- Дважды щелкните файл шрифта.
- Нажмите “Установить” во всплывающем окне.
Теперь шрифт доступен на вашем устройстве, следовательно, и в Figma. Перезапустите приложение, чтобы увидеть изменения.
Вы можете найти свои установленные шрифты в Windows, открыв панель управления, затем «Внешний вид и персонализация». Дважды щелкните “Шрифты” и вы увидите свою библиотеку.
Добавьте шрифты в Figma на Mac
Чтобы установить новый шрифт на Mac, выполните следующие действия:
- Загрузите выбранный вами шрифт.
- Найдите загруженный файл в Finder.
- При необходимости извлеките сжатый файл.
- Откройте папку с файлами для macOS.
- Дважды щелкните файл шрифта.
- Нажмите кнопку “Установить шрифт” во всплывающем окне.
После установки шрифта на ваше устройство он автоматически появится в палитре шрифтов в ваше приложение Figma. Если вы его не видите, перезапустите приложение, и оно отобразится.
Установленные вами шрифты появятся в приложении «Книга шрифтов» на вашем Mac. Здесь вы можете отключить или удалить любой шрифт, выбрав его и нажав “Изменить” и соответствующий параметр в строке меню.
Добавление шрифтов в приложение Figma Browser
Ваши локальные шрифты не будут отображаться в приложении браузера по умолчанию, но вы можете исправить это с помощью удобной фоновой службы. Вам потребуется установить службу шрифтов Figma, доступную на их веб-сайте.
Добавьте локальные шрифты в браузерное приложение Figma следующим образом:
- Загрузите службу шрифтов для своего устройства с Windows или macOS.
- Установите приложение.
- Обновите Figma в браузере.
- Ваши локальные шрифты теперь будут средство выбора шрифтов.
Дополнительные часто задаваемые вопросы
Можно ли использовать веб-шрифты Google в Figma?
Да, Figma по умолчанию использует огромную библиотеку веб-шрифтов Google. Вам не нужно устанавливать шрифты Google, чтобы использовать их в приложении. Некоторые веб-шрифты Google по умолчанию будут в вашем средстве выбора шрифтов.
Какие шрифты Figma лучше всего подходят для дизайна пользовательского интерфейса?
С бесчисленным количеством шрифтов, которые нужно проверить, найти правильный становится непросто. Чтобы сэкономить время, начните поиск с лучших шрифтов Figma для дизайна пользовательского интерфейса. К счастью, это тоже шрифты Google, поэтому они доступны всем. Figma также дает несколько советов по сочетанию самых популярных шрифтов Google, чтобы пользователи могли их использовать. работу проще.
Лучшие шрифты без засечек включают:
· Открыть без шрифта
Чтобы найти лучшие шрифты с засечками в Figma, посетите:
Используйте любой шрифт в Figma
Правильный шрифт может существенно изменить любой дизайн, улучшая все, от удобочитаемости до общей атмосферы веб-страницы. Figma это хорошо знает и позволяет импортировать любой шрифт, который вы хотите. Загрузите и установите шрифт на свое устройство, и он мгновенно станет доступен в приложении. Служба шрифтов поможет вам, если вы используете браузерную версию.
Какие ваши любимые шрифты для использования в Figma? Довольны ли вы предложением приложения или готовитесь установить свой собственный набор? Дайте нам знать в разделе комментариев ниже.
Як завантажити та використовувати шрифт у Figma
Figma — це один з найбільш популярних кроссплатформенних графічних редакторів для веб-дизайнерів, який працює в хмарі, підтримує спільне редагування, доступний прямо в браузері або як програми для MacOS, Windows, iOS і Android.
Саме роботі з Figma присвячено суттєву частину курсу Wezom Академії. «Web-дизайн з нуля до крутого портфоліо» . А сьогодні ми хочемо розглянути таку важливу тему, як шрифти у Figma. Тому що тут є деякі особливості, залежно від того, яку версію редактора ви використовуєте — браузерну або десктопну.
Як завантажити шрифт у Figma онлайн
За промовчанням браузерна версія Figma використовує базу Google Fonts. Це велика бібліотека, якої в принципі більшості веб-дизайнерів (особливо новачків) достатньо. Але іноді необхідність додати якийсь особливий шрифт у Figma все-таки з’являється.
Алгоритм додавання шрифтів до браузерної версії наступний:
- Перейдіть на сторінку Figma downloads та знайдіть блок Font installers. Тут потрібно вибрати версію для вашої операційної системи.
- Завантажте та встановіть Figma Agent. Якщо у цей момент у вас була відкрита сторінка Figma, оновіть її.
- Тепер перейдіть до свого облікового запису, натисніть на іконку профілю (правий верхній кут), виберіть Settings і переконайтеся, що в блоці Fonts з’явилося повідомлення «Local fonts are enabled». Тут же відображатиметься кількість шрифтів із системи, які «підтягнулися» до Figma.
- Залишилося розібратися, як додати шрифт до 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 та без зайвої необхідності не підключати до проекту зовнішні шрифти. І причин тому кілька:
- Багато шрифтів, які ви вільно завантажуєте з інтернету, насправді захищено законом про авторське право. І їх використання цілком може спричинити неприємні наслідки для вас та ваших клієнтів.
- Figma – інструмент для командної роботи над проектом. Але якщо в однієї людини шрифт не встановлено, вона просто не відобразиться.
Саме другий пункт особливо важливий. Уявіть ситуацію: ви працюєте над проектом, підключаєте якийсь унікальний шрифт, а потім надаєте доступ до проекту колеги. Він відкриває документ і отримує попередження, що деякі шрифти з макету недоступні. Програма запропонує замінити їх на інший шрифт, щоб людина могла працювати з документом. Він погоджується та… шрифт скидається і у вас теж !
Подібні моменти можуть завдати просто безліч незручностей. А тому перед тим, як встановити шрифти у Figma , переконайтеся, що в цьому реально є потреба. І якщо вона дійсно є, поділіться файлами з колегами, щоб вони додали їх в систему і могли повноцінно працювати над загальним проектом.