배경
디자인 시스템을 운영하다 보면 웹에서 구현된 컴포넌트를 다시 Figma로 가져와야 할 때가 있다. 디자이너와 협업할 때 "지금 실제로 이렇게 보인다"를 Figma 안에서 보여줘야 하는 상황이 생각보다 자주 생긴다.
그동안은 html.to.design이라는 Figma 플러그인을 사용했다. 크롬 확장프로그램을 설치하면 현재 보고 있는 웹 페이지를 클릭 한 번으로 Figma 파일로 변환해준다. 편리하지만 월 18달러다. 고환율시대에 기능 하나 쓰려고 18달러를 소비하는 건 너무 끔찍한 일이다.
기존 방식의 한계
html.to.design의 워크플로우는 이랬다:
크롬에서 대상 페이지를 연다
확장프로그램 아이콘을 클릭한다
캡처가 완료되면 Figma에서 확인한다
다음 페이지로 이동해서 반복한다
한 페이지씩 수동으로 캡처해야 했다. 디자인 시스템 문서 사이트처럼 페이지가 수십 개인 경우, Getting Started부터 Button, Colors, Templates까지 하나하나 열어서 캡처하는 건 상당히 번거로운 작업이었다.
Figma MCP를 시도하게 된 계기
그러다 사내 슬랙에 Claude code to figma라는 링크를 보게 되었고, Claude Code에서 Figma MCP 플러그인이 제공하는 도구 목록을 보다가 generate_figma_design이라는 기능을 발견했다. 웹 페이지를 캡처해서 Figma 파일로 변환해주는 기능인데, html.to.design이 하는 일과 정확히 같았다.
무료라는 점이 눈에 들어왔다. 정확히는 Claude를 이미 쓰고 있다면 추가 비용이 없다.
동작 원리
캡처 과정은 세 단계로 나뉜다.
1단계: 캡처 ID 발급
generate_figma_design을 호출하면 Figma 서버에서 일회용 캡처 ID를 발급한다. 새 파일을 만들 수도 있고, 기존 파일에 페이지를 추가할 수도 있다.
2단계: HTML 생성 + 캡처 스크립트 삽입
대상 페이지를 정적 HTML로 복제하고, Figma의 캡처 스크립트를 삽입한다.
<!DOCTYPE html>
<html>
<head>
<script src="<https://mcp.figma.com/mcp/html-to-design/capture.js>" async></script>
</head>
<body>
<!-- 대상 페이지의 시각적 복제 -->
</body>
</html>
이 HTML을 로컬 HTTP 서버로 서빙한 뒤, 캡처 파라미터가 포함된 URL로 브라우저를 연다.
<http://localhost:8080/#figmacapture={ID}&figmaendpoint=...&figmadelay=3000>캡처 스크립트가 DOM을 분석해서 Figma 서버로 전송하면 끝이다.
3단계: Figma 파일 확인
캡처가 완료되면 Figma 파일 URL을 반환한다. Figma를 따로 열어둘 필요 없이, URL을 클릭하면 바로 결과를 확인할 수 있다.
멀티페이지 자동 캡처
html.to.design 대비 가장 큰 차이점은 멀티페이지 캡처를 자동화할 수 있다는 것이다.
generate_figma_design을 outputMode: 'existingFile'로 호출하면 기존 Figma 파일에 새 페이지를 추가할 수 있다. 각 페이지마다 캡처 ID를 발급받고, HTML 파일을 생성하고, 브라우저를 열어 캡처하는 과정을 반복하면 된다.
한 가지 주의할 점은, 여러 탭을 동시에 열면 백그라운드 탭에서 캡처 스크립트가 실행되지 않는다는 것이다. 브라우저의 백그라운드 탭 스로틀링 때문인데, 결국 순차적으로 하나씩 캡처해야 안정적으로 동작했다.
실제로 디자인 시스템 문서 4페이지(Getting Started, Button, Colors, Templates)를 하나의 Figma 파일에 자동으로 캡처하는 데 성공했다.
비교
Figma MCP
비용
월 $18
무료 (Claude 사용자)
캡처 방식
크롬 확장프로그램, 수동
CLI에서 자동화 가능
멀티페이지
수동 반복
스크립트로 자동 순차 캡처
SPA 지원
확장프로그램이 처리
정적 HTML 프록시 필요
속도
빠름 (확장프로그램)
느림 (페이지당 ~15초)
추가 기능
화면 캡처 특화
다이어그램, Design→Code 등
html.to.design이 더 편리한 건 사실이다. 확장프로그램 클릭 한 번이면 끝나니까. 하지만 자동화가 가능하다는 점, 그리고 Figma MCP가 캡처 외에도 다이어그램 변환(generate_diagram)이나 디자인에서 코드 추출(get_design_context) 같은 기능을 제공한다는 점에서 범용성이 훨씬 높다.
마무리
MCP 생태계가 기존 유료 도구들을 빠르게 대체하고 있다는 걸 체감했다. 캡처 속도나 SPA 호환성에서 아직 개선의 여지가 있지만, "프로젝트 소스를 읽어서 HTML을 직접 생성한다"는 접근 방식 자체가 확장프로그램 기반 도구와는 근본적으로 다른 가능성을 열어준다. 무엇보다 월 18달러나 내가면서 써야했던 플러그인을 공짜로 쓰는 거니, 얼마나 이득인가.
