как правильно с ними работать

В статье рассказывается:  

1. Стиль текста в Figma
2. Рекомендации по выбору шрифтов в Figma
3. Работа со шрифтами в Figma
4. Добавление шрифта в десктопную версию Figma
5. Использование шрифта с иконками в Figma
6. Полезные плагины для работы со шрифтами в Figma

7. Пройди тест и узнай, какая сфера тебе подходит:
   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

   
   

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

У работы с шрифтами в Figma есть свои особенности, например, им нельзя задать цвет, равнение и т. д. Это вызывает неудобства только при первом знакомстве с платформой, в дальнейшем вы поймете, что это не недостатки, а преимущества. О том, как правильно работать со шрифтами в Figma, как добавить новые, вы узнаете из нашего материала.

Стиль текста в Figma

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

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

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

Стиль текста в Figma

Далее перечислены свойства, присущие текстовым стилям в Figma, и параметры, которые тут задать нельзя.

Задаваемые свойства:

• Доступные к установке в Figma шрифты, их размер, вес.
• Межстрочный интервал (интерлиньяж).
• Интервал между буквами и абзацами, структурирование текста.
• Украшение текста (зачеркивающая и подчеркивающая линии).
• Установка прописных и строчных букв, капитализация.
• Прочие опции Open Type, то есть, работа с табличными данными, капителиями и проч.

Свойства, отсутствующие в стиле текста Figma:

• Цвет шрифта.
• Выравнивание (выключка) текста по левому либо правому краю, по центру, по формату.
• Выравнивание текстового поля (верхнее, нижнее, по центру).
• Установка размера текстового поля (по горизонтали, по вертикали, фиксировано).

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

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

Рекомендации по выбору шрифтов в Figma

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

Какие же шрифты использовать в Figma в вашей конкретной системе? Тут следует принимать во внимание следующее:

• Показатель производительности. Есть ли какое-то ограничение производительности? Сколько шрифтов в вашем случае вы можете загрузить в Figma? Планируете ли вы использовать шрифты с других платформ (разумеется, доступные для применения)?
• Индивидуальные параметры. Имеются ли фирменные шрифты компании, которые необходимо будет применять?
• Есть ли необходимость в дополнительной системе шрифтов. Хватит вам единой системы, или нужно несколько стратегий? К примеру, при создании маркетингового сайта, большое значение может иметь узнаваемость бренда (в том числе и по шрифтам).
• Сочетание шрифтов парами. Позволит ли одно семейство шрифтов иметь достаточный типографический диапазон? Что касается сочетания, то большие тексты, например, можно выполнять декоративными шрифтами (не слишком ими злоупотребляя), а для основного текста применять разборчивые шрифты.

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

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

• Параметры основного текста.

Главное требование к типографике основного текста – хорошая читаемость. Для этого можно немного увеличить межстрочное расстояние. Слишком плотный текст воспринимается труднее. Как выбрать оптимальный интерлиньяж для основного текста? Умножьте размер шрифта на 1,5, и посмотрите, какой вид в результате получится у текста.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20957

• Влияние оптических эффектов.

Цвета текста и фона тоже имеют значение при определении интерлиньяжа. Положительный и негативный тексты (то есть, темные буквы на светлом фоне и наоборот, соответственно) смотрятся и читаются неодинаково. На восприятие влияет контекст и оптические эффекты, даже если свойства стиля оставить неизменными.

Влияние оптических эффектов

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

• Оформление заголовков.

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

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

Добавление шрифтов в десктопную версию Figma

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

Добавление шрифтов в десктопную версию Figma выполняется в несколько шагов:

1. Сначала необходимо скачать подходящий шрифт на сайте Figma (впрочем, не обязательно именно здесь).
2. Далее выполнить его установку.
3. После завершения – перезагрузить систему Figma.

Добавление шрифтов в десктопную версию Figma

Как изменить, то есть добавить и установить новый шрифт в Figma? Стандартным путем. К примеру, в Windows это можно сделать двумя способами:

• Войти в директорию со скачанным файлом и дважды кликнуть мышкой по его названию. В новом окне появится начертание, вверху страницы – кнопка «Установить». Просто нажмите на нее.
• Скопировать файл. Затем через «Проводник» зайти в системную папку Windows и там положить скопированный файл в папку Fonts. Всё, теперь он доступен для работы.

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

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

При этом процесс установки не подразумевает обязательные изменения в системной папке. Можно поступить так:

1. Отдельно создать в компьютере папку для новых загруженных шрифтов.
2. Собрать в ней все скачанные файлы.
3. Войти в панель управления и там, в появившемся справа списке, задать способ отображения «Мелкие значки».
4. Найти в списке разделов «Fonts» и зайти туда.
5. В меню справа кликнуть «Параметры…».
6. Вы окажетесь на странице, где нужно поставить галочку для разрешения копирования в папку Fonts ярлыков файлов, предназначенных для инсталляции.
7. Сохранить внесенные изменения.
8. Открыть созданную перед этим папку для новых файлов, скопировать их ярлыки и поместить в системную папку.

