프로토파이로 디자인 화면 불러오기

앞서 프로토타입 제작을 “디자인 된 화면을 불러와서, 모션을 입힌다.”라고 요약한 바 있습니다.
즉, 프로토타입 제작을 위해서는 이미 만들어 둔 디자인 화면을 불러와야 합니다.

Mac을 사용중이라면 Protopie, Principle, Flinto, Framer 등을 모두 사용할 수 있죠.

하지만 윈도우에서는 Adobe XD (UI 디자인), Zeplin (디자인 핸드오프), Protopie (인터랙션 프로토타입)
3개 조합을 잘 생각해서 디자인 툴을 결정해야 합니다.

아직 프로토파이는 아직 PSD 파일을 직접 불러오는 플러그인이 없습니다.

따라서 PSD로만 작업하고자 하는 디자이너라면, 이미지 각각을 리소스로 제작하여 Import 하는 과정을 거쳐야 합니다.

윈도우 사용자라면 이 방법이 가장 편리합니다. 플러그인도 따로 필요하지 않고, 과정도 매우 간단하죠.

프로토파이 3.7버전 업데이트(2018년) 이후, XD CC에서 작업물 가져오기는 맥과 윈도우를 가리지 않고 잘 작동하게 됐습니다.

프로토파이 Import 메뉴에서, Adobe XD를 선택하면 됩니다. Re-Import를 할 경우,
가져올 레이어를 선택하거나 삭제된 레이어를 Import 시 제거하는 등, 상세설정이 가능합니다.

Import 방법 | Protopie

Sketch에서 디자인을 가져오는 방법은, Adobe XD에서 가져올 때와 비슷합니다.

Artboard	스케치 파일 내에서 Import 할 아트보드를 선택한다.
Import Size	레이어의 배율을 설정한다. 스케치에서 작업한 아트보드 사이즈에 따라서 바뀔 수 있다.

프로토파이는 스케치 작업물을 불러올 때 특히 직접적인 연동이 가능합니다.
다양한 Import 옵션을 제공하며, 작업방식에 따라 다르게 적용할 수 있습니다.

다음 포스팅에서는, 디자인에 모션을 입혀,
간단한 프로토타입을 제작해보겠습니다