Show GN: html2design - 웹페이지를 편집 가능한 Figma 노드로 변환하는 크롬 확장

5 hours ago 3

스크린샷을 붙이는 방식이 아니라 Chrome DevTools Protocol의 DOMSnapshot으로 DOM, 계산된 스타일, 레이아웃을 읽어 Figma 노드로 재구성한다
flex/grid는 Auto Layout으로, 인라인 SVG는 편집 가능한 벡터로 변환. iframe과 shadow DOM은 병합해서 한 번에 캡처한다
재현 범위는 위치와 크기, 텍스트(폰트/두께/색/정렬), 이미지, 배경색과 그라디언트, 비대칭 보더, 라운드 코너, 그림자, 투명도, overflow 클립
전달은 익스텐션에서 플러그인으로 6자리 페어링 코드를 통한 direct-send. 릴레이는 저장하지 않고 중계 후 폐기하며 TLS를 쓴다. 큰 페이로드는 청크로 분할 수신
한계: canvas의 픽셀 콘텐츠는 가져오지 못하고 요소 박스만 캡처된다. 그라디언트 각도는 근사 변환이고 설치되지 않은 폰트는 Inter로 대체된다. cross-origin iframe은 CDP 접근 범위에 따라 제한될 수 있다
크롬 확장과 Figma 플러그인을 모두 설치해야 동작한다
월 5회 무료(가입/로그인 없음), 유료 구독 있음