Что делать если не меняется шрифт в Figma?
Хочу изменить шрифт в макете, устанавливаю шрифт, перезагружаю фигму, меняю шрифт в настройках в фигме, а стиль шрифта не меняется, как был таким и остался.
Что за ошибка, как исправить?
- Вопрос задан более трёх лет назад
- 4165 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Андрей Баранцев @andreybarantsev
Шрифты в Figma: как настроить и использовать
Рассказываем, как настроить интерлиньяж, разрядку, абзацные отступы и установить дополнительные шрифты.
Иллюстрация: Оля Ежак для Skillbox Media
Редакция «Дизайн» Skillbox Media
Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.
Figma — очень удобна для веб-дизайнера благодаря встроенной интеграции с библиотекой Google Fonts. Но помимо этого она даёт пользователю много настроек шрифта, которые помогают очень тонко отрегулировать все текстовые блоки на макете. О том, где найти все эти настройки, — читайте в нашей инструкции.
9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу со шрифтами, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.
Выбор шрифтов и базовые настройки
Шрифты отображаются на панели инструментов справа в блоке Text. В нём есть несколько полей, которые помогут вам с настройками типографики:
- Сам шрифт — отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.
- Начертание — находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это light, regular и bold.
- Кегль, или размер шрифта, — находится напротив начертания.
- Разрядка |
| — расстояние между буквами. - Интерлиньяж
— расстояние между строками. - Абзацный отступ
. - Выравнивание.
Горизонтальное — по центру
, по левому 
или правому флагу 
. Вертикальное — вверх 
, вниз 
или по центру 
.
Если нажать на иконку , вы откроете дополнительные настройки шрифта. В них вы можете добавить зачёркивание, линию под текстом, капитель и настроить список.
Управление отсутствующими шрифтами
Если коллега отправил вам файл без необходимых шрифтов, Figma предупредит об этом вот таким уведомлением:
Чтобы редактировать все текстовые объекты в проекте, нужно установить или обновить недостающие шрифты на вашем устройстве. Вы также можете выбрать другой подходящий шрифт из уже имеющихся, но при этом помните, что он изменится и для вашего коллеги.
Чтобы изменить шрифт, в уведомлении кликните на поле с жёлтым квадратом и выберите замену. При необходимости можно изменить и начертание:
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Слетают стили шрифта при двойном клике
В общем в шапке темы все написано, но напишу еще раз. Еще вчера все было хорошо, но каково было мое удивление, когда я сегодня зашел в макеты и увидел что при двойном клике на текст кнопки — слетает его стиль.
Ровно так же происходит и со шрифтами которые обернуты в стиль. Есть предположения, почему так происходит? Я думал что проблема в моем компе или в моей фигме, но мои коллеги попробовали сегодня со своих компов глянуть. Ровно та же история.
Поддержка вариативных шрифтов в Figma
Вариативные шрифты появились еще в 2016 году и с тех пор завоевали большую популярность среди дизайнеров и разработчиков.
Вариативные шрифты: основы
Вариативный шрифт — это файл, который включает целый диапазон стилей, предоставляя дизайнерам больше контроля и возможностей для творческих экспериментов.
В чем разница между статичными и вариативными шрифтами?
Статичный шрифт представляет собой часть “семейства шрифтов”. Он привязан к одному определенному стилю и обычно имеет фиксированные параметры, такие как «полужирное» или «курсивное» начертание. Вариативные шрифты включают одну или несколько осей, что позволяет предложить гораздо более широкий выбор стилей.
Что такое ось?
Ось — это выражение одного изменяемого свойства шрифта. Например, «ширина» (width) определяет, насколько узким или широким может быть символ. “Вес» (weight) — насколько легким или жирным он может быть.
Какие виды осей существуют?
Большинство осей содержат непрерывный диапазон значений, однако некоторые из них являются бинарными. Бинарная ось — это переключатель, то есть существует только два варианта: выключить или включить (в нашем примере — курсив или не курсив). Ось с диапазоном значений дает больше возможностей для увеличения или уменьшения свойства, например, наклона.
Как вариативные шрифты меняют процесс разработки
Чтобы подключить статичные шрифты, нужно использовать отдельные файлы для каждой ширины, начертания или стиля. Вариативный же шрифт представляет собой один файл, который позволяет мгновенно получить доступ ко всему диапазону свойств. Результат — веб-страницы загружаются быстрее, а у пользователей появляется больше времени, чтобы насладиться красивой типографикой.
Посмотрим на вариативные шрифты в действии
Мы создали для вас файл, в котором вы сможете поиграть с осями вариативных шрифтов, чтобы увидеть, как они позволяют доводить дизайн ваших продуктов до совершенства и разрабатывать более оптимальный, выразительный опыт для пользователей.
1. Делайте тексты более читабельными
Сделайте опыт взаимодействия с текстами более приятным и удобным, меняя оптический размер шрифтов. Используйте ось оптического размера (optical size axis), чтобы отобразить версию, оптимизированную с учетом выбранного размера букв.
2. Создавайте переходы
Создавайте более элегантные переходы между состояниями. Используйте ось градации (grade axis), чтобы изменить воспринимаемый вес шрифта без изменения его ширины.
3. Размещайте шрифты в ограниченном пространстве
Занимаетесь ли вы локализацией дизайна или вам нужно уместить большое количество символов в ограниченном пространстве, вы можете использовать ось ширины (width axis), чтобы регулировать расстояние между буквами.
4. Добавьте движения
Используйте иконочные шрифты, чтобы добавить анимацию в свои проекты, не прибегая к другим технологиям. Меняйте внешний вид векторных фигур при помощи оси времени (time axis), и ваш интерфейс станет более динамичным!
Экспериментируйте!
Откройте для себя мир возможностей — используйте вариативные шрифты, чтобы сделать буквы более выразительными и придать им нужные черты.
Классные вариативные шрифты
- ABC Whyte и Whyte Inktrap от Dinamo. ABC Whyte имеет плавные и резкие переходы, а Inktrap — грубоватые изогнутые стыки внутри букв.
- GT Ultra от Grillitype. Эта универсальная типографская система сочетает в себе классический облик антиквы с динамизмом современных гротесков, бросая вызов современным представлениям о том, каким должен быть шрифт.
- Cheee от OH no Type Co. Название этого шрифта — детское произношение слова “cheese” (сыр). Он выглядит странно, но восхитительно.
- Fraunces от Undercase Type. Fraunces — шрифт в “псевдостаром стиле». В рамках этого стиля первостепенное значение имеет индивидуальность, а не правильное строгое построение букв.
- Roboto Flex от Google Fonts. Этот проект с открытым исходным кодом модернизирует Roboto, превращая его в более мощную систему шрифтов, которая предоставляет вам больше возможностей для редактирования текстового контента и повышения его выразительности.
- Noto Sans Display от Google Fonts. Шрифт с поддержкой латиницы, кириллицы и греческого языка, который составит идеальную пару другим шрифтам Noto Sans.
- Anicons от Wenting Zhang и Hua Shu. Первый в мире цветной анимированный иконочный шрифт, основанный на иконках Material Design. Anicons — это эксперимент, сочетающий в себе две передовые шрифтовые технологии: вариативные и цветные шрифты.
- WT Zaft² от WiseType. Zaft² — это 3 вариативных шрифта, каждый из которых включает уникальную ось управления и имеет свою собственную форму.