사용 가이드

섹션으로 디자인 정리하기

섹션을 사용하면 디자인 캔버스의 관련 레이어를 정리하고 개발 준비가 완료된 작업을 표시할 수 있습니다. 섹션에는 레이어와 다른 섹션을 넣을 수 있으므로 사용자 흐름, 페이지 영역이나 개발에 전달할 디자인 묶음을 정리하는 데 유용합니다.

섹션 만들기

세 가지 방법으로 섹션을 만들 수 있습니다.

  • 도구 모음에서 만들기: + 메뉴를 열고 섹션 도구를 선택한 뒤 캔버스를 클릭하거나 드래그합니다.
  • 선택한 레이어로 만들기: 레이어를 두 개 이상 선택하고 컨텍스트 메뉴에서 선택 영역으로 새 섹션을 만드는 명령을 선택합니다.
  • 단축키 사용: Windows와 macOS 모두 Shift + S를 누릅니다.

섹션은 내부 레이어의 상위 요소 역할을 합니다. 섹션을 중첩하여 파일의 더 큰 영역을 정리할 수도 있습니다.

섹션 상태 설정하기

섹션에 디자인 중 또는 개발 준비 완료 상태를 표시할 수 있습니다. 레이어 이름에만 의존하지 않고 디자이너와 개발자가 필요한 작업을 찾는 데 도움이 됩니다.

  1. 섹션을 선택합니다.
  2. 섹션 왼쪽 위의 상태 컨트롤에서 상태를 설정합니다.
  3. 나중에 변경하려면 같은 위치의 상태 레이블 메뉴를 엽니다.
  4. 오른쪽 패널에서 개발 전달 보기로 전환하면 왼쪽 패널에서 상태별로 섹션을 필터링할 수 있습니다.

상태는 섹션에 속합니다. 섹션을 프레임으로 바꾸면 해당 상태가 제거됩니다.

섹션 공유하기

섹션 링크를 열면 디자인 파일에서 해당 섹션으로 이동합니다. 파일의 공유 권한이 그대로 적용되므로 섹션 링크를 복사해도 추가 접근 권한이 부여되지는 않습니다.

섹션을 선택한 뒤 다음 중 한 방법으로 링크를 복사합니다.

  • 오른쪽 위의 공유를 열고 링크를 복사합니다.
  • 컨텍스트 메뉴의 복사 및 붙여넣기 옵션에서 링크를 복사합니다.
  • 상태가 있는 섹션은 상태 메뉴에서 링크를 복사합니다.

방향 변경하기

섹션을 선택하고 오른쪽 패널에서 세로 또는 가로 방향을 선택합니다. 방향을 변경해도 내부 개체가 자동으로 재배치되지는 않습니다.

방향을 변경한 뒤 경계를 확인합니다. 섹션 밖으로 벗어난 콘텐츠는 해당 섹션의 레이어 계층에서 빠질 수 있습니다.

레이어 유형 변경하기

섹션을 프레임으로 바꾸려면 섹션을 선택하고 오른쪽 패널의 레이어 유형 드롭다운에서 프레임을 선택합니다. 내부에 다른 섹션이 없는 섹션만 변환할 수 있습니다. 프레임으로 변환하면 섹션 상태가 제거됩니다.

그룹은 섹션으로 변환할 수 있지만 섹션을 그룹으로 직접 변환할 수는 없습니다. 방금 수행한 변환을 되돌리려면 실행 취소를 사용합니다.

모양 조정하기

섹션을 선택한 뒤 오른쪽 패널의 채우기와 선 설정에서 배경색과 테두리를 변경합니다. 내부 개체를 바꾸지 않고 캔버스의 영역을 구분할 수 있습니다.

내보내기 및 개발 전달

내보내기 설정을 사용하여 섹션을 이미지로 내보냅니다. 개발 전달 보기에서는 디자인에 제공되는 에셋과 코드 정보를 확인할 수 있습니다.

섹션의 개발 상태는 전달할 작업을 정리하는 기능입니다. 파일 권한을 대체하거나 디자인을 자동으로 구현하지는 않습니다.