Автор: Томас Лоури, адвокат Фигма
Вы не знаете, в каких случаях использовать фрейм, а в каких — группу в Figma? Оба варианта являются контейнерами для объектов, но имеют свои уникальные свойства и варианты использования. Не всегда очевидно, чем они отличаются друг от друга, поэтому, чтобы помочь научиться вам отличать их, прилагаем эту статью.
Группы
Как и другие инструменты проектирования, группы в Figma позволяют объединить несколько элементов в один слой. Границы группы определяются ее элементами, поэтому изменение размера или перемещение этих элементов приведет к автоматической корректировке границ группы. Вы можете создать группу, выбрав объекты и нажав: ⌘ + G (Mac) или Ctrl + G (Win). границы групп автоматически корректируются при изменении размера или перемещении дочерних элементов
Вы можете разгруппировать элементы, нажав: ⌘ + Shift + G (Mac) или Ctrl + Shift + G (Win).
Группы действительно полезны, когда вы хотите объединить похожие элементы вместе и управлять меньшим количеством слоев в вашем дизайне. Например, у вас может быть выбор логотипов компании, которые должны оставаться вместе. Группировка — отличный способ объединить их в один более управляемый слой — щелчок по любому из элементов в вашей группе выделит все элементы и позволит вам перемещать или манипулировать ими как одним объектом на холсте. Если вам нужно выбрать конкретный элемент в группе, вы можете сделать это двойным щелчком мыши.
Вы также можете использовать такие функции, как умное выравнивание внутри группы, чтобы регулировать расстояние между элементами. В приведенном ниже примере можно увидеть, как границы группы автоматически настраиваются в соответствии с общими размерами элементов при изменении интервала.
При изменении размера группы, ее элементы будут масштабироваться так же, как и векторные изображения. Однако эффекты, штрихи и размеры типов масштабироваться не будут. Если вы хотите масштабировать и эти свойства, используйте инструмент масштаб (K). Если вы хотите применить ограничения для размеров элементов, рассмотрите возможность использования фрейма. Ограничения, применяемые к элементам, всегда будут относиться к ближайшему фрейму, а не к границам группы. Подробнее об этом в разделе о фреймах!
Фрейм
На самом базовом уровне то, что вы можете считать «монтажной панелью» в других инструментах дизайна, на самом деле является тем, что мы называем фреймом в Figma. Мы рассматриваем фреймы как основополагающий элемент проектов, который может выступать в качестве контейнера верхнего уровня (например, видового экрана устройства) и/или представлять области или компоненты в вашем дизайне. Фреймы и возможность их вложения являются неотъемлемой частью создания динамических макетов в Figma.
Прежде чем мы углубимся в поведение и свойства фреймов, давайте быстро рассмотрим три различных способа создания фрейма.
- Выберите инструмент фрейм (F) и выберите заданный размер устройства на панели Свойства справа. Это поместит новую рамку на ваш холст, установленный в точные размеры любого устройства, которое вы выбрали.
- Выбрав инструмент фрейм, щелкните и перетащите его, чтобы создать новую рамку нужного размера.
- Подобно группировке, вы можете выбрать существующие элементы на холсте и заключить их в фрейм, нажав: ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).
Если вы хотите сделать наоборот и удалить контейнер фрейма, сочетание клавиш совпадает с un-grouping: ⌘ + Shift + G (Mac) или Ctrl + Shift + G (Win). Теперь давайте покопаемся в их уникальных особенностях и использовании.
Размер фреймов
Размеры фреймов устанавливаются независимо от их элементов. Если вы перемещаете или масштабируете элементы внутри фрейма, его границы не будут автоматически корректироваться. Если вы хотите, чтобы размеры рамки изменились в соответствии с содержимым, вы можете нажать кнопку «Изменить фрейм по размеру» на панели свойств справа.
Также важно отметить, что компоненты в Figma ведут себя точно так же, как и фреймы. Вы можете преобразовать фрейм в компонент, чтобы повторно использовать его в других местах, и если отсоедините существующий компонент, то увидите, что он преобразуется во фрейм.
Изменение размера с ограничениями
Фреймы и группы отличаются по своему поведению при изменении размера. Как уже упоминалось, группы будут изменяться по мере масштабирования элементов. Границы фрейма будут изменяться независимо от его элементов; однако можно определить ограничения, которые влияют на изменение размера этих дочерних элементов относительно их родительского фрейма. По умолчанию эти ограничения имеют значения «сверху» и «слева».
Настройка пользовательских ограничений может быть очень полезна, если вы хотите, чтобы элементы поддерживали размер и положение относительно фрейма, что обычно требуется при создании отзывчивых компонентов. В приведенном ниже примере показаны различия между группами, фреймами и фреймами с определенными ограничениями.
Быстрый совет: если вы хотите игнорировать ограничения при изменении размера кадра, удерживайте ⌘ (Mac) или Ctrl (Win) при перетаскивании кадра.
Переполнение содержимого
Поскольку границы фрейма могут регулироваться независимо от его элементов, функция «содержимое клипа» (доступная в правой панели свойств) может использоваться в сочетании с этим различными способами. Вот несколько общих примеров:
- Скрытие содержимого за пределами фрейма: при включении « clip content » любая часть элемента, выходящая за пределы кадра, будет скрыта.
- Отображение содержимого вне рамок: отключив «clip content», вы можете разрешить элементам, которые выходят за рамки ваших кадров, оставаться видимыми. Например, если требуется создать фрейм, содержащий кавычки с висячими знаками препинания, можно изменить размер кадра таким образом, чтобы его границы были выровнены по левому краю текстового поля, оставив кавычки за пределами границ кадра. В таких ситуациях выравнивание объектов в дизайне может быть намного проще.
- Показать дополнительное содержимое: установив правильные ограничения и включив «clip content», вы можете создавать фреймы и компоненты, которые показывают больше содержимого при их расширении. Например, у вас есть выпадающее меню, которое используется в нескольких местах с различным количеством опций. Это дает вам простой способ изменить размер фрейма, чтобы показать больше пунктов меню.
- Переполнение содержимого в прототипах: элементы, которые выходят за пределы рамки, могут быть настроены на прокрутку внутри прототипа. Например, вы вкладываете рамку в свой дизайн для размещения прокрутки карусели. Поведение переполнения можно настроить так, чтобы его можно было прокручивать при просмотре в режиме прототипа.
Сетки
Сетки компоновки уникальны для фреймов и могут быть применены к любому фрейму или компоненту в вашем дизайне. Это очень полезно, потому что иногда вы хотите иметь области вашего дизайна, которые имеют свои собственные независимые сетки. Ограничения на изменение размера в Figma также могут работать в сочетании с сетками макета. В приведенном ниже примере видно, что на фрейме верхнего уровня имеется сетка из 2 столбцов и вложенный вторичный фрейм для панели вкладок, которая имеет собственную сетку из 3 столбцов. При настройке ограничений во время изменений размера фрейма верхнего уровня происходит изменение размера дочерних элементов относительно сетки макета.
Резюме
Группы и фреймы можно использовать различными способами (вместе или по отдельности) для достижения различных моделей поведения.
Используйте группу, если:
— Вы хотите объединить несколько объектов в один управляемый слой
— Вы хотите сгруппировать элементы вместе, которые будут поддерживать фиксированную связь при масштабировании (например, логотип или символ, состоящий из нескольких фигур)
— Вы хотите, чтобы границы группы автоматически адаптировались к дочерним объектам при их манипулировании
Используйте фрейм, если:
— Вы хотите управлять размером кадра независимо от его содержимого
— Вы хотите определить поведение изменения размера дочерних элементов
— Вы хотите, чтобы объекты были обрезаны по границам фрейма или находились за его пределами
— Требуется вложенное поведение прокрутки в прототипе (например, горизонтальная карусель или карта, которую можно перемещать по вертикали и горизонтали)
— Вы хотите использовать сетку макета в нем.
Перевод статьи с сайта Figma.com
