Как скачать шрифт из фигмы
Перейти к содержимому

Как скачать шрифт из фигмы

  • автор:

Как загрузить шрифты в Figma

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

Заходи на телеграмм канал — там еще больше полезного

Шрифты в десктопной версии Фигма

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

Подключить локальные шрифты в браузерную версию Figma

Тут все немного сложнее, но то же просто) нужно зайти в настройки своего аккаутна из браузерной версии вот тут

Найти там пункт fonts и кликнуть на большую синюю кнопку

Загрузив утилиту у тебя появится примерно такое сообщение

Вот видишь, наверное, у меня 466 шрифтов на локальной машине, которые теперь тоже подтягиваются в Фигма.

Иконочный шрифт в Фигма

Но и это еще не все. Ты всегда можешь использовать иконочный шрифт в фигма, типа фонтаусом и ему подобные. При этом ты можешь сам создавать свои иконочные шрифты вот на этом сервисе icomoon.io. Тупо заливай туда свои свг, превращай в шрифт и загружай его себе на комп. Понятное дело, что Фигма подтянет их и у тебя будет свой собственный уникальный иконочный шрифт. Круто, правда? Читай о том, как сделать Фигму на русском и как поменять хот кеи в программе.

Шрифты в Figma: как настроить и использовать

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

Иллюстрация: Оля Ежак для Skillbox Media

Редакция «Дизайн» Skillbox Media

Редакция «Дизайн» Skillbox Media

Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.

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

9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу со шрифтами, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.

Выбор шрифтов и базовые настройки

Шрифты отображаются на панели инструментов справа в блоке Text. В нём есть несколько полей, которые помогут вам с настройками типографики:

  • Сам шрифт — отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.
  • Начертание — находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это light, regular и bold.
  • Кегль, или размер шрифта, — находится напротив начертания.
  • Разрядка || — расстояние между буквами.
  • Интерлиньяж — расстояние между строками.
  • Абзацный отступ .
  • Выравнивание.
    Горизонтальное — по центру , по левому или правому флагу . Вертикальное — вверх , вниз или по центру .

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

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

Если коллега отправил вам файл без необходимых шрифтов, Figma предупредит об этом вот таким уведомлением:

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

Чтобы изменить шрифт, в уведомлении кликните на поле с жёлтым квадратом и выберите замену. При необходимости можно изменить и начертание:

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Как скачать (вырвать) шрифт с дизайна Figma?

Подскажите как в браузерной Figma скачать шрифт
В макете есть текст, но там своебразный шрифт, которого нет в Google Fonts
Мне нужно его как то скачать, это возможно?

Отслеживать

13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков

задан 15 апр 2020 в 16:06

1,298 2 2 золотых знака 9 9 серебряных знаков 20 20 бронзовых знаков

@MaximLensky Да, установлен, но не знаю как им пользоваться

15 апр 2020 в 16:12

@MaximLensky сейчас посмотрю, попробую найти где это

15 апр 2020 в 16:16

выделите нужный текст — сбоку справа появится панель

15 апр 2020 в 16:17

@MaximLensky панель вижу, а missing fonts не могу найти

15 апр 2020 в 16:19

вообще этой опции нету в фигме . шрифт должен быть на компе либо в fonts.google.com — если же нету то фигма будет писать что вы хотите редактировать шрифт которого нету

15 апр 2020 в 16:20

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

  • шрифты
  • figma

Шрифты в Figma

По умолчанию, шрифты в Figma берутся из бесплатной коллекции шрифтов Google Fonts. Эта коллекция содержит в себе более 1000 шрифтов и поддерживает большое количество языков (в том числе и русский). Однако, дизайнеры не ограничиваются возможностью использования только этой коллекции шрифтов и могут устанавливать и использовать в макетах любые шрифты, которые смогут установить на свой компьютер.

Ниже, мы рассмотрим работу со шрифтами в Figma, а так же, процесс установки новых шрифтов. Подразумевается, что вы уже скачали и установили приложение Figma для вашей операционной системы.

Стандартные шрифты в Figma

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

Шрифты в Figma

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

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

Установка шрифтов

Для того, чтобы установить шрифт в Figma, вам нужно установить его в свою операционную систему. По сути, не существует такого процесса как «установка шрифта в Фигму». Редактор лишь отображает уже доступные в системе шрифты и шрифты Google Fonts.

Обычно, шрифты становятся доступными в Figma сразу после установки. В редких случаях вам нужно будет закрыть и заново открыть приложение Figma.

Установка шрифта в Windows

После того, как вы скачали архив со шрифтом, распакуйте его в отдельную папку. Щелкните правой кнопкой мыши на файле и в контекстном меню выберите опцию «Установить» (Install) для запуска процесса установки шрифта.

После окончания установки, вы можете найти новый шрифт перейдя в Панель управления > Шрифты. Так же, файлы шрифта будут доступны в директории C:\Windows\Fonts, соответственно директорию, в которую вы распаковали скачанный шрифт, можно удалить.

Установка шрифта в MacOS

Разархивируйте скачанный шрифт в директорию и двойным кликом откройте файл шрифта в окне просмотра. Далее, в этом окне кликните на кнопку Установить (Install). После установки, шрифт появится в окне приложения Шрифты (Font Book).

Так же как и в Windows, в MacOS шрифт скопируется в нужную системную директорию, поэтому после установки вы можете удалить как архив со шрифтом, так и директорию, в которую вы его разархивировали.

Figma Font Installer

Если вы используете браузерную версию Figma, то добавить внешние шрифты так же просто не получится. Для этого, вам нужно установить Figma Agent (Figma Font Installer). Скачать его можно на странице Downloads официального сайта. После установки этой программы, шрифты, установленные в операционной системе, будут доступны для выбора в веб-версии Фигмы.

Где скачать шрифты

В интернете вы без труда найдете большое количество сайтов с огромными коллекциями бесплатных шрифтов (в том числе с поддержкой кириллицы). Мы собрали топ-5 сайтов, где есть возможность предпросмотра шрифта, фильтрации списков по параметрам и главное — бесплатной загрузки.

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

Популярные курсы

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *