피그마 디자인을 완성했을 때 이것을 제플린으로 옮기는 방법을 활용해 보겠다. 제플린은 디자이너가 피그마, XD, 포토샵, 스케치로 만든 디자인을 화면에 그대로 구현할 수 있도록 도와주는 툴이다.
1. 먼저 내보내고 싶은 프레임을 선택한 뒤, 제플린 플러그인을 설치해 실행해준다.
2. Export 버튼을 누른 뒤 잠시 기다린다.
3. 프레임 내보내기가 완료되면 오른쪽의 아이콘을 클릭한다.
4. 제플린에서 HTML, CSS 코드를 참고할 수 있다.
Alt 를 누르고 요소를 클릭하면 %단위로 padding과 margin을 확인할 수 있다.
'IT' 카테고리의 다른 글
| [웹접근성]웹접근성을 고려한 마크업(WAI-ARIA)-2 (2) | 2023.03.05 |
|---|---|
| [웹접근성]웹접근성을 고려한 마크업(WAI-ARIA)-1 (0) | 2023.03.05 |
| 검색엔진최적화(SEO, Search Engine Optimization) 설정 방법 (0) | 2023.02.13 |
| 웹 표준이 뭘까? (Feat. W3C) (0) | 2023.01.24 |
| [VS code]기본 Extensions 설치하기 (0) | 2023.01.24 |