Note
이 문서에서는 디자인 작업의 기본 구조를 잡는 데 필수적인 **프레임(Frame)**과 그룹(Group) 기능을 배웁니다.
두 기능 모두 정리된 구조와 효율적인 디자인 작업을 위해 매우 중요합니다.
- 정의: 프레임은 Figma에서 화면 단위 작업 공간입니다. 웹사이트의 한 페이지, 앱의 한 화면 등 모든 UI 디자인의 시작점입니다.
- 프레임 vs 그룹:
| 항목 | 프레임 (Frame) | 그룹 (Group) |
|---|---|---|
| 역할 | 작업 화면 또는 UI의 독립된 구조 | 여러 오브젝트를 묶어서 동시에 조작 |
| 기능 | 레이아웃 그리드, 제약 조건, 콘텐츠 클리핑 지원 | 클리핑, 제약 조건 없음 |
| 반응형 | 가능 (내부 요소 제약 조건 설정 시) | 불가능 (내부 요소는 개별 동작) |
Tip
프레임은 나중에 Auto Layout, 반응형 디자인, 컴포넌트 제작의 기본 단위로 매우 중요합니다.
- 단축키:
F또는 상단 툴바의Frame아이콘 클릭 - 프리셋 프레임 생성:
- 우측 속성 패널에서
Phone,Tablet,Desktop등 다양한 디바이스 선택 가능 - 예:
iPhone 14 Pro,Desktop (1440x1024)등
- 우측 속성 패널에서
- 사용자 정의 프레임:
- 캔버스에 직접 드래그하거나
W와H값 수동 입력
- 캔버스에 직접 드래그하거나
- Clipping Content:
프레임을 벗어나는 오브젝트를 자동으로 잘라 숨김
→ 속성 패널에서Clip content체크 - Layout Grid 설정:
프레임 내부에 격자(Grid)를 추가하여 정렬 기준 제공
→+버튼으로Grid,Column,Row선택 가능 - 스크롤 영역 설정:
프레임을Scrollable영역으로 지정하여 스크롤 시뮬레이션 가능
- 정의: 여러 도형이나 텍스트 등 오브젝트를 묶어 하나처럼 움직이거나 조작할 수 있도록 만든 구조입니다.
- 주요 활용 목적:
| 목적 | 설명 |
|---|---|
| 이동/조작 편의 | 전체 선택 없이도 그룹 단위로 드래그, 이동, 크기 조절 가능 |
| 레이어 정리 | 복잡한 레이어 구조를 그룹으로 정돈 가능 |
| 복제 용이 | 여러 요소를 묶어 하나의 단위로 복제 가능 (UI 컴포넌트 반복 제작 시 유용) |
- 그룹 만들기:
- 여러 오브젝트 선택 후
Ctrl/Cmd + G - 마우스 오른쪽 클릭 >
Group selection
- 여러 오브젝트 선택 후
- 그룹 해제:
- 그룹 선택 후
Ctrl/Cmd + Shift + G - 마우스 오른쪽 클릭 >
Ungroup
- 그룹 선택 후
- 그룹 내부 선택:
Ctrl/Cmd키를 누르고 개별 오브젝트 클릭- 또는 좌측
레이어 패널에서 직접 클릭
- 버튼 디자인 (도형 + 텍스트)을 그룹으로 묶어 한 번에 이동
- 동일 버튼 그룹을 복사하여 나란히 배치
- 그룹 내 텍스트만 선택해 변경하거나, 도형 색상만 따로 수정
| 기능 | 설명 |
|---|---|
| 프레임 | 디자인 작업의 화면 단위. 제약 조건, 스크롤, 반응형 등을 설정할 수 있음 |
| 그룹 | 여러 오브젝트를 하나로 묶어 관리. 이동, 정렬, 복제 시 유용한 기본 기능 |
Note
프레임과 그룹은 자주 혼동되지만, 프레임은 기능을 포함한 구조 단위, 그룹은 편의성을 위한 묶음이라는 점을 기억하세요.
이후 Auto Layout, 컴포넌트, 프로토타입 제작 등에서 두 개념 모두 필수적으로 사용됩니다.