html2figma

웹페이지를 캡처해 편집 가능한 Figma 디자인으로 변환합니다.

html2figma는 웹페이지를 "편집 가능한" Figma 디자인으로 바꿔주는 도구입니다. 스크린샷 이미지가 아니라, 실제 프레임·텍스트·이미지·벡터 노드로 재구성되므로 Figma 안에서 색상, 글자, 레이아웃을 바로 수정할 수 있습니다. ■ 이렇게 동작합니다 1. Figma에서 html2figma 플러그인을 열고 "연결하기"를 눌러 6자리 코드를 받습니다. 2. 캡처할 웹페이지에서 확장 프로그램 아이콘을 클릭하고 그 코드를 입력합니다. 3. 캡처하기를 누르면 현재 페이지의 DOM·스타일·레이아웃을 정확히 읽어 Figma 플러그인으로 곧바로 전송되고, 편집 가능한 디자인으로 그려집니다. ■ 무엇을 재현하나요 • 레이아웃(정확한 위치·크기), 텍스트(폰트·두께·색·정렬) • 이미지, 배경색·그라디언트·배경 이미지 • 보더(비대칭 두께 포함), 라운드 코너, 그림자, 투명도, overflow 클리핑 • iframe / shadow DOM 병합 캡처 • 인라인 SVG → 편집 가능한 벡터 • 대용량 페이지는 자동으로 나눠 전송(청크) ■ Figma 플러그인 옵션 • Auto Layout 자동 구성 • Local styles(색상/텍스트 스타일) 자동 생성 ■ 요금 • 무료: 매달 5회 변환 (가입·로그인 불필요) • Pro: 월 $9 — 무제한 변환, Google 계정 로그인으로 모든 기기에서 사용, 언제든 해지 • 결제는 Paddle(Merchant of Record)이 안전하게 처리합니다. ■ 개인정보 • 무료 사용자의 개인정보는 수집하지 않으며, 사용 횟수는 브라우저 안에만 기록됩니다. • Pro 구독 시에만 Google 로그인으로 최소 정보(Google 사용자 ID·이메일)와 구독 상태를 저장합니다. Google 로그인은 신원 확인 전용 범위(openid email profile)만 사용합니다. • 분석/트래킹/광고 식별자를 사용하지 않습니다. • 캡처 데이터는 릴레이 서버를 "통과"만 하며(저장하지 않고 즉시 중계 후 폐기), 6자리 페어링 코드로 연결된 당사자끼리만 주고받습니다. 전송 구간은 TLS(wss://)로 보호됩니다. ■ 권한 안내 정확한 스타일/레이아웃 추출을 위해 Chrome DevTools Protocol(chrome.debugger)로 현재 탭의 DOM 스냅샷을 읽습니다. 이때 Chrome이 "이 확장 프로그램이 디버깅하고 있습니다" 배너를 표시하며, 캡처가 끝나면 즉시 해제됩니다. 읽은 데이터는 Figma 플러그인으로 전송하는 용도 외에 다른 곳으로 보내지 않습니다. 필요한 것: 이 확장 프로그램 + Figma용 html2figma 플러그인. Figma 플러그인: https://www.figma.com/community/plugin/1657063496726706112