UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Эффективная работа с типографикой в Figma
Редакція
Редакція

Опубліковано

Эффективная работа с типографикой в Figma

Ця стаття українською:

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

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

Основы стиля текста

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

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

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

Свойства, определяемые стилем текста Figma:

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

Свойства, не входящие в стиль текста Figma

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

Если вы привыкли работать в другом инструменте дизайна, вам может показаться странным, что в Figma стили текста не содержат таких свойств, как цвет или выключка. Хотя к этому нужно привыкнуть, надеюсь, преимущества данного подхода быстро станут очевидными.

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

Установка шрифтов, размеров и наименование

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

Спецификации шрифтов

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

  • Производительность приложения: есть ли у вас бюджет производительности? Сколько шрифтов вам нужно загрузить? Будете ли вы использовать шрифты, которые уже установлены на разных платформах?
  • Индивидуальность: У вас есть фирменные шрифты, как часть визуальной идентичности компании, которые имеет смысл использовать?
  • Несколько систем: решите, нужна ли одна общая система шрифтов или различные стратегии для разных вариантов использования: например, продукт или маркетинговый веб-сайт (где индивидуальность бренда может иметь больший вес).
  • Сочетания пар шрифтов: Можете ли вы получить нужный типографический диапазон от одного семейства шрифтов? Рассмотрим сочетания пар шрифтов. Вы можете зарезервировать декоративные шрифты для текста большого размера, которые вы используете экономно, а разборчивые шрифты оставить для основного текста. Если вы используете бесплатные шрифты Google, мы также создали ресурс, который поможет вам легко изучить различные возможности с помощью этих палитр сочетания.

Масштабирование

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

Основной текст

Чтобы сделать типографику основного текста удобочитаемой, вы можете позволить себе немного больше пространства между строками. Основной текст плотный, и иногда пользователи тратят много времени на его прочтение. В качестве отправной точки для определения правильного интерлиньяжа, я рекомендую умножить размер шрифта основного текста на 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, так и в виде наименования в табличном представлении. Заранее скоординировав названия текстовых стилей с командой разработки, вы значительно упростите процесс передачи проекта разработчикам.

Вы можете использовать несколько разных подходов к именованию стилей текста:

  • Система именования на основе размеров (XS, S, M, L, XL)
  • Система семантических имен, соответствующая HTML-тегам в разработке (заголовок, абзац, h1, h2)
  • Описательная или функциональная система именования, которая объясняет предполагаемое использование стилей (alert, modal-header, button-label)

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

Организация стилей текста

Сила префиксов

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

Отдельные библиотеки

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

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

Сочетание стилей цвета и стилей текста

Как я уже упоминал ранее, в Figma цвет не является частью стиля текста, но вы можете применить отдельный стиль цвета к текстовому объекту или даже применить несколько стилей цвета к различным частям текста (в одном и том же текстовом поле!). Хотя применение цветового стиля является дополнительным шагом, вашу систему будет намного проще поддерживать, если вам не придется создавать текстовый стиль для каждой возможной цветовой комбинации.

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

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

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

Изменение размера текстового поля в Figma

Вы еще читаете? Мы уже много чего рассмотрели. Поскольку ваши текстовые стили готовы, у меня есть последний совет.

При создании текстовых полей в Figma, к ним можно применить три основных режима изменения размера:

  • Увеличение по горизонтали (по умолчанию при нажатии один раз, чтобы создать новое текстовое поле)
  • Увеличение по вертикали
  • Фиксированное изменение размера (по умолчанию при нажатии и перетаскивании для создания нового текстового поля)

На ранних стадиях вашего проекта есть вероятность, что некоторые из этих свойств могут измениться. Например, если у вас установлено увеличение размера текстового поля по горизонтали, изменение его размера по вертикали автоматически изменит режим на «Фиксированное». Это всегда будет случаться на исследовательских этапах проектирования, когда вас меньше заботит точность.

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

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

Например, в видео ниже у нас есть заголовок с размером шрифта 48px и высотой строки 64px. В приведенном выше примере размер текстового поля был изменен вручную (что изменило его поведение при изменении размера на фиксированное). Вместо высоты 64px (определяется высотой строки), высота была установлена ​​на 74px путем изменения размера.

Когда разработчик проверяет файл, чтобы понять, как далеко друг от друга находятся два текстовых объекта, расстояние рассчитывается от нижней части текстового поля, содержащего заголовок, и составляет 6px. В коде высота заголовка будет рассчитываться на основе высоты строки (которая в данном случае составляет 64px). Таким образом, на самом деле, в производственном процессе элементы будут на 10px ближе друг к другу и будут визуально несовместимы с тем, что задумал дизайнер.

Во втором примере, установив поведение изменения размера на увеличение по вертикали, мы увидим, что высота регулируется в соответствии со значением высоты строки текстового стиля. Теперь, когда разработчик проверяет расстояния между двумя объектами, он видит, что расстояние составляет 16px – более точное значение отношений между этими элементами, как это было бы в коде.

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

В погоне за мечтой ?

Я надеюсь, что эти советы будут полезны при настройке набора стилей шрифтов, как части вашей дизайн-системы. Не стесняйтесь делиться своими советами, подходами и опытом в нашем сообществе на Spectrum.


Перевод статьи Thomas Lowry

Топ коментарі (1)