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

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

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

Очень много текста

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P.s. Я не являюсь автором этой статьи. Я всего лишь делюсь полезной информацией с участниками форума!