책 제목 : 실전 피그마UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서 / 김범용 (스무) 지음 읽은 부분 : PART 7. 피그마 활용 팁 익히기 인상 깊게 본 내용 : 01) 캔버스 영역을 구분하는 섹션(Section) 이해하기< PART 7. 피그마 활용 팁 익히기 >
캔버스 영역을 구분하는 섹션(Section) 이해하기
•
섹션 : 피그마에서 사용할 수 있는 최상위 그룹 요소
•
프레임을 섹션으로 그룹화하면 프레임 라벨과 프로토타입 인터랙션이 유지되어 유저 플로우에 따라 캔버스 영역을 구분할 수 있다.
•
디자인 완료된 화면을 개발팀에 전달할 때 'Mark ready for dev' 기능을 사용하면 개발자들이 확인해야하는 프레임을 시각적으로 쉽게 구분할 수 있다.
•
1) 섹션 생성하기
•
툴 바에서 섹션 도구를 선택하거나 Shift+S를 누른 다음 원하는 곳에 드래그하면 섹션을 생성할 수 있다.
프레임 위에 섹션을 그리면 섹션이 프레임을 자동으로 감싼다.
•
2) 유저 플로우별로 캔버스 영역 구분하기
섹션을 통해 온보딩이나 회원가입, 결제 프로세스 등 유저 플로우별로 프레임을 묶고 작업 영역을 구분해서 캔버스를 정리할 수 있다.
3) 개발 준비 완료 상태 표시하기
•
디자인이 완료된 프레임을 섹션 안으로 이동하고, 섹션 라벨 오른쪽 'Mark as ready for dev' 아이콘을 클릭하거나 툴 바 가운데의 아이콘을 클릭하여 디자인이 완료된 섹션을 개발 준비 완료 상태로 설정할 수 있다.
•
개발 준비 완료 상태는 초록색 라벨로 나타난다. 라벨을 클릭해 Dev Mode에서 해당 섹션을 확인하거나 'Remove ready status'를 선택해 다시 이전 상태로 되돌릴 수 있다.
4) 컴포넌트 에셋 그룹화하기
•
섹션 내부에서 프레임 라벨이 표기되는 것을 활용해 아이콘, 메인 컴포넌트들을 그룹화하는 용도로 활용하기도 한다.
•
인스턴트 컴포넌트를 스왑하는 경우 섹션 이름을 통해 컴포넌트들이 그룹화된다.
5) 섹션 삭제하기
섹션을 선택하고 그룹 해제(Ctrl+Alt+G) 하거나 Ctrl+Backspace를 누르면 섹션 내용을 유지한 채 섹션을 삭제할 수 있다.
코멘트섹션 활용에 대해서 어렴풋하게 알고 있던 부분을 책을 통해서 자세히 배울 수 있었다. 유저 플로우별로 모아서 섹션에 정리할 수 있고, 개발 준비 완료 상태 설정은 섹션을 사용해서 적용한다는 것을 알게 되었다.
어떻게 적용할 수 있을까섹션으로 스타일 가이드에 있는 아이콘, 컴포넌트를 다시 정리할 때 활용하려고 한다.
* 출처 : 실전 피그마