개발자가 AI로 만든 UI, 디자이너한테 보여주려면 배포하고 스크린샷 찍어서 보내야 했잖아요. 이제 코드를 피그마에 넣으면 편집 가능한 디자인이 됩니다.
이게 뭔데?
2026년 2월 17일, Figma가 Anthropic과 손잡고 "Code to Canvas"를 발표했어요. 이름 그대로, 코드를 캔버스(피그마)로 가져오는 기능이에요.
원리는 이래요. Claude Code 같은 AI 코딩 도구에서 만든 코드를 실행하면, 브라우저에 렌더링된 UI를 자동으로 캡처해서 피그마 캔버스에 편집 가능한 프레임으로 변환해줘요. 단순 스크린샷이 아니라, 레이어가 분리된 진짜 피그마 컴포넌트로요.
이게 왜 큰일이냐면요. 지금까지 Figma MCP는 "디자인→코드" 방향만 가능했어요. 피그마에서 디자인하면 AI가 코드로 변환해주는 거죠. 근데 이번에 "코드→디자인" 방향이 추가되면서, 디자인↔코드 양방향 라운드트립이 완성된 거예요.
실제로 한국 개발자 우빈 님은 Figma MCP + Claude Code 조합으로 회원가입 플로우 5개 페이지를 셋업 포함 10분 만에 개발했어요. 코드 품질도 Feature 기반 아키텍처가 깔끔하게 유지됐고, 재사용 컴포넌트 분리까지 자동으로 됐다고요.
Dylan Field(Figma CEO)는 "AI가 디자인을 대체하는 게 아니라, 디자이너와 개발자의 협업을 강화하는 것"이라고 강조했어요. 'SaaSpocalypse(소프트웨어의 종말)'라는 신조어까지 등장하고 피그마 주가도 급락한 상황에서, 피그마는 AI를 위협이 아닌 기회로 전환하겠다는 전략인 거죠.
Felix Lee(ADPList)는 더 직접적으로 짚었어요 — "기존 디자인→프로덕션 워크플로우가 제품 출시를 3배나 지연시키고 있다"며, 이 양방향 워크플로우가 그 병목을 해결한다고 분석했어요.
뭐가 달라지는 건데?
기존에는 디자이너가 피그마에서 디자인하고, 개발자가 그걸 코드로 옮기는 일방통행이었어요. 개발 결과물을 디자이너가 검토하려면? 배포하고, 스크린샷 찍고, 슬랙에 공유하고… 피드백 한 바퀴 도는 데 며칠씩 걸렸죠.
| 기존 워크플로우 | Code to Canvas | |
|---|---|---|
| 디자인 리뷰 | 배포 → 스크린샷 → 피그마에 수동 첨부 | 코드 실행 → 자동 캡처 → Figma 프레임 |
| 수정 흐름 | 디자이너 요청 → 개발자 코드 수정 → 재배포 | Figma에서 바로 수정 → 코드 반영 |
| 피드백 루프 | 3~5일 | 당일 완료 |
| 멀티스크린 | 화면마다 수동 캡처 | 한 번에 여러 화면 자동 캡처 |
Figma는 지금 AI 관련 기능이 세 가지 축으로 돌아가고 있어요. 각각 역할이 다르니까 헷갈리지 마세요.
| 기능 | 방향 | 설명 |
|---|---|---|
| Figma MCP (Dev Mode) | 디자인 → 코드 | 피그마 디자인을 AI가 읽어 코드 생성 |
| Figma Make | 프롬프트 → 디자인 | 텍스트 설명으로 디자인 자동 생성 |
| Code to Canvas | 코드 → 디자인 | 프로덕션 코드를 편집 가능한 피그마 프레임으로 변환 |
세 기능을 조합하면 "디자인→코드→디자인→코드" 무한 루프가 가능해져요. 디자이너와 개발자가 각자의 도구에서 작업하면서도 실시간으로 싱크가 맞는 거예요.
핵심 포인트
Code to Canvas는 단순 스크린샷이 아니에요. 레이어가 분리된 편집 가능한 피그마 프레임으로 변환돼요. 디자이너가 색상, 간격, 텍스트를 바로 수정할 수 있어요.
핵심만 정리: 시작하는 법
지원 클라이언트는 Claude Code, Cursor, VS Code, Windsurf, Codex 등이에요. 여기서는 Claude Code 기준으로 안내할게요.
- Figma 데스크톱 앱 준비
최신 버전으로 업데이트하세요. 좌측 상단 Figma 아이콘 → Preferences →Enable Dev Mode MCP Server체크. Professional Plan 이상이 필요해요. - Claude Code에 MCP 서버 연결
터미널에서 한 줄이면 돼요.
claude mcp add --transport http figma https://mcp.figma.com/mcp - 코드 실행 → 피그마로 캡처
코드를 실행한 뒤 Claude Code에 "이 화면을 Figma에 넣어줘"라고 프롬프트하세요. 브라우저 UI가 자동 캡처되어 편집 가능한 피그마 프레임으로 변환돼요. -
Figma에서 편집 & 코드 반영
피그마에서 색상, 레이아웃, 텍스트를 직접 수정하세요. 수정 사항은 Claude Code를 통해 다시 코드에 반영할 수 있어요. 이게 라운드트립이에요.
주의
현재 Code to Canvas 라운드트립에서 도구 3개 이상, 컨텍스트 스위치 5회 이상이 되면 성능이 떨어질 수 있어요. 복잡한 작업은 단계를 나눠서 진행하는 걸 추천해요.
