개발 모드 & 핸드오프

피그마 프레임/섹션 차이점 및 활용

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

질문사항

피그마에서 프레임과 섹션의 주요 차이점은 무엇이며, 섹션을 주로 어떤 경우에 사용하나요?

답변

피그마의 프레임(Frame)과 섹션(Section)은 모두 요소를 그룹화하는 컨테이너 역할을 하지만, 몇 가지 중요한 차이점과 사용 목적이 있습니다.

프레임 (Frame):

UI 요소, 페이지, 화면 등 디자인의 기본 단위를 구성하는 데 사용됩니다.

Auto Layout, Constraints, Clip Content 등 다양한 디자인 속성을 가질 수 있습니다.

프로토타입의 화면으로 직접 연결될 수 있습니다.

섹션 (Section):

주로 디자인 파일 내에서 관련된 프레임이나 요소를 논리적으로 그룹화하고 정리하는 데 사용됩니다.

프레임처럼 Auto Layout이나 Constraints를 직접 가질 수는 없지만, 섹션 내의 프레임들은 이러한 속성을 가질 수 있습니다.

주요 사용 목적 (특히 핸드오프):

개발자 핸드오프 (Dev Mode): 섹션은 개발자에게 특정 기능이나 페이지 그룹을 한눈에 보여주는 데 매우 유용합니다. 섹션 자체에 'Ready for Dev' 상태를 지정하여, 해당 섹션 내의 모든 디자인이 개발 준비가 완료되었음을 표시할 수 있습니다. 이는 프레임 하나하나에 상태를 지정하는 것보다 훨씬 효율적이고 깔끔한 핸드오프 워크플로우를 제공합니다.

파일 정리 및 탐색: 복잡한 디자인 파일에서 여러 페이지나 플로우를 섹션으로 묶어두면, 디자이너와 협업자가 파일을 더 쉽게 이해하고 탐색할 수 있습니다.

프레젠테이션: 섹션을 사용하여 디자인의 특정 부분을 강조하거나, 특정 흐름을 보여주는 데 활용할 수 있습니다.

결론적으로, 프레임은 디자인 요소의 '내용'을 구성하는 데 중점을 두는 반면, 섹션은 디자인 파일의 '구조'와 '워크플로우'를 관리하는 데 더 중점을 둡니다.