Chrome Extension + Figma Plugin

HTML을 Figma로,
즉시 변환

HTML to Figma,
Instantly

웹 페이지 어디서나 클릭 한 번으로 캡쳐 — 레이아웃, 색상, 폰트까지 Figma 디자인 에셋으로 정확하게 변환됩니다.

Capture any web page with one click — layout, colors, fonts and more, converted accurately into native Figma design assets.

✦ 라이센스 구매 $9.99 ✦ Get License $9.99 ⬇ 무료로 시작 ⬇ Start for free

라이센스는 $9.99 · 밥 한 끼 가격으로 1년 무제한

License at $9.99 · Less than a meal for a full year

캡처 완료 · 663 nodes Captured · 663 nodes
CONVERT
✦ Design Capture
Hero SectionFrame
THeadingText
CTA ButtonComponent
Nav BarGroup
변환 중...
Converting...
0%
0 / 663 nodes
3단계로 끝납니다
Done in 3 steps
01
Step 01

서버 실행 Run the server

Design Capture Server 앱을 실행하세요. 트레이에 상주하며 백그라운드에서 자동 동작합니다. Launch the Design Capture Server app. It runs silently in the system tray in the background.

Mac · Apple Silicon Windows 10 / 11 터미널 불필요 No terminal
02
Step 02

페이지 캡쳐 Capture the page

Chrome 확장에서 캡쳐 버튼 클릭. DOM 구조, CSS, 폰트, 색상을 모두 정확히 수집합니다. Click capture in the Chrome extension. DOM structure, CSS styles, fonts, and colors are all collected accurately.

DOM Structure CSS Styles Fonts & Colors
03
Step 03

Figma로 변환 Convert to Figma

피그마 플러그인에서 가져오기 클릭. Frame, Text, Fill, Shadow 등 네이티브 요소로 생성됩니다. Click import in the Figma plugin. Frames, Text, Fills, Shadows and more are created as native Figma elements.

Frame Text Fill & Shadow 네이티브 레이어 Native layers
이런 분들에게 필요해요
Built for designers & developers

AI가 만든 목업부터 레퍼런스 사이트까지, 웹에 있는 모든 UI를 Figma 리소스로.

From AI-generated mockups to reference sites — bring any web UI into Figma as native assets.

01

AI 목업 → Figma 디자인 파일

AI mockup → Figma design file

Claude, v0, Cursor 등으로 생성한 HTML 목업을 바로 Figma로 가져와 실제 디자인 파일로 완성하세요.

Import HTML mockups from Claude, v0, or Cursor directly into Figma to finish them as real design files.

Claudev0CursorFigma
02

레퍼런스 사이트 UI 리소스화

Turn reference sites into Figma resources

벤치마킹하고 싶은 사이트의 컴포넌트를 캡쳐해 Figma 에셋으로 저장. 레이아웃 분석과 재사용이 쉬워집니다.

Capture components from sites you want to benchmark and save them as Figma assets for layout analysis and reuse.

컴포넌트 분석Component analysis 레이아웃 참고Layout reference
03

기획 문서 · UI 스펙 자동 추출

Auto-extract UI specs & documentation

운영 중인 서비스 화면을 캡쳐해 Figma에서 바로 스펙 문서화. 개발된 UI와 디자인 시스템을 동기화하세요.

Capture live service screens and document specs directly in Figma. Sync your built UI with your design system.

UI 기획문서UI documentation 디자인 시스템Design system
🎨

CSS 완전 변환

Full CSS conversion

그라디언트, border-radius, box-shadow까지 Figma 네이티브로 정확 변환

Gradients, border-radius, box-shadow converted to native Figma properties

📝

폼 요소 완벽 지원

Full form element support

Input, Select, Checkbox 등 value · placeholder까지 Figma 텍스트로 변환

Input, Select, Checkbox with values and placeholders converted to Figma text

CSS 변수 자동 해석

CSS variable resolution

var(--color) 형태의 디자인 토큰도 실제 색상값으로 자동 변환

Design tokens in var(--color) format are automatically resolved to real values

🔤

한국어 최적화

Korean UI optimized

Pretendard 우선 적용, 폰트 굵기·자간까지 정확하게 매핑

Pretendard first, with precise font-weight and letter-spacing mapping

📊

실시간 진행률

Real-time progress

수백 개 노드 변환 시 퍼센트로 진행 상황 실시간 확인

Track conversion progress in real-time with percentage display

🖥

Mac & Windows

Mac & Windows

Apple Silicon · Intel Mac · Windows 모두 지원, 터미널 불필요

Apple Silicon, Intel Mac, and Windows supported — no terminal needed

설치는 3가지
3 things to install

서버 앱 · Chrome 확장 · Figma 플러그인 — 셋 다 있어야 동작합니다.

Server app · Chrome extension · Figma plugin — you need all three.

STEP 01
STEP 01
🖥

서버 앱 설치

Install Server App

로컬에서 실행되는 릴레이 서버. 트레이에 상주하며 백그라운드 동작. 터미널 불필요.

Local relay server running silently in the system tray. No terminal needed.

v1.0.4
STEP 02
🔵

Chrome 확장 설치

Install Chrome Extension

캡쳐 버튼 한 번으로 현재 페이지의 DOM · CSS · 폰트 전체 수집. 로그인 페이지, 사내 내부망도 캡쳐 가능.

One click captures the page's DOM, CSS, and fonts. Works on login-required and internal network pages too.

로그인 · 내부망 페이지도 캡쳐 가능
Captures private & login-required pages
STEP 03

Figma 플러그인 설치

Install Figma Plugin

가져오기 클릭 한 번. Frame, Text, Fill, Shadow 등 네이티브 Figma 레이어로 즉시 생성.

Click import once. Creates native Figma layers: Frames, Text, Fills, Shadows and more.

네이티브 Figma 레이어로 변환
Converts to native Figma layers
1 앱 설치 → Design Capture Server 실행 → 서버 시작 클릭
🪟 Windows: "Windows의 PC 보호" 창 → 추가 정보 → 실행
🍎 Mac: "확인되지 않은 개발자" → 시스템 설정 → 개인정보 보호 → 그래도 열기
Install app → Launch Design Capture Server → Click Start server
🪟 Windows: "Windows protected your PC" → More info → Run anyway
🍎 Mac: "unidentified developer" → System Settings → Privacy → Open Anyway
2Chrome 웹 스토어에서 Design Capture 확장 설치Install the Design Capture extension from the Chrome Web Store
3Figma Community에서 Design Capture 플러그인 설치Install the Design Capture plugin from Figma Community
4캡쳐 → 변환 완료! 무료 플랜으로 20건 무료 사용 가능Capture and convert. Free plan includes 20 conversions.
자주 묻는 질문
Frequently Asked Questions
심플한 가격
Simple pricing

구독 없음. 1회 결제, 1년 사용.

No subscription. One-time payment, one year of use.

✦ 라이센스
✦ License
$9.99
/ 1년 · 만료 후 동일 가격으로 갱신
/ 1 year · Renew at the same price
☕ 밥 한 끼 가격으로 1년 내내 사용하세요
☕ Less than a meal — use it all year long
  • 무제한 변환 (20건 제한 해제)Unlimited conversions (removes 20-use limit)
  • 2대 기기 동시 사용Use on up to 2 devices
  • 라이센스 코드 즉시 이메일 발송License code delivered instantly by email
  • 모든 업데이트 포함All updates included
  • 이메일 지원Email support
지금 구매하기 → Buy now →

카드 · PayPal 결제 가능 · 먼저 20건 무료로 체험

Card · PayPal accepted · Try free for 20 conversions first