Только до 29.05

Скачай подборку тестов, чтобы определить свои самые конкурентные скиллы

Список документов:

Тест на определение компетенций

Чек-лист «Как избежать обмана при трудоустройстве»

Инструкция по выходу из выгорания

Чтобы получить файл, укажите e-mail:

Подтвердите, что вы не робот,
указав номер телефона:

Уже скачали 7503

Теперь остается перезапустить Figma. После этого все добавленные шрифты можно будет применять.

Использование шрифта с иконками в Figma

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

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

1. Скачать на компьютер файл с иконочным шрифтом.
2. Установить его.
3. Дать вашей версии дизайн-системы Figma возможность использовать загруженный шрифт. Десктопные версии поддерживают данную опцию на автомате (иконочных шрифтов это тоже касается). Если пользуетесь браузерным вариантом, то придется найти на официальном сайте специальное приложение, скачать его и установить у себя. Выше есть описание того, как это делается.

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

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

Полезные плагины для работы с шрифтами в Figma

Подключать дополнительные шрифты в Figma можно с помощью специальных плагинов, которых на сегодняшний день насчитывается свыше 400. Далее описаны самые эффективные из них (по мнению разработчиков).

Полезные плагины для работы с шрифтами в Figma

Аdd number to text

В данном плагине предусмотрены расширения для форматирования контента. Это позволяет редактировать шрифты в системе Figma, задавать фильтр для создания списков, указывать характеристики продукта. Работать с плагином просто:

• Сформируйте нужное количество полей.
• Укажите названия.
• Используя таблицу выбора (появляющуюся после клика правой кнопкой мыши, выделите все области).
• В списке выберите нужный плагин.

Откроется окно, а вам останется лишь вносить в него нужные изменения, задействовав специальную символику.

Change Text

Ищет и заменяет слова. Во всплывающем окне открывается два поля, в одно нужно вписать слово, подлежащее замене, а во второе – новый вариант. Затем запускаете программу, и она автоматически меняет все найденные заданные слова – на другие. Если надо выполнить корректировку в нескольких полях, то плагин запускается в действие по каждому в отдельности.

Content Buddy

Тоже плагин для выполнения замен в тексте, но он работает даже с целыми предложениями. Как запустить? Кликнуть правой кнопкой мыши по слою с нужным текстом, зайти в контекстное меню и нажать там по плагину (снова с помощью ПКМ).

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

Text Counts

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

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

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

Продвижение блога — Генератор
продаж

Рейтинг:
5

( голосов
1 )

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

Поддержка вариативных шрифтов в Figma

Аудио перевод статьи

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

Вариативные шрифты: основы

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

В чем разница между статичными и вариативными шрифтами?

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

Что такое ось?

Ось — это выражение одного изменяемого свойства шрифта. Например, «ширина» (width) определяет, насколько узким или широким может быть символ. “Вес» (weight) — насколько легким или жирным он может быть.

Какие виды осей существуют?

Большинство осей содержат непрерывный диапазон значений, однако некоторые из них являются бинарными. Бинарная ось — это переключатель, то есть существует только два варианта: выключить или включить (в нашем примере — курсив или не курсив). Ось с диапазоном значений дает больше возможностей для увеличения или уменьшения свойства, например, наклона.

Как вариативные шрифты меняют процесс разработки

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

Посмотрим на вариативные шрифты в действии

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

1. Делайте тексты более читабельными

Сделайте опыт взаимодействия с текстами более приятным и удобным, меняя оптический размер шрифтов. Используйте ось оптического размера (optical size axis), чтобы отобразить версию, оптимизированную с учетом выбранного размера букв.

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

2. Создавайте переходы

Создавайте более элегантные переходы между состояниями. Используйте ось градации (grade axis), чтобы изменить воспринимаемый вес шрифта без изменения его ширины.

Пример сверху: меняется “вес” (начертание) шрифта — соответственно меняется и ширина кнопки. Снизу — ширина остается неизменной, но шрифт становится более жирным за счет переключения оси Grade.

3. Размещайте шрифты в ограниченном пространстве

Занимаетесь ли вы локализацией дизайна или вам нужно уместить большое количество символов в ограниченном пространстве, вы можете использовать ось ширины (width axis), чтобы регулировать расстояние между буквами.

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

4. Добавьте движения

Используйте иконочные шрифты, чтобы добавить анимацию в свои проекты, не прибегая к другим технологиям. Меняйте внешний вид векторных фигур при помощи оси времени (time axis), и ваш интерфейс станет более динамичным!

Двигайте ползунок по оси времени, чтобы изменить внешний вид иконок.

Экспериментируйте!

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

Классные вариативные шрифты

