html2design

About this plugin

html2design imports web pages captured by the html2design Chrome extensioninto Figma as fully editable designs — not flat screenshots. Pages arerebuilt as real frames, text, images and vector nodes, so you can tweakcolors, copy and layout right inside Figma.How it works1. Install the html2design Chrome extension and click its icon on the page youwant to capture.2. Open this plugin in Figma and click "Connect" to get a 6-digit code, thenenter it into the extension.3. Once the extension sends the capture, the page renders instantly as aneditable Figma design.What it reproduces- Layout (exact position & size), text (font, weight, color, alignment)- Images, background colors / gradients / background images- Borders (incl. asymmetric widths), rounded corners, shadows, opacity, overflow clip- Merged capture across iframes / shadow DOM- Inline SVG → editable vectors- Large pages are streamed in automatically as chunksPlugin options- Auto Layout generationDelivery method- direct-send: instant extension → plugin transfer via a 6-digit pairing code(the only delivery method right now)Requires: the html2design Chrome extension (installed separately). This plugincannot capture web pages on its own.https://chromewebstore.google.com/detail/cgjbnhacnalehnfkkkoilmglhiigbjmfPrivacy: captured data passes through the direct-send relay only betweenparties sharing the pairing code (never stored — relayed and discardedimmediately), over TLS (wss://). See the privacy policy for details.────────────────────────────html2design는 html2design 크롬 익스텐션이 캡처한 웹페이지를 이 플러그인으로불러와 편집 가능한 Figma 디자인으로 그려주는 임포터입니다. 스크린샷이 아니라실제 프레임·텍스트·이미지·벡터 노드로 재구성되므로 Figma 안에서 색상, 글자,레이아웃을 바로 수정할 수 있습니다.이렇게 동작합니다1. Chrome에 html2design 익스텐션을 설치하고 캡처할 페이지에서 아이콘을 클릭합니다.2. 이 플러그인을 Figma에서 열고 "연결하기"를 눌러 표시된 6자리 코드를 익스텐션에 입력합니다.3. 익스텐션이 캡처를 전송하면 페이지가 편집 가능한 Figma 디자인으로 즉시 렌더링됩니다.무엇을 재현하나요- 레이아웃(정확한 위치·크기), 텍스트(폰트·두께·색·정렬)- 이미지, 배경색·그라디언트·배경 이미지- 보더(비대칭 두께 포함), 라운드 코너, 그림자, 투명도, overflow 클리핑- iframe / shadow DOM 병합 캡처- 인라인 SVG → 편집 가능한 벡터- 대용량 페이지는 자동으로 나눠 수신(청크)플러그인 옵션- Auto Layout 자동 구성전달 방식- direct-send: 6자리 페어링 코드로 익스텐션 → 플러그인 즉시 전송(현재 유일한 전달 방식)필요한 것: html2design Chrome 익스텐션 (별도 설치 필요). 이 플러그인은 익스텐션없이 단독으로는 웹페이지를 캡처하지 못합니다.https://chromewebstore.google.com/detail/cgjbnhacnalehnfkkkoilmglhiigbjmf개인정보: 캡처 데이터는 페어링 코드로 연결된 당사자끼리만 direct-send 릴레이를경유하며(저장 없이 즉시 중계 후 폐기), 전송 구간은 TLS(wss://)로 보호됩니다.자세한 내용은 개인정보 처리방침을 참고하세요.