Adobe XD 디자인 Zeplin 연동 방법

프로젝트 진행 중 디자이너의 공백으로 갑작스럽게 XD를 공부해서 작업을 하게 되었다🤣

 

Adobe XD로 디자인 작업을 한 후 Zeplin 플러그인을 설치해 내보내는 방법을 정리해보았습니다.

 

1. Zeplin Site 계정 생성

https://zeplin.io/

Zeplin

제플린 사이트에 들어가 계정을 생성한 후 설치를 해준다.

 

2. Zeplin project 생성

설치한 제플린에 들어가 우측 상단의 'Create Project'를 선택해서 들어가 프로젝트 타입을 선택한다.

나는 웹 개발을 위한 디자인 제작을 목표로해 Web을 선택했다.

 

프로젝트가 생성된 후 Adobe에서 제플린으로 파일을 내보내는 방법이 나온다.

1) Adobe XD > 내보내기(export) > zeplin

2) ctrl + alt + E

 

3. Adobe XD에서 Zeplin 플러그인 설치

왼쪽 하단의 플러그인에 들어가 플러그인 탐색에서 "Zeplin for XD"를 찾아 설치한다.

설치 후 플러그인 툴에서 Zeplin for XD > open plugin 을 선택해준다.

 

4. Adobe XD에서 Zeplin으로 파일 내보내기

내보낼 파일을 선택 후 Export를 선택한 후 생성해둔 Project를 선택해 export 해준다.

내보낼 파일 선택 후 Export

project 선택 후 export

 

 

5. Zeplin에 돌아와 파일을 확인한다

프로젝트에 올라온 이미지의 css 확인이 가능하다.