Figma x Anthropic 'Code to Canvas': AI가 만든 코드를 디자인으로 변환하다

AI 코딩과 디자인의 경계를 허물다

Figma가 2026년 2월 17일 Anthropic과의 파트너십을 통해 'Code to Canvas' 기능을 발표했다. 이 기능은 AI 에이전틱 코딩 도구로 생성한 인터페이스 코드를 Figma의 캔버스에서 완전히 편집 가능한 디자인으로 변환한다.

기존에 개발자가 AI 코딩 도구로 만든 프로토타입은 디자이너에게 전달되면 처음부터 다시 디자인해야 하는 경우가 많았다. Code to Canvas는 이 단절을 해소하여, AI가 생성한 코드를 디자인 에셋으로 직접 가져올 수 있게 했다.

Code to Canvas 작동 방식

Code to Canvas의 워크플로우는 다음과 같다.

1. 사용자가 Claude Code를 통해 프롬프트로 인터페이스를 구축한다
2. 작동하는 인터페이스를 Figma의 캔버스로 직접 가져온다
3. 디자인 팀이 Figma 내에서 자유롭게 편집하고 수정한다
4. 여러 디자인 옵션을 나란히 비교하며 최적안을 결정한다

핵심은 개발자가 만든 코드 기반 프로토타입을 디자이너가 처음부터 다시 만들 필요 없이, Figma의 강력한 편집 도구로 바로 정제할 수 있다는 점이다.

Claude Sonnet 4.6과의 시너지

이번 파트너십은 Anthropic의 Claude Sonnet 4.6 출시와 동시에 발표되었다. Sonnet 4.6은 디자인 역량이 크게 강화된 모델로, 코딩뿐 아니라 UI/UX 설계까지 아우르는 능력을 갖추었다.

Sonnet 4.6은 SWE-bench Verified에서 79.6%를 기록했으며, 컴퓨터 사용 벤치마크인 OSWorld에서 72.5%를 달성했다. 이러한 성능 향상이 Code to Canvas의 정확한 코드-디자인 변환을 뒷받침한다.

디자인-개발 협업의 패러다임 전환

Code to Canvas는 단순한 파일 변환 도구가 아니다. AI 시대의 디자인-개발 협업 방식을 근본적으로 변화시킨다.

기존 워크플로우에서는 디자이너가 Figma에서 디자인하고, 개발자가 이를 코드로 구현하며, 수정 사항이 있으면 다시 디자이너에게 돌아가는 순환 구조였다. 이제는 개발자(또는 AI)가 먼저 작동하는 코드를 만들고, 디자이너가 이를 Figma에서 직접 다듬는 역방향 워크플로우가 가능해졌다.

Figma의 AI 전략

Figma는 2024년 AI 기능 표절 논란 이후 AI 전략을 신중하게 재정립해왔다. 이번 Anthropic과의 파트너십은 자체 AI 모델 개발 대신 업계 최고의 AI 기업과 협력하는 방향을 택했음을 보여준다.

Code to Canvas는 Figma가 단순한 디자인 도구에서 'AI 시대의 디자인-개발 허브'로 진화하려는 전략의 일환이다.

전망

AI 코딩 도구의 급성장으로 개발자가 AI로 프로토타입을 빠르게 만드는 것이 일상화되고 있다. 하지만 이렇게 만들어진 인터페이스의 디자인 품질을 전문 디자이너가 다듬는 과정은 여전히 필수적이다. Code to Canvas는 이 두 세계를 자연스럽게 연결하는 다리 역할을 할 것으로 기대된다.

향후 이 기능이 다른 AI 코딩 도구(Cursor, Windsurf, GitHub Copilot 등)로도 확장될지 주목된다.