Фреймы против групп

Фрейм — главный контейнер Figma; именно из фреймов собираются экраны, карточки и кнопки.

«Фрейм или группа?» — вопрос, на котором спотыкаются почти все новички. Запомните правило раз и навсегда: для интерфейса почти всегда фрейм.

На первый взгляд фреймы и группы похожи — оба объединяют объекты. Но разница принципиальная, и от неё зависит, заработает ли потом авто-лейаут, прототипы и адаптивность.

Что такое фрейм

Фрейм (Frame) — это контейнер с собственными границами, размером и поведением. Он умеет:

• обрезать содержимое по краям (clip content);
• иметь свой фон, скругление, тень;
• включать авто-лейаут;
• быть экраном устройства (есть готовые пресеты iPhone, iPad, Desktop).

Группа (Group) — это просто «связка» объектов для удобного перемещения. У неё нет собственного размера и поведения, она лишь оборачивает то, что внутри.

Фрейм vs Группа

  ФРЕЙМ                  ГРУППА
  +-------------+        . . . . . . .
  | свой фон    |        . объект 1   .
  | clip content|        .   объект 2 .
  | авто-лейаут |        . . . . . . .
  +-------------+        (просто рамка-связка)

Создаём экран из пресета

1. Нажмите клавишу F (Frame) или кнопку фрейма в тулбаре.
2. На правой панели появится список пресетов: iPhone 16, Desktop, Android и другие.
3. Кликните, например, iPhone 16 — на холсте появится фрейм нужного размера.
4. Теперь всё, что вы нарисуете внутри, станет содержимым этого экрана.

Фрейм или группа: как выбрать

Clip content и фон фрейма

Одно из ключевых свойств фрейма — Clip content (обрезка содержимого). Найдите эту галочку в свойствах фрейма. Когда она включена, всё, что выходит за границы фрейма, скрывается — как overflow: hidden в CSS. Это незаменимо для аватаров (круглый фрейм обрезает квадратное фото), каруселей и любых масок. У группы такого свойства нет в принципе.

Фрейм также может иметь собственную заливку (Fill) — фон. Поэтому фрейм-экран сразу выглядит как лист с цветом, а фрейм-кнопка имеет цвет фона. Группа же прозрачна и фона иметь не может: она показывает ровно то, что внутри.

Когда всё-таки группа

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

Горячие клавиши

Запомните и обратную операцию: если вы случайно сделали группу там, где нужен фрейм, не переделывайте с нуля — выделите группу и нажмите F, и Figma конвертирует её во фрейм, сохранив всё содержимое. Точно так же лишний фрейм можно разгруппировать, если он не несёт поведения. Гибкость конвертации означает, что неверный выбор контейнера легко исправить, но привычка сразу строить из фреймов избавит вас от этой возни.

Частые ошибки

• Делают экран группой. Группа не обрежет содержимое и не примет авто-лейаут. Экран — всегда фрейм.
• Вкладывают фреймы без нужды. Не плодите контейнеры. Фрейм нужен там, где есть смысл (компонент, экран, секция).
• Забывают про clip content. Если содержимое вылезает за границы фрейма — включите обрезку в свойствах фрейма.

Совет профи: фрейм по умолчанию

Выработайте простую установку: «структурный элемент — всегда фрейм». Экран, секция, карточка, кнопка, поле ввода, пункт меню — всё это фреймы, потому что им понадобится фон, обрезка, авто-лейаут или роль компонента. Группа остаётся редким исключением для разовой связки декора. Такой подход избавит от мучительных переделок: когда вы решите включить авто-лейаут или сделать из элемента компонент, фрейм уже готов, а группу пришлось бы конвертировать. Кстати, конвертация работает в обе стороны: выделите группу и нажмите F — она станет фреймом, сохранив содержимое. Но проще сразу строить из фреймов и не думать об этом.

Чек-лист

• Понимаю, что фрейм — это контейнер с поведением, а группа — просто связка.
• Создал экран из пресета (например iPhone).
• Знаю хоткеи F (фрейм) и Cmd/Ctrl+G (группа).
• Выбираю фрейм для всего, что станет компонентом или экраном.

Итоги. Фрейм — фундаментальный контейнер Figma: он обрезает содержимое, держит фон и принимает авто-лейаут. Группа лишь временно связывает объекты. Привыкайте мыслить фреймами. Дальше — управление слоями.