HTML을 편집 가능한 Figma 레이어로 변환하는 무료 오픈소스 플러그인 제작

제가 시도해 본 모든 HTML to Figma 플러그인은 구독료를 요구하거나 가져오기 기능을 유료화했기 때문에, 제가 직접 만들어서 무료로 공개했습니다. 최근 제 작업 흐름은 Claude에게 hi-fi 와이어프레임을 HTML 형태로 요청한 다음, 이를 Figma로 불러와 수동으로 수정하는 것입니다. 이렇게 하면 매번 Figma MCP 토큰을 소모하지 않고도 작업을 할 수 있습니다. 로컬 .html 파일(또는 폴더 전체, CSS, 이미지 및 폰트 포함)을 선택하거나 HTML을 붙여넣고, 뷰포트를 선택한 후 가져오기만 하면 됩니다. 다음 항목들을 얻게 됩니다: - 브라우저가 측정했던 위치에 중첩된 프레임 - 브라우저에서 줄 바꿈이 발생했던 곳에 실제 텍스트 레이어 - 벡터 형태의 SVG, 채우기(fill) 형태의 이미지, 그리고 네이티브 속성으로 처리되는 그라디언트, 테두리, 그림자 및 블러 효과 - 페이지 색상 중 최대 40개가 로컬 색상 스타일로 저장됩니다. 이 플러그인은 의도적으로 Auto Layout 대신 절대 위치(absolute positions)를 사용하므로, 가져온 결과물이 원본 페이지와 동일하게 보이도록 합니다. 가장 정확한 일치를 위해서는 Figma에 해당 페이지의 폰트를 설치하는 것이 좋습니다. 누락된 폰트는 대체되어 목록으로 표시됩니다. 설치하기: https://www.figma.com/community/plugin/1686625740123785157 (아직 검토 중) 또는 먼저 플러그인 UI를 사용해 보거나(마스코트를 눌러보세요): https://kevbry.in/open-html-to-figma 피드백을 환영합니다. 특히 제대로 나오지 않는 페이지에 대한 의견이 궁금합니다.