UXPin을 배울 때 약간의 지식 또는 요령만 있다면 디자인 프로세스가 대폭 빨라집니다. 보다 빠르고 스마트하게 작업하기 위해서도, 우리의 디자인에 관한 힌트나 요령을 참고해 주시면 감사하겠습니다. 이 내용들을 일상적인 워크플로우에 적용한다면, 몇 초에서 몇 분 혹은 몇 시간 정도의 작업시간을 절약할 수 있습니다.

캔버스 패닝

스페이스바를 누른 상태에서 드래그하면 캔버스를 이동할 수 있습니다. 이 기능은 디자인을 가까이서 볼 때 캔버스를 빠르게 이동하는 데 유용합니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/a8a958b5-e5a5-4b1e-80d3-2fc1006c81fa_pan-canvas.mp4

다크모드로 전환

UXPin에는 다크모드가 탑재되어 있습니다. 다크모드로 전환하려면 에디터의 오른쪽 하단에 있는 View Settings (표시 설정)을 열고 Light, Dark, Auto의 세 가지 옵션 중에서 선택할 수 있습니다. Auto를 선택하면 UXPin은 macOS 설정을 따릅니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/5e8fa961-5328-441a-8543-1efedd4d5521_Darkmode_800x600_24_Title.mp4

클릭 (Deep Click)

그룹에서는 종종 중첩된 요소를 선택하기 위해 여러 번 클릭해야 하지만 반드시 그런 것은 아닙니다. 이를 위해서는 선택하려는 요소를 Command 버튼을 누른 상태에서 클릭하면 됩니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/ed2ef80a-05bd-47c1-8ac1-0782dabd3b07_deep-light-T.mp4

불투명도 변경

키보드의 숫자를 사용하여 선택한 요소의 불투명도(Opacity)를 빠르게 변경할 수 있습니다. 2를 누르면 20%, 3을 누르면 30%....... 숫자 0을 누르면 100%가 됩니다. 하지만 이미 100%인 경우 숫자 0을 다시 누르면 0%가 됩니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/b2f026f8-9b69-4e92-bd70-65c879ca7612_06-opacity-title.mp4

화살표 키로 리사이즈

화살표 키를 사용하여 요소를 1픽셀마다 이동할 수 있다는 것을 알고 있을지도 모릅니다. 그러나 Command를 누른 상태에서 화살표 키를 사용하여 크기를 조정할 수 있다는 것을 알고 계십니까? 또, 추가로 Shift도 누르면서라면, 10px분의 사이즈 변경이 가능합니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/c175fb74-8cd6-4d1c-86c9-accfc8deada6_11_resize-with-keys.mp4

잘라내기(Crop)와 스크롤

UXPin은 프로토타입의 일부를 수직 또는 수평으로 스크롤할 수 있는 간단한 방법을 제공합니다. 먼저 콘텐츠를 그룹화하고 속성 패널에서 Crop selected content (선택한 콘텐츠 자르기)를 선택하고 Vertical (수직) 또는 Horizontal (수평) 스크롤 혹은 둘다 체크합니다.