알려준 방법대로 설치했는데 Adobe XD에서 "내보내기"에 Zeplin항목이 안나온다😨
그래도 이리저리 성공해서 과정 기록하기.
📍 목차
1. 로그인
Zeplin 사이트에서 계정 생성 후 로그인
Zeplin
A structured workspace to publish designs, where the entire team can collaborate to ship beautiful products together
zeplin.io
2. Zeplin 설치 후 프로젝트 생성
Windows app 버전으로 다운로드 > 실행 파일로 설치 진행
Zeplin
A structured workspace to publish designs, where the entire team can collaborate to ship beautiful products together
zeplin.io
3. Zeplin 프로젝트 생성
1) 다운로드 완료 후 zeplin app이 실행되면서 다음과 같은 화면이 뜸
"Create Project" 선택
- 제플린에 프로젝트를 먼저 생성해야, XD문서를 해당 프로젝트로 불러올 수 있다.
2) 필요한 프로젝트 타입을 선택
3) 프로젝트 생성 완료.
첫 페이지에서 Adobe 를 선택하면 어떻게 저장할 수 있는지 알려준다.
- Adobe XD에서 "내보내기 (export) > zeplin"
- ctrl + alt + E
나의 경우는 내보내기 (export)에 zeplin이 추가되지 않아 다른 방법으로 진행했다.
상단의 "< Workspace"를 선택하면 만들어진 프로젝트 리스트를 볼수 있다.
4. Adobe XD에 Zeplin 플러그인
1) Adobe XD 실행 후 왼쪽 하단의 "플러그인" 선택
2) "플러그인 탐색" 선택 후 "Zeplin for XD"를 찾아 설치
3) 설치 후 "플러그인"툴에서 Zeplin for XD > open plugin 선택
5. Adobe XD문서 Zeplin으로 내보내기
1) 내보 낼 영역 선택 후 "Export"선택
2) 생성해 둔 Zeplin프로젝트 선택하여 EXPORT 선택
3) Zeplin 앱 실행하면 업로딩 되는 것을 확인 할 수 있음
6. Zeplin에서 확인
업로드 완료 후 해당 스크린을 확인 할 수 있다.
각 요소를 선택하면 여백, 컬러, 사이즈 등 스타일 속성을 확인할 수 있다.
프로젝트를 Web으로 생성시 CSS 코드도 확인할 수 있다.
댓글