[ProtoPie] Improt : 디자인 파일 프로토파이에 불러오기

 

UXUI 디자인 작업물을 프로토파이로 불러오기 위해서는 디자인 툴에 프로토파이 플러그인을 설치하는 과정이 필요하다.

플러그인을 설치하면, 디자인 파일을 프로토파이에서 열어보록 하자. 

 

<플러그인 설치>

1. 프로토파이 좌측 상단에 있는 Import 및디자인 툴을 클릭하면 해당 사이트가 열린다.

 

프로토파이 기본 화면

Import하는 또 다른 방법

 

Adobe XD 클릭 시 열리는 웹사이트 화면

 

 

2. 피그마, XD 등 해당 사이트 및 프로그램에 접속하여 프로토파이 플러그인을 설치한다.

 

Figma 플러그인 화면 (위 아이콘 또는 상단 Plugins 메뉴 클릭)

 

Adobe Cloud 플러그인 화면 (프로토파이 설치 완료 모습)

완료! 이제 손쉽게 디자인 파일을 불러들일 수 있다.

 

 

<디자인 작업물 가져오기>

 ** 사전 준비 및 유의 사항

- UXUI 디자인 툴(작업 파일)과 ProtoPie 툴 모두 열려 있어야 한다. 
- 디자인 파일 간에 디바이스 화면 사이즈가 동일해야 한다. (불러와서 수정 가능)

 

1. Figma : Export 창(우측 화면)을 띄우고 프로토파이로 가져갈 영역을 선택하여 Export하면 프로토파이 화면에 나타난다. 

 

 

 

2. Adobe XD : 작업 파일 화면에서 프로토파이로 가져갈 영역을 선택하여 Export하면 프로토파이 화면에 나타난다. 

 

XD에서 프로토파이로 가져갈 영역 선택 후 Exprot

 

프로토파이에 나타난 작업물