레이아웃 & 그리드

Figma 섹션과 프레임 차이 및 활용

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma의 '섹션(Section)' 기능은 '프레임(Frame)'과 어떻게 다른가요? 섹션은 언제 사용하는 것이 적절한가요?

답변

Figma의 '섹션(Section)'은 '프레임(Frame)'과 유사하게 요소를 그룹화하고 정리하는 데 사용되지만, 몇 가지 중요한 차이점이 있습니다.

주요 차이점:

가시성 및 조직화: 섹션은 프레임과 달리 캔버스에서 항상 제목이 표시됩니다. 이는 여러 프레임이나 작업 단위를 그룹화하고 각 그룹에 명확한 레이블을 지정하여 작업 흐름을 시각적으로 정리하는 데 매우 유용합니다. 예를 들어, '로그인 플로우', '마이페이지 기능', '개발 준비 완료' 등과 같이 큰 단위의 작업을 구분할 때 좋습니다.

개발 모드(Dev Mode) 연동: 섹션은 개발 모드에서 개발자가 특정 기능이나 페이지 그룹을 쉽게 탐색하고 관련 코드를 확인할 수 있도록 돕는 중요한 역할을 합니다. 섹션별로 개발 상태를 표시하거나 특정 기능 영역을 명확히 구분할 수 있습니다.

이동 및 관리: 섹션은 그 안에 포함된 모든 프레임과 요소를 한 번에 이동하거나 관리하기 쉽게 합니다.

섹션 사용이 적절한 경우:

큰 단위의 작업 정리: 여러 화면(프레임)으로 구성된 특정 기능 플로우(예: 회원가입, 결제)를 묶을 때.

개발 핸드오프: 개발자에게 특정 기능 영역이나 작업 단위를 명확하게 전달하고 싶을 때.

작업 상태 관리: '진행 중', '리뷰 대기', '개발 완료' 등 작업의 상태를 섹션으로 구분하여 시각적으로 관리할 때.

캔버스 정리: 복잡한 캔버스에서 관련 없는 작업 그룹을 접어두어 시야를 깔끔하게 유지할 때.