[피그마] 웹사이트와 html

피그마에서 한 디잔인을 html/css로 변환하는 플러그인과 구측 된 웹사이트를 피그마의 디자인 파일로 변환해주는 

플러그인을 소개합니다.

 

 

웹사이트를 피그마 파일로 변환하는 플러그인  HTML to design 입니다.

 

HTML to design plugin

디바이스별 레이아웃을 참고 하고 싶은 사이트나 레퍼런스 수집용으로 좋습니다.

 

피그마 플러그인-hyml to design

사용방법

• 플러그인 html.to.design을 실행 합니다.
• 리소스>플러그인에서"html to design"을 검색합니다.
• 브라우저에서 변환할 웹 사이트를 열고 URL을 복사합니다.
• URL을 플러그인에 붙여 널고 device size를 선택한 다음 <impor> 버튼을 클릭해서 Figma로 변환합니다.

 

 

https://www.figma.com/community/plugin/1159123024924461424/html.to.design

html.to.design | Figma Community

 

 

 

피그마 작업물 CSS로 복사해서 가져오기

 

 

 

복사하려는 대상을 우클릭한 뒤 Copy as CSS 옵션을 클릭해서, 원하는 곳에 붙여넣기 하면 아래와 같이 CSS가 paste 된다.

 

 

이런식으로 주석으로 구분해서 어떤 것에 해당되는 CSS인지도 알려준다.
대략적인 레이아웃이 필요할 때 요긴하게 쓸 수 있다.