[Figma] 그룹과 프레임

디자인 작업을 하다 보면 여러 요소를 하나로 묶어 관리할 일이 정말 많습니다.
이때 Figma에서는 대표적으로 두 가지 방식을 사용하죠.

• 그룹(Group, Ctrl + G)
• 프레임(Frame, Ctrl + Alt + G)

두 기능 모두 “여러 요소를 묶는다”는 공통점이 있지만,
실제로는 역할과 쓰임이 매우 다릅니다.
이번 글에서는 이미지 예시를 기반으로 그룹과 프레임의 개념 차이를 한 번에 정리해드릴게요.

 

 

1. Ctrl + G로 레이어를 그룹화한 상태

첫 번째 이미지를 보면, 화면 오른쪽의 컴퓨터·식물·조명 등이
여러 개의 레이어로 분리되어 있는 상태였습니다.

여기서 Ctrl + G를 사용하면 해당 요소들이…

✔ 두번째 이미지처럼 하나의 묶음으로 관리 가능한 **그룹(Group)**이 됩니다.

 

1️⃣ 그룹의 특징

• “레이어를 단순히 묶어서 함께 이동하거나 정렬”하는 목적
• 그룹 자체는 고유한 크기나 속성을 가지지 않음
• 내부 요소들의 크기나 위치는 그대로 유지
• 레이아웃 옵션을 제공하지 않음
  (Auto Layout을 넣을 수도 없음)

즉, 그룹은 말 그대로 여러 레이어를 한 덩어리로 관리하는 가장 기본적인 기능입니다.

 

2️⃣ 예시

• 컴퓨터 화면, 조명, 화분 등이 여러 개의 SVG/도형으로 되어 있었음
• Ctrl + G로 묶자 레이어 패널에서 하나의 ‘Group’ 노드로 정리됨

 

2. Ctrl + Alt + G로 프레임(Frame)으로 감싼 상태

세 번째 이미지를 보면, 같은 요소를 이번엔 Ctrl + Alt + G를 눌러
그룹이 아니라 프레임(Frame) 으로 만들었습니다.

이 지점에서 차이가 확 드러납니다.

 

1️⃣ 프레임의 특징

• 자체적으로 하나의 개별 객체(컨테이너)처럼 동작
• Auto Layout 사용 가능
• Clip Content(요소 잘라내기), Constraints(고정), Layout Grid(격자) 등 레이아웃 기능 제공
• 화면 또는 컴포넌트 구조 안에서 독립적인 레이아웃 컨테이너 역할

프레임은 단순한 묶음 그 이상으로
“요소의 부모 레이아웃 시스템”이라고 생각하면 이해가 쉽습니다.

 

2️⃣  예시

• 프레임으로 묶는 순간 기존 요소들이 프레임 내부 레이어로 들어감
• 사용자가 컴퓨터 화면 위에 UI 창·아이콘 등을 추가하자
  → 프레임이 이를 깔끔하게 포함
• 향후 자동 정렬·패딩·참조 위치 지정 등이 가능해짐

 

3. 그룹과 프레임을 비유로 비교

기능	그룹	프레임
역할	단순히 묶어서 함께 움직임	레이아웃 구조를 잡는 부모 컨테이너
단축키	Ctrl + G	Ctrl + Alt + G
Auto Layout	가능하지 않음	가능
크기/속성	없음	있음(프레임 자체의 Width/Height 존재)
Clit Content	없음	가능
레이아웃 그리드	없음	가능
언제 사용	그냥 묶어서 이동/정렬할 때	UI 구조를 짤 때, 레이아웃을 설계할 때

 

 

4. 실제 작업에서는 어떻게 활용할까

1️⃣ 그룹이 좋은 경우

• 디자인 요소를 그저 한 덩어리로 옮기고 싶을 때
• “정리용 묶음”이 필요할 때
• 텍스트 아래 반투명 박스 + 아이콘처럼 레이아웃이 필요 없는 묶음

2️⃣ 프레임이 좋은 경우

• 구성요소의 배치를 체계적으로 관리하고 싶을 때
• 버튼·카드·모달처럼 UI 컴포넌트 구조 작업
• Auto Layout을 활용하는 경우
• 반응형 레이아웃·고정 위치를 설정할 필요가 있을 때

 

 

정리하면

 

이번 글에서는 세 장의 이미지를 기반으로
Ctrl + G(그룹) 와 Ctrl + Alt + G(프레임) 의 실제 차이를 살펴봤습니다.

• 그룹은 “묶어서 함께 움직이는 단순한 그룹”
• 프레임은 “레이아웃을 갖춘 독립적인 컨테이너”

둘의 개념을 정확히 알고 사용하면 디자인 속도도 빨라지고,
UI 구조도 훨씬 깔끔해집니다.