소개
웹페이지를 편집 가능한 Figma 레이어로 되살리는 도구입니다. 크롬 확장으로 페이지를 담으면 Figma 플러그인이 레이아웃·색·글자·이미지를 레이어로 다시 세웁니다. 이미지 한 장을 붙여 넣는 것이 아니라 프레임과 텍스트와 도형으로 재현합니다.
캡처는 여러 해상도와 풀페이지를 지원하고, 정적 사이트뿐 아니라 SPA 와 로그인이 필요한 페이지까지 담습니다. 위치·간격·타이포는 CSS 를 그대로 옮기며, AI 가 아니라 규칙 기반이라 같은 페이지를 두 번 넣으면 두 번 같은 결과가 나옵니다. CSS 변수는 Figma Variables 로, 반복되는 이미지는 Component 로 넘어갑니다. 변환은 브라우저 안에서 일어나고 원본 HTML 은 저장하지 않습니다.
개발이 끝나 공개돼 있습니다. 무료로 하루 세 번까지 변환할 수 있고, 횟수 제한 없이 쓰거나 여러 해상도를 한 번에 담거나 디자인 토큰을 뽑으려면 Pro($8/월, 10일 무료 체험)입니다.
기술 스택
| 영역 | 기술 | 선택 이유 |
|---|---|---|
| 공통 | TypeScript · pnpm 모노레포 · vitest | 세 조각이 하나의 스키마를 공유해야 해서, 그 스키마를 패키지로 뽑고 테스트로 고정했습니다 |
| 캡처 | Chrome 확장 (Manifest V3) · Chrome DevTools Protocol | 해상도를 진짜로 바꿔 가며 캡처하려면 CDP 가 필요했습니다. 창 크기만 바꾸면 미디어 쿼리가 따라오지 않습니다 |
| 변환 | Figma Plugin API · Figma Variables | CSS 변수를 Figma Variables 로 옮겨야 디자인 토큰이 살아서 넘어갑니다 |
| 전송 | Node 단일 파일 릴레이 서버 | 의존성 없는 파일 하나로 뒀습니다 — 이 서버가 하는 일은 전달뿐이고, 결제 게이트가 아닙니다 |
개발 일정
번들 스키마 확정
완료2026.01.10 – 2026.02.20세 조각이 공유할 계약을 먼저 못박았습니다
캡처 파이프라인
완료2026.02.21 – 2026.04.10해상도 에뮬레이션, 트리 정리, 이미지 압축
Figma 변환
완료2026.04.11 – 2026.05.25절대좌표 배치, 폰트 대체, 노드 단위 에러 격리
릴레이 전송과 게시
완료2026.05.26 – 2026.06.30코드 페어링 전송과 스토어 게시
업데이트 로그
- 기능1.1
디자인 토큰 추출 추가
CSS 변수를 Figma Variables 로 옮기고, 반복되는 이미지를 Component 로 묶습니다.
- 릴리스1.0
공개
크롬 확장과 Figma 플러그인을 묶어 공개했습니다.