Работа с текстом

В этом разделе мы узнаем как работать с текстом в фигме

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

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

В Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,

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

Что делать:

1. Открываем Google Fonts.

2. В пункте Language выбираем Кириллицу - Cyryllic.

3. При необходимости выбираем категорию шрифта.

Serif - шрифт с засечками. Пример: Playfair Display.
Sans Serif - шрифт без засечек. Пример: Open Sans.
Display - это шрифт, предназначенный для использования в больших размерах для заголовков, а не для расширенных фрагментов основного текста. Пример: Rosewood.
Handwriting - рукописный шрифт. Пример: Amatic SC.
Monospace - моноширинный шрифт. Пример: Courier New.

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

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

Как установить шрифты на пк? Скачиваем нужный шрифт, распаковываем его. После находим папку со шрифтами на своем пк и просто перетаскиваешь распакованный шрифт в папку со своими локальными шрифтами. Чтобы Figma их увидела нужно будет перезагрузить программу.

Шрифты в браузерной версии Фигма

Как установить? Нужно зайти в настройки своего аккаутна из браузерной версии. Найти данную вкладку можно на странице с вашими файлами.

В настройках находим пункт fronts и нажимаем на кнопку Download installer.

Открываем скачанное приложения и ждём окончание установки.

После загрузки утилиты в пункте fronts в настройках появится сообщение в котором будет указано сколько локальных шрифтов установлено на вашем пк. Далее новые установленные шрифты будут подтягиваться в Фигму.

Настройки текста

На правой панели настроек в фигма-файле при вводе текста появится пункт text.

Именно в этом пункте мы будем работать с текстом.

Первый пункт в этом меню - выбор шрифта. При нажатии появляется выпадающий список с набором шрифтов из Google Fronts.

Второй пункт меню - варианты написания текста.

Например: Bold, Bold Italic.

Line Height – межстрочное расстояние.
Letter Spacing — трекинг, межбуквенное расстояние или разрядка.

1

2

Если нажать на три точки раскроется расширенный список настроек теста.

При наведении на каждый пункт откроется превью , где можно увидеть что именно делает этот пункт.

Home