생성형 AI 도구를 활용하여 작성 및 편집된 노트입니다.
피그마×앤트로픽 ‘Code to Canvas’로 클로드 코드가 편집 가능한 디자인이 된다
최근 Figma가 Anthropic과 손잡고 ‘Code to Canvas(Claude Code to Figma)’를 공개했습니다. AI가 만든 UI 코드를 “그림”으로 끝내지 않고, Figma 안에서 레이어까지 편집 가능한 디자인으로 바꿔준다는 점에서 제품팀 협업 방식이 한 단계 바뀔 신호로 읽힙니다1.
이 글에서는 “클로드 코드 → 피그마”가 정확히 무엇을 해결하는지, 실제 팀 워크플로우가 어떻게 달라지는지, 그리고 지금 당장 써먹을 팁까지 정리해봅니다.
Code to Canvas란? “코드에서 캔버스로”가 필요한 이유
요즘은 Claude Code 같은 에이전트형 코딩 도구로 버튼, 카드, 리스트 같은 화면을 순식간에 뽑아내는 게 어렵지 않습니다. 문제는 그 다음입니다. 코드는 한 번에 한 화면(한 상태)으로 ‘수렴’하기는 좋지만, 여러 안을 펼쳐놓고 비교하며 ‘발산’하기에는 불편하죠.
Figma가 말하는 Code to Canvas의 핵심은 여기입니다. 브라우저에 렌더링된 실제 UI(프로덕션/스테이징/로컬호스트)를 캡처해 Figma 캔버스의 “프레임 + 편집 가능한 레이어”로 옮깁니다1. 즉, “스크린샷 공유”가 아니라 “다 같이 만질 수 있는 디자인 재료”로 바뀌는 겁니다.
개발자·디자이너 협업: 스크린샷 지옥에서 ‘공동 편집’으로
현실의 협업은 대체로 이렇습니다. 개발자는 AI로 프로토타입을 만들고, 디자이너는 스크린샷을 받아서 “여기 padding 8px만 줄여주세요”라고 코멘트합니다. 그러면 개발자는 또 코드를 고치고… 어느새 ‘대화’가 아니라 ‘왕복 배송’이 됩니다.
Code to Canvas는 그 왕복을 줄입니다. 캔버스에 들어온 화면은 팀이 바로 복제해 A안/B안을 나란히 놓고 비교할 수 있고, 주석을 달아 의사결정을 빠르게 모읍니다2. 특히 다단계 플로우(가입, 결제, 온보딩)처럼 화면이 여러 장인 기능에서, 한 세션에 여러 화면을 캡처해 흐름의 맥락을 유지할 수 있다는 점이 실무적으로 큽니다1.
여기서 재미있는 포인트는 “AI 코딩이 디자인을 없애는가?”에 대한 Figma의 답입니다. 오히려 에이전트 코딩이 보편화될수록, 제품의 차별점은 더 ‘느낌’과 ‘명확함’ 같은 디자인의 영역으로 이동한다고 봅니다3. 즉, 코드는 빨라질수록 “무엇을 만들지”를 고르는 과정이 더 중요해지고, 그 선택의 무대가 캔버스라는 주장입니다.
실무 활용법: 더 빨리 만들되, 첫 안에 갇히지 않는 법
이 기능이 진짜 빛나는 순간은 “첫 결과물”이 나온 직후입니다. AI가 만든 첫 화면은 대개 그럴듯하지만, 그대로 출시하면 어딘가 어색하죠. 이때 필요한 건 재구현이 아니라 ‘탐색’입니다.
캔버스에서 프레임을 복제해 정보 구조를 바꿔보고, 컴포넌트 간격을 조정하고, 문구 톤을 다듬는 식의 실험을 코드 수정 없이 먼저 해볼 수 있습니다1. 버려진 안도 파일 안에 남기 쉬워서, 나중에 “그때 B안이 더 나았는데” 같은 회고성 후회를 줄이는 데도 도움이 됩니다.
또 하나의 포인트는 “왕복(라운드트립)”입니다. Figma는 MCP 서버를 통해 반대로 Figma 링크를 코드 생성 프롬프트에 넣어, 디자인 맥락을 가진 코드 작성 흐름도 강조합니다1. 쉽게 말해, 이제 ‘코드 → 디자인’만이 아니라 ‘디자인 → 코드’도 더 매끈해지려는 방향입니다.
시사점
Code to Canvas는 “AI가 만든 코드를 예쁘게 정리해주는 기능”을 넘어, 제품팀의 결정 구조를 바꾸려는 시도에 가깝습니다. AI가 프로토타입을 빠르게 만들수록, 팀은 더 자주 ‘방향’을 점검해야 하고, 그 점검은 비교·주석·공동 편집이 쉬운 캔버스에서 가장 효율적입니다12.
실용적으로는 이렇게 가져가면 좋습니다. AI로 UI를 만들 때는 완성도를 올리려 애쓰기보다, 빨리 “작동하는 화면”을 만든 뒤 Code to Canvas로 옮겨 팀이 한 자리에서 여러 안을 펼쳐보세요. 출시를 앞당기는 팀은 결국 “첫 안을 빨리 만든 팀”이 아니라 “더 나은 안을 빨리 고른 팀”이 될 확률이 높습니다.
참고
1Figma partners with Anthropic to launch Code to Canvas for editable designs from Claude Code
2Figma partners with Anthropic to turn AI-generated code into editable designs