티스토리 뷰
제일 햇갈렸던 부분인거 같다.
Tailwind css 를 사용하고 있기 때문에 플러그인을 활용해서 추출하기로 하였다.
Inspect - Export to HTML, React, TailwindCSS | Figma Community
Figma Community plugin - Convert design to code with a click. A simple way to export your design to HTML or React with TailwindCSS. How to use it? Select a layer you want to exportOpen this pluginClick copy!
www.figma.com
그렇지만 문제는...
다른 사람들은 install 버튼이 뜬다는데 나는 왜 Try it out 버튼이 뜨는거지...?
Try it out 버튼을 클릭시
이렇게 화면이 뜨면서 사용할 수 있게 해준다.
사이드바에도 이렇게 생성이 되어있다.
그렇지만 그냥 프로젝트 화면에서는
이런식으로 플러그인이 아예 존재하지 않았다.
결국 내가 찾은 방법은
프로젝트 화면에서
원하는 레이어의 제일 겉 부분...
파란 테두리 클릭 > 우클릭 하여 복사를 한다.
이 이후에 플러그인이 있는 화면으로 이동하고 붙여넣는다.
화면을 붙여넣는 순간 알아서 코드를 분석해서 추출해준다.
작성된 html 만 복사하면 끝나는 상황!
문제는... 반응형은 해주지 않는듯 하다.
덕분에 퍼블리싱까지 경험을 하게 되는거 같다......
'개발일기' 카테고리의 다른 글
| [Vue.js] vue3에서 Font Awesome Icon 사용하기 (2) | 2022.10.26 |
|---|---|
| [Vue.Js] 라우터 이동하는 페이지의 이름 찾기 (0) | 2022.10.25 |
| 제플린에서 피그마로 이동 (1) | 2022.10.24 |
| [Vue.js] data 변수 값 watch를 사용하여 변경 감지 (0) | 2022.10.15 |
| [Vue.js] 상위 컴포넌트의 함수 실행 (0) | 2022.10.15 |