Figma 웹사이트를 피그마로 옮기기 (플러그인 html.to.design)

피그마를 매일 사용하지는 않아서 그런지 자주 잊어버리는 관계로 블로그에 작성하기로함

피그마에서 아주 유용하게 쓸만한 플러그인 html.to.design

지난번 이미 있는 기존의 사이트를 앞으로의 유지보수를 쉽게 하기 위해 디자인 가이드를 만드는 작업이 있었는데 고객사에 디자인 원본 파일이 없던 터라 이미 있는 사이트를 전부다 다시 만들어야 했다 사이트가 Bootsrap 기반으로 되어있는 걸로 봐서 이전 사이트를 만든 업체에서 메인 정도만 시안으로 잡고 나머지는 페이지는 Bootsrap으로 디자인 시안없이 바로 만든걸로 보인다

사이트 전체 페이지를 피그마로 옮기기 + 디자인 가이드 + 컴포넌트 이렇게 작업

그때 이 기능을 몰라 그 많은 페이지를 피그마로 하나하나 정성스레 다 만들어야 했는데 미리 알았더라면 정말 쉽게 끝냈을텐데 아쉽다 그래도 웹사이트의 수십장의 페이지를 피그마로 옮기는 과정에서 피그마 툴을 이제 거의 사용가능하게 되었으니 만족

일단 플러그인을 다운 받는다

아래 가장 오른쪽 버튼이 플러그인을 다운 받을수 있는 버튼인데 클릭하고 html.to.design 검색 하고 설치하면 끝

 

설치하고 나서 화면 아무곳에나 마우스 오른쪽 클릭하면 내가 설치한 플러그인이 나옴

 

 

실행하면 html.to.design의 팝업이 나오는데 Imporr via URL에 원하는 URL을 적고 오른쪽 Import 버튼을 누르면된다 나는 테스트로 https://www.naver.com/ 를 Import해 보았음

 

 

Import 버튼 밑에 연필모양 아이콘을 누르면 이런 설정가능한 옵션이 있는데 원하는 스타일로 체크해 주면 될 것 같음

 

 

불러오는중

 

 

불러 온 사이트에 대한 여러가지 설정들 테스트라 이것저것 설정하진 않았지만 실제 작업할땐 폰트 같은 부분을 미리 설정해두면 편하겠다

나머지 옵션에서 오토레이아웃을 체크해서 불러보았는데 네이버는 단순한 사이트가 아니어서 그런지  오토레이아웃이 완벽하진 않았는데 네모박스나 텍스트박스 등에 어느정도 오토레이아웃이 적용되고 있는걸 봐서는 단순한 사이트에서는 오토레이아웃이 괜찮게 적용될지도 모르겠다

 

 

잘 Import된 네이버 사이트

 

 

요소 하나하나 다 살아있고 레이어도 잘 되어있음

진작에 알았더라면 작업이 쉬웠을텐데 이미지도 다 살아있고 이전에 작업했을때 가장 불편했던게 작은 아이콘들 가져오는게 진짜 많고 번거로워서 그게 불편했는데 하필 또 대부분 svg로 되어있는 아이콘들이 많았던 사이트라 이렇게 가져와서 아이콘들 그냥 복붙하면 되니까 정말 좋았겠다 이 부분은 앞으로도 잘 써먹을 수 있을듯