Top.Mail.Ru

Наш подход бустит продажи. Вы платите за результат!

Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Работа со шрифтами в Figma —  подробный гайд Редакция «Текстерры»
Редакция «Текстерры»

Figma — удобная и бесплатная программа для дизайна, где можно сделать практически все что угодно: отредактировать изображение, создать коллаж или презентацию и тд.

Программа бесплатная и доступна без VPN — достаточно зайти через свой Google-аккаунт или зарегистрироваться с почтой и паролем.

В этой статье разберем, как работать со шрифтами в Figma.

Выбор шрифта эт , конечно не дело пяти минут. От того, какие шрифты вы будете использовать, зависит восприятие вашего бренда. Попробуйте вспомнить самые успешные мировые бренды, что у вас встает в первую очередь перед глазами? Логотип. А логотип — это в первую очередь именно шрифт.

Святослав Грошев, старший дизайнер TexTera:
«Собственный шрифт — это часть уникального стиля бренда, которая помогает выделиться на рынке и улучшить узнаваемость. Он также сообщает аудитории и конкурентам, что у вашей компании высокая ценность. Но важно не только создать визуально привлекательные шрифты, но и уделять внимание тому, чтобы они были легко читаемыми и адаптированными для различных платформ и устройств. Например, для нас это главная задача. Наша дизайн-команда постоянно следит за трендами в области типографики, чтобы создавать для вас шрифты в ногу со временем».

По умолчанию в Figma установлены все шрифты из Google Fonts — обширной и бесплатной библиотеки. Если вы используете не веб-версию Figma, а приложение для Windows или macOS, то в нем по умолчанию будут доступны и локальные шрифты из этих приложений.

Каких-то собственных шрифтов у Figma нет. И сказать, какие лучше, а какие хуже, тоже нельзя. У каждого шрифта свои задачи и особенности применения. Это сильно зависит от сферы. Например:

  • Для e-commerce уместны изящные и стильные шрифты, которые привлекут внимание: Montserrat, Playfair Display, Prata.
  • Для развлекательных сайтов можно выбрать еще более стильные и даже творческие шрифты — Futura Bold, Roboto.
  • Для государственного сайта, наоборот, подойдут шрифты, которые передают ощущение серьезности и надежности: Lato, Open Sans.

Сравните, как отличаются шрифты на сайтах интернет-магазина, развлекательного портала и сайта МИД:

Сайты LIME, «Горящей избы» и МИД России Сайты LIME, «Горящей избы» и МИД России Сайты LIME, «Горящей избы» и МИД России
Смотреть галерею

Что нужно учесть при сочетании двух и нескольких шрифтов:

  1. Сочетайте шрифты по толщине

Тонкие шрифты хорошо выглядят рядом с похожими тонкими, а
тонкий шрифт рядом с жирным — менее гармонично:

Шрифтовые пары
  1. Учитывайте назначение шрифта

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

  1. На одной странице сочетайте не более двух, максимум — трех шрифтов

Подбирать пары удобнее с помощью специального плагина (об этом читайте ниже).

Разработаем вам фирменный стиль
Подробнее

Как и во многих стандартных редакторах, е управление шрифтом интуитивное. Как только вы что-то написали на макете — в правой панели появится меню «Text». Здесь можно управлять начертанием шрифта, его размером икеглем, ориентацией текста.

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

Инструмент со стрелкой вверх и вниз задает интерлиньяж (Paragraph Spacing) — размер отступа между строками. А соседний инструмент со стрелкой по горизонтали задает кернинг — размер между буквами.

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

Если нажать «Inter», можно выбрать непосредственно шрифт — из тех, что есть в Figma:

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

А если нажать «Regular», можно выбрать его начертание: жирное, курсивом, более тонкое.

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

Чтобы добавлять в браузерную версию Figma свои шрифты — которые вы создали сами и которые есть у вас на компьютере и в виде файлов — нужно установить с официального сайта плагин Figma Font Helper. Но и в библиотеке Figma изначально очень много шрифтов — возможно, вам хватит и их.

Плагины — что-то вроде приложений внутри большого приложения Figma. Они делают работу с сервисом удобнее и проще. Их здесь сотни и тысячи.

Чтобы установить тот или иной плагин, нажмите на значок с формами на панели управления Figma, затем выберите «Plugins» и введите название нужного плагина.

Работа с плагинами в Figma

Когда плагин появится, кликните на него и нажмите «Run». Второй вариант — скачивать их по прямой ссылке и затем устанавливать (на приведенные ниже плагины мы даем ссылки).

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

Скачать его можно здесь. Этот плагин позволяет подбирать шрифтовые пары (о гармоничных сочетаниях мы писали в начале статьи).

Установка Soroka

В Soroka содержатся сочетания бесплатных шрифтов из Google Fonts и он сразу показывает, как они будут выглядеть:

Плагин Soroka

Похожим образом работает плагин Accidentally Great Font Pairings — он создает удачные случайные пары шрифтов.

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

Установка To Path

Вот как он работает. Нарисуйте кривую или форму, затем напишите любой текст.

Плагин To Path

Выделите все эти объекты и нажмите на них правой кнопки мыши. выберите «Plugins» и затем «To Path».

Плагин To Path

Появится вот такое окно:

Плагин To Path

Нажмите в нем на «Link». Плагин разместит текст по краю фигуры.

Плагин To Path

Ещё один плагин из этой же сферы — Circular Text, который, как понятно из названия, создает текст по кругу.

Скачать его можно здесь. Когда мы выбираем те или иные цвета в Figma, очень легко следить за ними — достаточно выделить все объекты и посмотреть на панель справа, где и будут эти цвета.

Также можно сделать и с настройками текста — будут показываться используемый шрифт, интерлиньяж, кернинг и другие настройки. Поможет Font Master.

Установка Font Master

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

Плагин Font Master

Горячие клавиши помогут удобнее управлять Figma. Запоминать их не обязательно — сохраняйте статью в закладки и открывайте при необходимости. Эта таблица актуальна для Windows, но на macOS все примерно так же — просто в большинстве случаев вместо Ctrl используется клавиша Command (⌘).

Горячие клавиши

Читайте также:

7 самых полезных плагинов Figma на 2023 год

Figma НЕ продали за… $20 млрд! Что дальше? [Обновлено]

Создать презентацию в Figma? – да, вот подробный гайд!

Поделиться статьей:

Новое на сайте

14 июн 2024
15 510
Вам нужна работа, а вы — маркетолог. Что делать?

Ваш уникальный маркетинговый мозг никому не нужен, и это нормально.

14 июн 2024
401
Яндекс подминает рекламу под себя

Рекламная платформа eLama теперь принадлежит российскому IT-гиганту, и в связи с этим появились некоторые опасения.

14 июн 2024
440
Как заставить людей вас искать – и получить в 200 раз больше поисковых запросов!

Как оказалось, главная задача – чтобы ваш бизнес успевал за ростом числа клиентов, которых приводит на сайт SEO-оптимизация и экспертный контент.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.