Путь к улучшенной, умной и упрощенной архитектуре работы.

Проблема

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

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

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

Решение

Все это возможно благодаря силе Компонентов Figma. Они представляют собой инструмент для достижения нового уровня абстракции, уменьшая сложность дизайн-конструкций.

Компоненты и Переопределения (Overrides) в Figma настолько мощные, что они требуют от вас более тонкого и лучшего понимания того, как вы организуете свою работу. Если вы будете следовать методологии Atomic Design, компоненты в Figma позволят вам резко сократить количество общих элементов, необходимых для выполнения задачи.

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

Процесс

Шаг 1: Root-компонент

В некоторых аспектах техника очень похожа на то, что называется CSS and fluid typographyкоторую можно встретить в Интернете в наши дни.

Итак, давайте начнем с создания нового Компонента текстового слоя, который будет выступать в качестве базовой единицы измерения (Root Unit), а все другие текстовые слои будут зависимы от нее. Я выбрал базу 16px /120%.


Компонент, созданный из текстового элемента

Два небольших требования:

Resize to Fit: просто не оставляйте пустое пространство вокруг краев фрейма компонента, чтобы избежать проблем с выравниванием в будущих экземплярах (Instances).

Rename: Переименовывайте внутренний текстовый слой в поле «Текст», так как при смене экземпляров с помощью меню выбора на панели свойств текстовое содержимое будет сохраняться. См. раздел «Swapping Nested Instances»


Переименованный компонент текста

Шаг 2. Настройка модульной шкалы

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

Используя модульный инструмент масштабирования, например modularscale.com, мы можем быстро генерировать ряд значений для объектов Figma. В нашем случае я выбрал 16px в качестве базовой единицы и 1,5 в качестве коэффициента (Простите, любители Золотого сечения…)

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

Шаг 3: Создаем Экземпляры (Instances)

Затем мы можем создать Instances, начиная с базового (Root) компонента. Просто перетащите его, удерживая клавишу Option/Alt, затем измените текст и размер фрейма как на картинке.

А теперь самое сложное… нам надо подогнать размер экземпляров под размеры текста, созданный нами ранее…

НО…. Мы не будем устанавливать размер шрифта через панель свойств, вместо этого мы используем Scale Tool (K).

Лучшее свойство Scale Tool в Figma это его способность пропорционально изменять абсолютно все свойства, такие как: обводка (strokes), направления масштабирования (constrains) и размеры, сохраняя при этом экземпляр/слой полностью редактируемым.

Итак… Время растягивать!

Примечание. Если бы мы выбрали размер с помощью панели «Свойства», это вызвало бы переопределение и установило бы независимое поведение для экземпляра.

Примечание 2. Конечный размер шрифта может содержать значения с запятой, не паникуйте, это допустимо, особенно при использовании css-функции calc().

Шаг 4: Растягиваем базовый элемент

Просто повторите шаг 3 для всех экземпляров и готово!

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

Важно: каждый раз изменяя размер базового компонента, обязательно используйте Resize to Fit на панели свойств, как показано в шаге 1 и картинке ниже в режиме Outline Mode (⌘ + Y) или Shift+Ctrl+3.

Шаг 5: Поиграем шрифтами!

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

Правило большого пальца… если вы измените размер шрифта вручную с помощью панели свойств, динамическое изменение размера через базовый компонент перестанет работать для этого экземпляра. Фактически вы просите Figma установить фиксированный размер для этого текстового объекта.
В некоторых случаях это, наоборот, необходимо — например, если вам нужно зафиксировать размер текста для определенных размеров экрана или сохранить только в заголовках. См. ниже на примере строку «Elon Musk».

Подытожим

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

Сложные в использовании компоненты или 10-кратные дубликаты одного и того же элемента ради изменения цвета или типа выравнивания ушли в прошлое.

Образец файла проекта доступен бесплатно здесь!

Даже скачивать не надо! 🙂

Автор: Mirko Santangelo is a Senior Designer at Paper Tiger, an award-winning, boutique digital design agency based outside of New York City.