개발자 모드

표시 패널은 개발 과정을 간소화할 수 있도록 디자인 요소를 코드와 속성 값을 함께 보고 복사할 수 있습니다.

편집자는 오른쪽 사이드바에 있는 '디자인'과 '프로토타입' 패널에 접근할 수 있습니다. 뷰어는 표시 패널만 볼 수 있습니다.

속성값 보기

표시 패널을 사용하여 선택한 프레임의 속성값을 보고 복사할 수 있습니다.

1.속성값에는 크기 및 비율제한

2.텍스트 레이어의 내용

3.글꼴, 굵기, 줄 높이를 포함한 텍스트 계층 속성

4.Hex, RGB, CSS, HSL, HSB의 색상 값

5.섀도우와 테두리

CSS 코드 확인

슬라이스 확인 및 내보내기

슬라이스 패널은 현재 페이지에서 내보내도록 설정된 에셋을 모아 보여 줍니다. 디자이너가 개발 전달용으로 지정한 에셋을 다운로드할 때 사용합니다.

1. 개발자 모드에서 디자인 파일을 엽니다.
2. 오른쪽 슬라이스 패널에서 현재 페이지의 에셋을 확인합니다.
3. 모든 슬라이스를 선택하거나 필요한 항목만 선택합니다.
4. 배율과 형식을 확인한 뒤 내보내기를 선택합니다.

예상한 에셋이 보이지 않으면 해당 레이어의 내보내기 설정을 확인합니다. 디자이너는 레이어에 내보내기 설정을 추가하거나 슬라이스 도구로 영역을 지정할 수 있습니다. 사전 설정과 에셋 설정은 슬라이스를 참고합니다.

박스 모델 확인하기

박스 모델 보기에서는 선택한 레이어의 크기, 테두리, 안쪽 여백과 다른 레이어와의 간격을 확인할 수 있습니다. 브라우저 개발자 도구에서 익숙한 레이아웃으로 값을 제공합니다.

1. 개발자 모드에서 레이어를 선택합니다.
2. 오른쪽 패널의 박스 모델 보기를 엽니다.
3. 크기, 테두리, 모서리 정보와 간격을 확인합니다.

디자인을 구현할 때 이 측정값을 개발 전달 패널의 속성 및 참고 코드와 함께 사용합니다.

개발 전달 보기 공유하기

개발자 모드에서 공유를 선택하고 링크를 복사합니다. 링크는 개발 전달 보기로 열리지만 원래 디자인 파일의 접근 권한은 그대로 적용됩니다. 파일 권한이 없는 사람에게 개발자 보기 링크를 보내도 접근 권한이 부여되지는 않습니다.