핸드오프 패널

1. 속성값 확인

개발자는 핸드오프 패널에서 선택한 레이어의 속성값을 확인하고 복사할 수 있습니다. 객체 크기, 레이아웃 제약, 그림자와 테두리뿐 아니라 텍스트 내용, 글꼴, 글자 크기, 줄 높이 등의 정보도 확인할 수 있습니다.

채우기 영역에서는 Hex, RGB, CSS, HSL, HSB 형식의 색상값을 확인합니다.

2. 간격 측정

개발자 모드 또는 핸드오프 패널에서 레이어 하나를 선택한 뒤 다른 객체에 마우스를 올리면 두 요소 사이의 거리를 확인할 수 있습니다.

3. 참조 코드 확인

Pixso는 디자인 속성에 해당하는 참조 코드를 생성합니다. 핸드오프 패널의 코드 영역으로 내려가 내용을 확인하세요. 드롭다운에서 CSS, iOS, Android 형식으로 전환할 수 있습니다.

4. 개발 플랫폼 선택

개발 환경에 맞는 단위를 선택할 수 있습니다. iOS, Android, Web을 지원합니다.

5. 사용자 지정 배율 변환

속성값을 다른 단위나 배율로 확인해야 한다면 개발 요구 사항에 맞게 변환할 수 있습니다.

예를 들어 750px 너비의 디자인을 375dp 기준으로 확인하려면 배율을 0.5로, 단위를 px에서 dp로 설정합니다. 확인하면 표시되는 속성값에 지정한 배율이 적용됩니다.

6. 지정한 너비로 변환

목표 너비를 직접 입력할 수도 있습니다. 예를 들어 750px 디자인을 너비 375 기준으로 확인하려면 배율 0.5를 계산해 입력하는 대신 프레임을 선택하고 너비를 375로 지정합니다.

Pixso는 선택한 프레임과 입력값을 바탕으로 배율을 계산하고 다른 레이어의 표시값에도 적용합니다.

참고: 이 설정은 디자인 원본의 크기를 변경하지 않습니다.

7. 선택 방식 설정

작은 내부 요소가 계속 선택되는 것을 피하려면 컴포넌트나 슬라이스 내부 레이어의 선택을 제한할 수 있습니다.

보기 모드나 개발자 모드에서 오른쪽 위 아이콘으로 설정합니다.

참고: 기본 설정에서는 내부의 하위 요소도 선택할 수 있습니다.

필요에 따라 컴포넌트 / 슬라이스 내부 레이어 선택 허용을 끄세요.

이 옵션을 끄면 캔버스에서 슬라이스 전체가 선택되며 내부 레이어는 선택되지 않습니다.