Figma가 Claude Code와의 통합을 발표했다. 코드에서 작동하는 UI를 캡처해서 편집 가능한 Figma 프레임으로 변환하는 기능이다. 개발자가 만든 프로토타입을 디자이너가 바로 편집할 수 있게 된 것이다.
왜 이게 중요한가
20년 가까이 개발을 해오면서 디자이너와의 협업이 가장 어려운 부분 중 하나였다. 디자인 시안과 구현된 UI가 다르면 서로 답답하다. “이거 왜 이래요?” “원래 이렇게밖에 안 돼요.”
Claude Code to Figma는 이 갭을 줄인다. 개발자가 코드로 만든 실제 UI를 Figma로 가져올 수 있으니까. 스크린샷이 아니라 편집 가능한 벡터로. 디자이너가 바로 수정하고 개선안을 제시할 수 있다.
라운드트립의 완성
Figma는 이미 MCP 서버를 통해 Figma 디자인을 코드로 변환하는 기능을 제공하고 있었다. 이번 업데이트로 반대 방향도 가능해졌다. 코드 → 디자인 → 코드. 완전한 라운드트립.
예전에 Dreamweaver가 꿈꿨던 것이 드디어 실현되는 건가. 물론 방식은 완전히 다르지만, WYSIWYG의 궁극적 목표는 같다. 디자인과 코드가 서로 막힘없이 변환되는 것.
협업의 새로운 형태
Figma 블로그에서 인상적인 구절이 있었다. “Code is powerful for converging. The canvas is powerful for diverging.” 코드는 수렴에 강하고, 캔버스는 발산에 강하다.
개발자는 한 번에 하나의 상태를 다룬다. 브랜치, 빌드, 실행. 선형적이다. 디자이너는 여러 옵션을 동시에 펼쳐놓고 비교한다. 병렬적이다. 두 방식 모두 필요하다. 수렴과 발산을 오가며 좋은 제품이 만들어진다.
회의적인 시선
물론 완벽하진 않을 것이다. CSS의 복잡한 레이아웃이 Figma에서 얼마나 정확하게 표현될까. 반응형 디자인은? 애니메이션은? 아직 많은 한계가 있을 것이다.
하지만 방향은 맞다. 도구의 경계가 사라지는 방향. 개발자와 디자이너가 같은 언어로 대화하는 방향. 마흔이 넘어 새로운 도구를 배우는 게 귀찮아질 법도 한데, 이건 배워볼 만한 것 같다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
