Почему в Figma стоит использовать фреймы, а не группы


14.09.2021 Время чтения - 6 минут 1317

Разбираем различия между фреймами и группами и причину, по которой фреймы намного мощнее.


Читайте нас в Telegram.


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

Группы vs фреймы

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

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

Суперсилы фреймов

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

1) Независимое изменение размера

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

Совет. Измените размер фрейма, чтобы он идеально соответствовал его содержимому. Для этого выберите фрейм и щелкните значок «Resize to Fit» в правом верхнем углу панели.

2) Применение стилей

Подобно прямоугольникам, фреймы – это объекты, которым можно задать стиль. К ним можно применить заливку, обводку или тень. У них также могут быть закругленные углы. Такой уровень гибкости означает, что фрейм можно использовать в качестве основы для проектирования (почти) чего угодно. Например, кнопка может быть сделана только из стилизованного фрейма (синий с закругленными углами) и одним текстовым слоем. В отличие от групп, где для фона нужно было бы добавить второй слой (что делает невозможным auto layout).

3) Содержимое, выходящее за края

Фрейм может иметь дочерние элементы (вложенные слои), выходящие за его границы. Эти дочерние элементы вне границ могут оставаться видимыми или скрытыми с помощью «Clip Contents». Это позволяет фреймам достигать ряда различных эффектов, как те, что вы видите ниже.

A. Создайте эффект маски со включенным параметром «Clip Contents». Например, делая фоном части объекта, выходящие за пределы кадра.

Фото из дизайн-системы UI Prep

B. Со включенным параметром «Clip Contents» можно создать эффект скрытия/раскрытия. Например, для отображения большего или меньшего количества элементов в раскрывающемся меню.

Фото из дизайн-системы UI Prep

C. При создании прототипа со включенным параметром «Clip Contents» можно добиться эффекта прокрутки. Например, прокрутка по горизонтали для взаимодействие с каруселью.

Фото из дизайн-системы UI Prep

D. При ВЫКЛЮЧЕННОМ параметре «Clip Contents» вы можете создать меняющийся эффект для добавления контента, не влияя на размер/интервалы фреймов. Например, отображение значка статуса или уведомления на аватаре.

Фото из дизайн-системы UI Prep

4) Изменение размера с ограничениями

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

Фото из дизайн-системы UI Prep

5) Изменение размера с помощью auto layout

К фреймам можно применить auto layout для создания широкого диапазона (автоматического) изменения размера. Автоматическая компоновка определяет направление увеличения фрейма, расстояние между дочерними (вложенными слоями), внутреннее заполнение и то, как каждый отдельный дочерний элемент будет реагировать на изменения. Это очень мощная функция, которую можно использовать по-разному. Узнайте больше об auto layout и о том, как его использовать здесь. Ниже приводим несколько примеров.

A. Создайте компонент, ширина которого будет увеличиваться/уменьшаться в зависимости от объема контента. Например, кнопка с динамическим текстом.

Фото из дизайн-системы UI Prep

B. Создайте компонент, высота которого будет увеличиваться/уменьшаться в зависимости от объема контента. Например, карточка с динамическим текстом.

Фото из дизайн-системы UI Prep

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

Фото из дизайн-системы UI Prep

Совет: поместите несколько слоев в auto layout фрейм, выделив их все и нажав «Shift» + «A».

6) Разметки и сетки

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

Фото из дизайн-системы UI Prep

7) Создание компонентов

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

Фото из дизайн-системы UI Prep

Фрейм-челлендж

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

Советы, как быстро создавать фреймы в Figma

  • Нарисуйте новый фрейм: нажмите «F» и перетащите указатель мыши на пустую область или на существующие слои, чтобы вложить их в новый фрейм.
  • Поместите выбранные слои во фрейм: выберите один или несколько слоев и нажмите «Command» + «Option» + «G», чтобы разместить слой (слои) в новом кадре.
  • Превратите группу во фрейм: выберите группу, перейдите к раскрывающемуся списку в верхней части панели дизайна и измените «группу» на «фрейм».

Оригинал.

Читайте также: Сообщения, о которых нужно помнить UX-дизайнеру


Читайте нас в Telegram.