[Figma] 피그마 AutoHTML 플러그인

과거 웹퍼블리셔로 실무경험을 했을때 디자이너와 협업 과정에서 Photoshop, Sketch, Zeplin 을 주로 사용했던것 같은데, 요즘에는 Figma가 대세인것 같다.

IT 분야로 다시 도전하는 가운데 Figma도 좀 알고 있어야할 것 같아서 이런 저런 영상을 보며 알아보는데 Dev 모드라고 해서 디자인을 코드로 변환해주는 좋은 기능이 있는걸 발견했다.

그런데 문제는 언제부터인가 그게 유료화가 된 것 같다. 이제 입문자로 테스트 삼아 공부하는 가운데 유료결제를 하고싶지 않아 그냥 있었는데, 좀 더 찾아보니 기능이 좀 더 단순하지만 무료로 활용할 수 있는 AutoHTML 플러그인이 있다는 것을 알게 되었다.

 

https://autohtml.dev/

AutoHTML | Figma Plugin

 

 

 

https://www.figma.com/community/plugin/1077172952654000760/autohtml-components-to-code

 

플로그인을 검색 후 열어보니 사용법을 간단히 확인할 수 있었다.

---

 

1) 플러그인 검색 후 'Open in Figma' 클릭

 

2) 플러그인 아이콘 클릭 --> AutoHTML 검색 후 클릭

 

 

3) 원하는 디자인 클릭하면 코드 확인 가능

 

 

4) 설정에서 원하는 Framework 및 Styling 기준 변경 가능

• 단, Framework의 경우 HTML을 제외한 나머지(React, Vue, Svelte, Angular)는 유료이용.(무료로 이용 가능하나 월 횟수제한 있음)
• Styling의 경우 Default는 기본 CSS이고 그 외에 BEM, Tailwind, Inline Style 선택 가능