Как посмотреть все шрифты в фигме
5 полезных плагинов для Figma: работа с текстом и шрифтами
Как расположить текст вокруг фигуры, подобрать шрифтовые пары и быстро настроить стили шрифтов на макете.
Катя Павловская для Skillbox Media
В Figma есть много инструментов для работы с текстами, но некоторые задачи невозможно решить её стандартными инструментами. В этом случае вам помогут плагины, которые расширяют и упрощают функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.
To Path
Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:
Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой:
Копирайтер, визуализатор, модель. Пишет статьи, стилизует съемки и участвует в них, изучает арт-критику в СПбГУ.
Better Font Picker
В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение — использовать его или нет:
Soroka
Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:
Первый выбранный шрифт будет использоваться в заголовках, а дополнительный — в основном тексте:
Fontiger
Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger — он автоматически округляет дробное значение кегля до ближайшего целого:
Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.
Font Master
В Figma очень удобно следить за используемыми цветами — достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему — он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.
Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:
Шрифты в Figma: особенности, применение и выбор
Шрифты — одна из важных составляющих работы над проектом. Рассказываем, какие возможности для использования шрифтов есть в Figma.
Применение и выбор шрифтов
Figma — это инструмент для веб-дизайна, поэтому к нему подключены шрифты Google Fonts. Кроме того, можно локально установить другие шрифты и использовать их для своих проектов.
Разберемся, как работать со шрифтами в Figma и какие есть особенности в их использовании.
Шрифты в Figma можно применять ко всему текстовому объекту, нескольким объектам, словам или выделенным буквам внутри объекта. Рассмотрим на примере.
Выберите один или несколько текстовых объектов.
Шрифты отображаются на панели справа в блоке Text. В первом поле вы увидите текущий шрифт. У меня это Montserrat.
Чтобы изменить гарнитуру шрифта, нажмите стрелку «вниз» справа от шрифта. Откроется Font Picker (список шрифтов) — выберите нужный.
Если вы знаете правильное наименование шрифта, то можете выбрать гарнитуру, не открывая Font Picker. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название — вот так:
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.
Использование локальных шрифтов
Если вы хотите использовать в Figma дополнительные шрифты, которые не включены в список веб-шрифтов Google, загрузите нужные на компьютер и берите их.
В этом случае браузерная версия отличается от десктопной.
Установка Figma Font Helper
Есть два способа установки. Первый — через свою учетную запись в браузерной версии Figma.
Нажмите на свой логин в верхнем левом углу и выберите Account Settings.
Прокрутите вниз до раздела Fonts и нажмите на кнопку Download Installer to enable local fonts, чтобы скачать инсталлятор для локальных шрифтов.
После того, как вы скачали Figma Font Helper, запустите установщик и следуйте инструкциям на экране. Устанавливается буквально в два клика. Чтобы проверить работу инсталлятора, зайдите в профиль браузерной версии. Вы увидите следующую картину:
Второй способ еще проще. Вам нужно скачать Figma Font Helper с официального сайта и установить.
Управление отсутствующими шрифтами
Очень полезная функция при работе со шрифтами в Figma.
Если в файле используется шрифт, недоступный вам через средство выбора шрифтов (через веб-шрифты Google или локальные источники), то появится такое предупреждение.
Такое предупреждение будет появляться каждый раз, когда вы попытаетесь редактировать текст, шрифта которого у вас нет.
Это случается, если над проектом работают два дизайнера и один из них использует локальный шрифт, которого нет у второго. Либо дизайнеры используют разные версии одного и того же шрифта.
Чтобы редактировать все текстовые объекты в проекте, нужно установить или обновить недостающие шрифты на вашем устройстве. Вы также можете выбрать другой подходящий шрифт из уже имеющихся, но при этом помните, что шрифт поменяется и для вашего коллеги.
Если вы хотите заменить весь текст в проекте, который использует недоступный шрифт, это можно сделать через модальное окно Missing Fonts. В нем будут перечислены все шрифты, которых вам не хватает. Вместе с гарнитурой шрифта вы увидите стиль, который тоже можно будет заменить.
Откройте выпадающий список и выберите нужный шрифт.
Figma автоматически сопоставит стиль выбранного шрифта со стилем отсутствующего, но вы можете сделать это сами.
После того, как вы выбрали шрифт, нажмите кнопку Apply для завершения замены.
Все ваши тексты в проекте обновлены.
Использование иконочного шрифта
Figma поддерживает популярный и простой в использовании набор иконок Font Awesome. Если вам не подходит этот набор и вы хотите использовать другие иконки, создайте свой иконочный шрифт любым удобным способом — например, с помощью сервиса IcoMoon, и установите локально на вашем устройстве. После установки он будет доступен в Figma вместе с другими шрифтами.
Остановимся подробнее на использовании иконочных шрифтов на примере Font Awesome.
Font Awesome — иконочный шрифт в Figma
Создайте текстовый объект в Figma.
В разделе Text на панели свойств в Font Picker выберите Font Awesome 5 Brands.
Перейдите по ссылке https://fontawesome.com/cheatsheet — вы попадете на страницу таблицы иконочного шрифта, который по умолчанию интегрирован в Figma.
Этот шрифт разделен на три большие категории:
Выберите подходящую иконку, выделите и скопируйте ее в буфер обмена — Ctrl+C.
Затем переключитесь в Figma и вставьте эту иконку в созданный ранее текстовый объект — Ctrl+V.
Теперь вы можете настраивать эту иконку по своему усмотрению как обычный шрифт.
Также в Font Awesome можно выбрать стиль иконок — Regular или Solid.
Regular — контурное начертание, Solid — заливка.
Эффективная работа с типографикой в Figma
Типографика составляет основу дизайна так же, как цвета и компоненты. Поэтому на ранних этапах построения дизайн-системы вам нужно создать паттерны для согласованной, разборчивой типографики. Это облегчит масштабирование типографики между несколькими приложениями и устройствами, не усложняя процесс передачи проектов от дизайнеров разработчикам.
В этой статье мы рассмотрим, что вы должны учитывать, при работе со шрифтами в Figma. Мы предложим улучшения рабочего процесса, чтобы сделать использование стилей текста более эффективным, как для дизайнеров, так и для разработчиков.
Основы стиля текста
В Figma функциональность стилей текста позволяет легко применять к текстовым объектам набор свойств (например, интерлиньяж и размер). Вы можете поместить эти стили в библиотеку, а затем легко делиться ими со своей командой или компанией.
Стили текста вносят ясность в процесс проектирования. Если в ходе улучшения или редизайна, один из текстовых параметров необходимо изменить, вы можете отправить обновления этих стилей во все файлы, где они были использованы (просто опубликовав обновление в исходной библиотеке Figma).
Прежде чем мы продолжим, я кратко опишу, какие свойства являются частью текстовых стилей Figma, а какие нет.
Свойства, определяемые стилем текста Figma:
Свойства, не входящие в стиль текста Figma
Если вы привыкли работать в другом инструменте дизайна, вам может показаться странным, что в Figma стили текста не содержат таких свойств, как цвет или выключка. Хотя к этому нужно привыкнуть, надеюсь, преимущества данного подхода быстро станут очевидными.
Когда вы поддерживаете стили в упрощенном формате, это сокращает время, которое вы тратите на их создание – вам больше не нужно учитывать все возможные комбинации текста, цвета, выравнивания и т. д. Это также уменьшает объем работы, необходимой для их обслуживания, поскольку, если что-то изменится в вашей системе, вам надо обновлять меньше стилей. Вы можете настроить выравнивание текста отдельно от стиля.
Установка шрифтов, размеров и наименование
Спецификации шрифтов
Множество факторов влияет на то, какие шрифты использовать в вашей системе. Вы должны учитывать следующее:
Масштабирование
Помимо выбора правильных шрифтов для вашей системы, вам также необходимо указать для них правильный интерлиньяж. Например, вы должны использовать иной подход к настройке интерлиньяжа основного текста, чем для заголовков. Ниже я подробнее расскажу, что следует учитывать в этих двух случаях использования.
Основной текст
Чтобы сделать типографику основного текста удобочитаемой, вы можете позволить себе немного больше пространства между строками. Основной текст плотный, и иногда пользователи тратят много времени на его прочтение. В качестве отправной точки для определения правильного интерлиньяжа, я рекомендую умножить размер шрифта основного текста на 1,5. Затем оцените, достаточно ли разборчив полученный результат.
Оптические эффекты
При определении интерлиньяжа основного текста вы также должны учитывать цветовую схему текста и его фона. У вас в приложении положительный текст (темный текст на светлом фоне) или негативный (светлый текст на темном фоне)? Стиль с одинаковыми свойствами может выглядеть по-разному в зависимости от контекста и оптических эффектов.
Например, в собственной дизайн-системе Figma у нас есть отдельные стили текста как для положительного, так и для отрицательного текста. Основное различие между этими стилями заключается в небольшом изменении расстояния между буквами, увеличивая пространство между буквами для стилей, используемых на темном фоне.
Заголовки
Вам не понадобится так много места между строками или буквами шрифта, как для основного текста. Таким образом, вы захотите уменьшить межстрочный интервал для заголовков. Если используемый вами шрифт имеет определенные варианты для дисплеев разных размеров, разработчик шрифта, скорее всего, уплотнил интервал, сделав это частью дизайна шрифта.
При выборе шрифта я рекомендую установить подобие водопада, чтобы организовать размер текста от большего к меньшему. Это даст вам обзор всей системы.
Типографические шкалы
Не существует магического числа, определяющего, сколько стилей или размеров вам понадобится. Например, в этой статье креативный директор Дэн Молл подробно рассказывает о своем опыте, получения широкого диапазона на основе всего 7 размеров. Это может стать отличной отправной точкой для вас.
Нет недостатка в теории, как определить, какими будут эти размеры, но вот несколько общих подходов (вместе с соответствующими ссылками, чтобы узнать больше о каждом из них):
Система сетки 8-pt с базовой линией 4-pt
В системе сетки 8-pt все интервалы и размеры кратны 8. Дизайнеры часто используют сетку 8-pt для определения размеров и интервалов с базовой сеткой 4-pt для типографики. Базовые линии шрифта будут лежать на сетке 4-pt. Чтобы добиться этого, нужно уделять больше внимания интерлиньяжу, а не точным размерам шрифтов.
Цель этой системы состоит в том, чтобы все значения интерлиньяжа были кратны 4, чтобы они соответствовали размеру сетки. Это облегчает регулирование вертикального ритма (верхний и нижний интервал между элементами) и поддерживает вертикальное выравнивание текста по столбцам.
Плюсы: Это один из моих любимых подходов определения типографической шкалы. Простая математика путем сложения, вычитания, деления и умножения значений. Перемещение объектов по холсту во время процесса проектирования можно значительно упростить путем настройки параметра «Big nudge» на 8px в Figma.
Совет: Хотя этот подход может показаться недостаточно гибким, я рекомендую использовать 8-pt сетки в качестве ориентира в процессе проектирования, но не обязательно усиливать их до n-й степени при проверке качества ваших дизайнов в ходе разработки. В коде нет базовой сетки, к которой привязываются объекты. Это, в сочетании с большим разнообразием разрешений устройств (которые не всегда делятся на 8), несомненно, нарушит ваши измерения!
Модульная шкала
В этом подходе выбирается базовый размер шрифта (обычно размер, который вы будете использовать для основного текста). В качестве отправной точки многие будут использовать настройки браузера по умолчанию и начинать с 16px (или 1 rem). Отсюда размеры шрифта рассчитываются на основе определенного множителя.
Советы: при использовании модульной шкалы с некоторыми множителями (например, с использованием золотого правила, как показано ниже) вы получите размеры шрифта и интерлиньяж, которые не являются целыми числами. Как вы с этим разберетесь, зависит от вас: один из вариантов – округлить до ближайшего целого числа. В Figma, если у вас включена привязка к пикселям, высота текстовых полей (на основе интерлиньяжа) будет округлена до ближайшего целого числа. Если вы не хотите этого, убедитесь, что вы отключили привязку к пикселям.
Передача разработчикам: в разработке эти нюансы не будут иметь большого значения, однако, если все размеры текстовых полей в Figma не являются целыми числами, это может стать серьезной проблемой для разработчиков, которые проверяют ваши дизайны (так как они не увидят целых чисел при измерении расстояний к текстовым объектам и от них). Я рекомендую изучить такие инструменты, как modular scale или type scale. Они отлично подходят для быстрой визуализации диапазона размеров и могут помочь вам определить, насколько они читабельны.
Внимание: вы обнаружите, что с увеличением множителя, особенно свыше 1,4 или 1,5, большие размеры станут действительно большими, часто слишком большими! (как показано ниже). Интерлиньяж, рассчитанный инструментами, будет соответствовать этому примеру, поэтому вы можете выбрать другое соотношение размеров экрана и интерлиньяжа отдельно от меньших размеров шрифта.
Процентная система
При таком подходе размеры шрифта определяются в пикселях, а интерлиньяж определяется в процентах. Это работает по тому же принципу, что и модульная шкала, но намного проще в реализации (особенно если размеры шрифта и проценты – круглые числа).
Плюсы: с этим методом вам не нужно явно устанавливать разные значения интерлиньяжа (для каждого размера шрифта). Например, вы можете установить все меньшие стили на 150%, а фактический интерлиньяж будет рассчитываться, как 150% от указанного размера шрифта.
Осторожно: хотя может быть соблазнительно упростить задачу, используя одинаковое процентное значение для всех размеров, при переходе к более крупным размерам шрифта это может привести к непривлекательным сочетаниям. Когда размер шрифта станет больше, увеличьте межстрочное расстояние, и вы столкнетесь с такими проблемами, как заголовки, занимающие две строки.
Совет: в этом случае вы можете решить использовать 2 (или даже 3) разных процента для размеров основного текста и заголовков. Приведенный ниже пример был смоделирован после того, как опытный пользователь Figma Jonathan Simcoe использовал процентный подход, о котором вы можете узнать подробнее здесь. Вы увидите сдвиг в значении интерлиньяжа со 150% до 110% при больших размерах текста, которые используются для заголовков и подзаголовков.
Я предлагаю вам потратить время на изучение этих трех различных подходов. Когда вы сможете быстро сравнить варианты рядом на холсте в Figma, вы получите представление о том, какой из них вам больше подходит. Я также рекомендую провести стресс-тест различных вариантов в реальных макетах экрана. Получив набор шрифтов и размеров, вы можете начать создавать свои стили шрифтов в Figma, а затем публиковать их и делиться ими с товарищами по команде.
Далее мы рассмотрим некоторые предложениях по именованию и организации ваших стилей текста.
Наименование и организация стилей текста
Наименование стилей текста
Правильное название может помочь дизайнерам понять, когда и где использовать стиль текста, а также помочь разработчикам определить, является ли применяемая ими типографика частью дизайн-системы.
Пройдите процесс именования ваших текстовых стилей в тандеме с разработкой, чтобы обеспечить согласованную терминологию между вашими проектами в Figma и рабочим кодом. Имена текстовых стилей будут отображаться в представлении режима кода в Figma, как в виде комментария в представлении CSS, так и в виде наименования в табличном представлении. Заранее скоординировав названия текстовых стилей с командой разработки, вы значительно упростите процесс передачи проекта разработчикам.
Вы можете использовать несколько разных подходов к именованию стилей текста:
Описательный подход к именованию может помочь вам понять, где эти стили используются. В конечном итоге вы создадите больше стилей с этим подходом (поскольку некоторые стили могут иметь одни и те же свойства), скрытых за более описательным именем, чтобы помочь определить их предполагаемое использование.
Организация стилей текста
Чтобы облегчить просмотр своих стилей, вы можете добавить префикс, отделенный от имени стиля слэшем (префикс / имя-стиля), который сгруппирует стили по подзаголовкам в палитре стилей.
Чем больше стилей текста вы добавите, тем длиннее будет список выбора. Чтобы упростить анализ, вы можете разделить стили текста на отдельные библиотеки вместо одной централизованной. Это стоит сделать, если дизайнеры используют разные стили для разных проектов, чтобы им не приходилось просматривать стили, которые им не нужны.
Например, у вас есть отдельный набор стилей шрифтов для нативного мобильного приложения и стили текста, ориентированные на адаптивный веб-интерфейс. Возможно, вы захотите хранить эти стили в двух разных библиотеках, поэтому люди, работающие над адаптивным веб-проектом, смогут просто просматривать конкретную библиотеку.
Сочетание стилей цвета и стилей текста
Как я уже упоминал ранее, в Figma цвет не является частью стиля текста, но вы можете применить отдельный стиль цвета к текстовому объекту или даже применить несколько стилей цвета к различным частям текста (в одном и том же текстовом поле!). Хотя применение цветового стиля является дополнительным шагом, вашу систему будет намного проще поддерживать, если вам не придется создавать текстовый стиль для каждой возможной цветовой комбинации.
В связи с растущей потребностью дизайна в доступных цветах, многие команды будут тщательно подбирать цветовые сочетания для цвета текста и фона. Одной из стратегий создания таких пар является сохранение цветовых стилей специально для текста; затем использование описания стилей, чтобы указать соответствующий цвет фона, для которого они предназначены.
Другой подход к управлению цветовыми сочетаниями заключается в создании компонентов. Это особенно полезно, если у вас есть согласованные текстовые схемы, используемые во всех ваших проектах.
Например, если у вас есть конкретная схема текста и цвета для цитат, вы можете применить все необходимые стили текста и цвета к образцу цитаты, и преобразовать его в простой компонент для повторного использования. Даже, если у дизайнера возникнет необходимость отсоединить компонент для изменения фактического текста, все стили текста будут по-прежнему применяться.
Изменение размера текстового поля в Figma
Вы еще читаете? Мы уже много чего рассмотрели. Поскольку ваши текстовые стили готовы, у меня есть последний совет.
При создании текстовых полей в Figma, к ним можно применить три основных режима изменения размера:
На ранних стадиях вашего проекта есть вероятность, что некоторые из этих свойств могут измениться. Например, если у вас установлено увеличение размера текстового поля по горизонтали, изменение его размера по вертикали автоматически изменит режим на «Фиксированное». Это всегда будет случаться на исследовательских этапах проектирования, когда вас меньше заботит точность.
По мере того, как вы приближаетесь к разработке и начинаете требовательнее относиться к дизайну, я рекомендую по возможности устанавливать текстовые поля в режим увеличения по вертикали прежде, чем приступить к разработке. Использование этого параметра гарантирует, что высота текстовых полей будет соответствовать высоте строки, указанной в вашем стиле шрифта. При переключении в этот режим текстовое поле, размер которого слишком велик для его содержимого, автоматически изменит размер до нужной высоты.
Почему это важно? Когда разработчики проверяют ваши файлы, они должны иметь возможность точно измерить расстояние между текстовыми объектами и другими объектами на холсте. Если текстовые поля не имеют точного размера, интервал между элементами, несомненно, будет отключен после реализации.
Например, в видео ниже у нас есть заголовок с размером шрифта 48px и высотой строки 64px. В приведенном выше примере размер текстового поля был изменен вручную (что изменило его поведение при изменении размера на фиксированное). Вместо высоты 64px (определяется высотой строки), высота была установлена на 74px путем изменения размера.
Когда разработчик проверяет файл, чтобы понять, как далеко друг от друга находятся два текстовых объекта, расстояние рассчитывается от нижней части текстового поля, содержащего заголовок, и составляет 6px. В коде высота заголовка будет рассчитываться на основе высоты строки (которая в данном случае составляет 64px). Таким образом, на самом деле, в производственном процессе элементы будут на 10px ближе друг к другу и будут визуально несовместимы с тем, что задумал дизайнер.
Во втором примере, установив поведение изменения размера на увеличение по вертикали, мы увидим, что высота регулируется в соответствии со значением высоты строки текстового стиля. Теперь, когда разработчик проверяет расстояния между двумя объектами, он видит, что расстояние составляет 16px – более точное значение отношений между этими элементами, как это было бы в коде.
Если вы хотите узнать больше об изменении размера, наша справочная статья подробно раскрывает этот вопрос, и если вы хотите узнать больше о наших недавних улучшениях обработки высоты строки, обязательно прочтите этот пост.
Я надеюсь, что эти советы будут полезны при настройке набора стилей шрифтов, как части вашей дизайн-системы. Не стесняйтесь делиться своими советами, подходами и опытом в нашем сообществе на Spectrum.