Frame или Group в Figma: разница и когда что использовать
Внешне кадр и группа выглядят одинаково: и то и другое объединяет слои и позволяет двигать их вместе. Разница проявляется при изменении размера, при переполнении содержимого и при передаче макета в прототип. Понимание этой разницы экономит много времени на правках.
Как создать
Group — Command + G на Mac или Control + G на Windows. Снимается через Ungroup.
Frame — клавиша F и перетаскивание области. Горячие клавиши: Command + Option + G или Control + Alt + G.
Внутри кадра можно создавать другие кадры, вложенность не ограничена.
Размер
У группы нет собственного размера. Её границы — это общая рамка всех дочерних слоёв.
Сдвинули слой — группа пересчиталась.
У кадра размер задаётся вручную и не зависит от содержимого. Слои могут выходить за границы, размер от этого не меняется.
Clip content
У кадра есть свойство Clip content: всё, что выходит за границы, скрывается.
Это основной способ сделать обрезку без маски.
У группы такого свойства нет в принципе. Всё, что выходит за её границы, видно.
Масштабирование
При изменении размера группы дочерние слои тянутся пропорционально, как векторный рисунок.
Обводки, эффекты и размер шрифта при этом не масштабируются.
Если нужно масштабировать и их, используют инструмент Scale (клавиша K).
Кадр и его содержимое
При изменении размера кадра дочерние слои остаются на месте, если для них не заданы constraints.
Constraints определяют, как слой ведёт себя относительно краёв кадра: прилипает к левому, к правому, растягивается.
О них — в статье о constraints и ресайзе.
Constraints и группы
Ключевая деталь: constraints нельзя применить к слоям внутри группы. Точнее, они работают, но отсчитываются от ближайшего родительского кадра, а не от границ группы.
Figma прямо указывает: к группам constraints не применяются, потому что группа не считается слоем с собственными границами.
Собственные свойства
Кадр может иметь заливку, обводку, эффекты, радиус скругления и обрезку содержимого.
Группа не имеет фона: чтобы добавить подложку, нужен отдельный прямоугольник внутри.
Именно поэтому кнопку проще собрать из кадра с заливкой и радиуса, чем из группы с прямоугольником поверх.
Auto layout
Auto layout работает только с кадрами. Группа при попытке применить его превращается в кадр.
О auto layout — в статье об auto layout.
Layout grid
Сетки колонок и строк применяются к кадрам. Это основа для вёрстки по сетке.
У группы такой возможности нет.
Прототипирование
Связи между экранами строятся между кадрами: только кадр может быть целью перехода.
Скролл и overflow тоже задаются на кадре.
Поэтому экраны делают кадрами, а не группами.
Компоненты
Компонент рекомендуется строить на кадре: так доступны свойства, auto layout и вложенность.
Группа тоже может стать компонентом, но получит ограничения группы.
Секции
Секция — третий тип контейнера, для организации холста. Она не обрезает содержимое и не является экраном.
О секциях и страницах — в статье о структуре файла.
Практика: карточка
Соберите карточку кадром: заливка, радиус, тень.
Внутри — текстовые слои с constraints по левому краю и кнопка, прижатая к правому.
При растяжении карточка останется целой.
Практика: группа для переноса
Если нужно просто перенести набор слоёв из одного места в другое, группа подойдёт лучше.
Она не добавит лишних свойств и не изменит поведение слоёв при ресайзе.
Практика: обрезка изображения
Поместите картинку в кадр и включите Clip content.
Это самый быстрый способ обрезать фото по границам, не используя маску.
Как превратить группу в кадр
Выделите группу и нажмите Command + Option + G (Control + Alt + G).
Обратное преобразование: правый клик по кадру → Ungroup или Shift + Command + G.
При обратном превращении теряются свойства кадра: заливка, обрезка, auto layout.
Где ломается
Содержимое не обрезается. Контейнер — группа, а не кадр.
При ресайзе всё съезжает. У слоёв нет constraints или контейнер — группа.
Не работает Auto layout. Нельзя применить к группе, нужен кадр.
Не получается прототип. Целевой экран — не кадр.
Пропала заливка после Ungroup. Заливка принадлежала кадру, а не слоям.
Слой не прилипает к краю. Constraints заданы относительно другого кадра.
Почему группы «ломают» макет
Группа удобна, пока макет не начали менять. Как только появляется задача «сделай ширину больше» или «покажи, как будет на другом экране», выясняется, что группа не умеет ни того ни другого: она растянет содержимое целиком, включая отступы и иконки. Кадр ведёт себя предсказуемо, потому что размер отделён от содержимого, а поведение слоёв задаётся constraints. Отсюда практическое правило: группа — временный инструмент для переноса и выравнивания, кадр — постоянная структура макета.
Переход между типами без потерь
Превращение группы в кадр почти всегда безопасно: размер подхватывается по границам содержимого. Обратный переход опаснее, потому что кадр теряет свои свойства — заливку, обрезку, auto layout. Перед тем как разгруппировать кадр, проверьте, не используется ли он как экран прототипа или как компонент: после преобразования связи и свойства придётся восстанавливать вручную. Если нужно просто временно снять группировку, используйте Ctrl+клик или команду выбора внутри, не разрушая структуру.
Что выбрать в типичных задачах
Экран приложения, карточка, кнопка, модальное окно, компонент — кадр. Набор слоёв, который нужно перенести или выровнять и который не будет жить самостоятельно, — группа. Обложка для соцсетей — кадр, потому что нужен точный размер и обрезка. Иконка, собранная из нескольких векторных слоёв, — тоже кадр, если она станет компонентом. Ошибка, которая встречается чаще всего: собрать экран группой, а потом искать, почему не работает скролл в прототипе.
FAQ
Чем кадр отличается от группы?
Кадр имеет собственный размер и свойства, группа — только границы содержимого.
Что такое Clip content?
Свойство кадра, скрывающее всё за его границами.
Можно ли задать constraints в группе?
Нет, они отсчитываются от ближайшего родительского кадра.
Как превратить группу в кадр?
Command + Option + G или Control + Alt + G.
Почему прототип не связывается?
Целью перехода может быть только кадр.