Zeplin integration

제플린(Zeplin)은 공동 작업을 위한 웹과 데스크톱을 모두 지원하는 프로그램이다. 스케치(Sketch), 어도비 XD CC, Photoshop CC, 피그마(Figma) 등과 연동하여 자동으로 작업한 결과물을 Asset 생성, 좌표값, Color Palette를 스타일 가이드로 생성해 준다.

과거 Assistor PS를 사용하여 추출된 소스를 ppt에 정리하여 디자인 가이드 ppt 문서와 이미지 파일 asset을 개발자에게 넘겨줬었는데 몇 년 전 제플린이라는 프로그램이 나오면서 이제 제플린을 이용한 가이드를 요구하는 곳이 하나둘씩 늘어나는 추세다.

제플린은 가이드를 생성하고 요소의 크기를 확인하는 이 모든 과정을 자동화하여 시간과 노력을 절약해준다.

그러면 제플린에 인터그레이션 가능한 앱들이 무엇이 있는지 자세히 알아보도록 하자.

Sketch integration

Sketch App Icon
Sketch App Icon

Sketch 디자인에서 Zeplin으로 아트 보드를 내보내는 것은 아주 간단하다. 디자인 결과물을 내보낼 수 있으려면 데스크톱 응용 프로그램 을 다운로드 해야한다. 스케치 파일에서 레이어 / 아트보드를 선택하고 ^⌘E을 누르거나 상단의 “플러그인> Zeplin> 선택된 아트보드 내보내기… “메뉴를 사용하여 내보내기 프로세스를 시작하면된다.

Adobe XD CC integration

Adobe XD CC

얼마 전 Zeplin의 새로운 Adobe XD CC 인터그레이션을 시작했다. 그 이후로 수십만 건의 디자인이 Adobe XD에서 Zeplin으로 내 보내졌다고 한다. 프로토타이핑 링크 및 그리드 내보내기와 같은 기능을 추가하여 인터그레이션 기능이 개선이 되었다고 한다. 현재 Mac/Windows 모두 지원하고 있다.

Adobe Photoshop CC integration

Adobe Photoshop CC
Adobe Photoshop CC

Zeplin에 포토샵 아트보드 내보내기는 매우 간단하다. 디자인을 내보낼 수 있으려면 데스크톱 응용 프로그램 을 다운로드 해야한다.

Zeplin은 데스크톱 응용 프로그램을 설치할 때 플러그인을 자동으로 설치하며, 포토샵 메뉴의 상단 “윈도우> 확장”에서 플러그인을 활성화해야한다.

Figma integration

Figma App
Figma App
https://youtu.be/ASCFEK_VBVY

댓글 남기기