피그마 디자인을 완성했을 때 이것을 제플린으로 옮기는 방법을 활용해 보겠다. 제플린은 디자이너가 피그마, XD, 포토샵, 스케치로 만든 디자인을 화면에 그대로 구현할 수 있도록 도와주는 툴이다. 1. 먼저 내보내고 싶은 프레임을 선택한 뒤, 제플린 플러그인을 설치해 실행해준다. 2. Export 버튼을 누른 뒤 잠시 기다린다. 3. 프레임 내보내기가 완료되면 오른쪽의 아이콘을 클릭한다. 4. 제플린에서 HTML, CSS 코드를 참고할 수 있다. Alt 를 누르고 요소를 클릭하면 %단위로 padding과 margin을 확인할 수 있다.