1. ABC Whyte и Whyte Inktrap от Dinamo. ABC Whyte имеет плавные и резкие переходы, а Inktrap — грубоватые изогнутые стыки внутри букв.
2. GT Ultra от Grillitype. Эта универсальная типографская система сочетает в себе классический облик антиквы с динамизмом современных гротесков, бросая вызов современным представлениям о том, каким должен быть шрифт.
3. Cheee от OH no Type Co. Название этого шрифта — детское произношение слова “cheese” (сыр). Он выглядит странно, но восхитительно.
4. Fraunces от Undercase Type. Fraunces — шрифт в “псевдостаром стиле». В рамках этого стиля первостепенное значение имеет индивидуальность, а не правильное строгое построение букв.
5. Roboto Flex от Google Fonts. Этот проект с открытым исходным кодом модернизирует Roboto, превращая его в более мощную систему шрифтов, которая предоставляет вам больше возможностей для редактирования текстового контента и повышения его выразительности.
6. Noto Sans Display от Google Fonts. Шрифт с поддержкой латиницы, кириллицы и греческого языка, который составит идеальную пару другим шрифтам Noto Sans.
7. Anicons от Wenting Zhang и Hua Shu. Первый в мире цветной анимированный иконочный шрифт, основанный на иконках Material Design. Anicons — это эксперимент, сочетающий в себе две передовые шрифтовые технологии: вариативные и цветные шрифты.
8. WT Zaft² от WiseType. Zaft² — это 3 вариативных шрифта, каждый из которых включает уникальную ось управления и имеет свою собственную форму.

рукописных шрифтов | Типы шрифтов Figma

Шрифты Script | Типы шрифтов Figma Цены

ВойтиНачать работу

Начать работу

Начать работу

Шрифты Script основаны на рукописном тексте, поэтому они имеют больше вариаций и плавности, чем наборные шрифты. Они могут быть повседневными или официальными.

Изучить этот файл

Сочетание шрифтов Tangerine

Tangerine — это каллиграфический шрифт, вдохновленный курсивом канцелярских рук 16-го и 17-го веков.

Загрузить пару шрифтов

Сочетание шрифтов Sacramento Script

Гарнитура шрифта Sacramento представляет собой однострочный шрифт, вдохновленный ручным шрифтом в брошюрах 50-х и 60-х годов

Oleo — плавный шрифт. идеально подходит для повседневного эффекта надписи, подходит для заголовков и упаковки.

Загрузить пару шрифтов

О рукописных шрифтах

Большинство формальных рукописных шрифтов основаны на формах букв мастеров письма 17 и 18 веков. С технологической точки зрения добиться того, чтобы рукописные шрифты соединились и выглядели как настоящий почерк, может быть очень сложно.

Получить этот файл

Когда использовать рукописные шрифты

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

Получить этот файл

Бесплатные рукописные шрифты

Даже бесплатные рукописные шрифты имеют множество вариаций: Lobster — блочный и жирный, Pacifico — закругленный и округлый, а Tangerine — классический и элегантный. Выберите сценарий, который подходит вам лучше всего!

Получить этот файл

Сценарные свадебные шрифты

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

Получить этот файл

• Twitter
• YouTube
• Instagram
• Facebook

Варианты использования

• Дизайн пользовательского интерфейса
• UX-дизайн
• Каркас
• Диаграммы
• Мозговой штурм
• Онлайн-доска
• Гибкие рабочие процессы
• Стратегическое планирование
• Шаблоны
• Удаленное проектирование
• Агентства 900 58
• Figma для образования

Исследовать

• Особенности дизайна
• Особенности прототипирования
• Системы проектирования функции
• Функции совместной работы
• Процесс проектирования
• FigJam
• Цены
• Предприятие
• Организация
• Специалист
• Клиенты
• Безопасность
• Интеграции
• Контакты

Ресурсы

• Блог 900 58
• Передовой опыт
• Поддержка
• Разработчики
• Библиотека ресурсов
• Загрузки
• Что нового
• Выпуски
• Карьера
• Наша история
• Партнеры
• Конфиденциальность
• Заявление о современном рабстве
• Статус

Сравнить

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Дизайн на Windows
• Miro 9005 8

English

Шрифты без засечек | Типы шрифтов Figma

Шрифты без засечек | Типы шрифтов Figma Цены

ВойтиНачать работу

Начать работу

Начать работу

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

Изучить этот файл

Сочетание шрифтов Open sans

Open Sans — гуманистический шрифт без засечек, оптимизированный для печати, Интернета и мобильных интерфейсов.

Загрузить пару шрифтов

Пара шрифтов Josefin sans

Josefin Sans — элегантный геометрический винтажный шрифт, предназначенный для использования в больших размерах.

Загрузить пару шрифтов

Пара шрифтов Ubuntu

Семейство шрифтов Ubuntu представляет собой шрифт без засечек, финансируемый Canonical и разработанный Dalton Maag.

Загрузить пару шрифтов

Когда использовать шрифты без засечек

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

Получить этот файл

Шрифты без засечек и шрифты с засечками

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