디자이너 입장에서 가장 답답한 순간이 있어요. 개발자가 AI로 UI를 10분 만에 뚝딱 만들어 왔는데, 그게 코드 안에만 있는 거예요. 내 도구(피그마)에는 없어요. 색 하나, 간격 하나 고치고 싶어도 손을 못 대요. "여기 간격 좀 줄여주세요"라고 말로 설명하고, 개발자가 코드를 고치고, 다시 확인하고… 이 핑퐁이 끝이 없죠.
AI가 만드는 속도는 빨라졌는데, 디자이너는 오히려 워크플로우 밖으로 밀려난 거예요. 그런데 2026년 2월, 이 구조를 정확히 뒤집는 기능이 나왔어요.
코드가 거꾸로 디자인이 된다
Figma가 Anthropic과 손잡고 발표한 "Code to Canvas"예요. 이름 그대로, 코드를 캔버스(피그마)로 가져오는 기능이에요.
Claude Code 같은 AI 코딩 도구에서 만든 코드를 실행하면, 브라우저에 렌더링된 UI를 자동으로 캡처해서 피그마 캔버스에 편집 가능한 프레임으로 변환해줘요. 여기서 "편집 가능한"이 핵심이에요. 단순 스크린샷이 아니라, 레이어가 분리된 진짜 피그마 컴포넌트로 들어와요. 색상·간격·텍스트를 디자이너가 자기 손으로 바로 만질 수 있다는 뜻이에요.
왜 이게 사건이냐면요. 지금까지 Figma의 AI 연동은 "디자인→코드" 한 방향뿐이었어요. 피그마에서 디자인하면 AI가 코드로 바꿔주는 거죠. 이번에 "코드→디자인" 방향이 추가되면서, 앞에서 말한 그 답답한 일방통행이 드디어 양방향 라운드트립으로 완성됐어요.
핵심 포인트
Code to Canvas는 단순 스크린샷이 아니에요. 레이어가 분리된 편집 가능한 피그마 프레임으로 변환돼요. 디자이너가 색상, 간격, 텍스트를 바로 수정할 수 있어요.
그래서 현장에서 뭐가 바뀌나
말로 설명하면 추상적이니까, 실제 작업 흐름이 어떻게 달라지는지 한 표로 보여드릴게요. 왼쪽이 어제까지의 현실, 오른쪽이 지금이에요.
| 기존 워크플로우 | Code to Canvas | |
|---|---|---|
| 디자인 리뷰 | 코드에만 존재 → 디자이너 피그마에서 확인 불가 | 코드 실행 → 편집 가능한 Figma 프레임 자동 생성 |
| 수정 흐름 | 구두 피드백 → 개발자가 코드 수정 → 다시 확인 | 디자이너가 Figma에서 직접 수정 → 코드 반영 |
| 디자인 파일 싱크 | 코드 변경될 때마다 피그마 수동 업데이트 or 방치 | 코드 변경 → 피그마 자동 반영 |
| 피드백 정확도 | "여기 간격 좀 줄여주세요" (구두 설명) | 피그마에서 직접 수정해서 보여줌 |
효과는 숫자로도 나와요. ADPList의 Felix Lee는 "기존 디자인→프로덕션 워크플로우가 제품 출시를 3배나 지연시키고 있다"고 짚으면서, 이 양방향 흐름이 바로 그 병목을 푼다고 분석했어요. 실제로 한국 개발자 우빈 님은 Figma MCP + Claude Code 조합으로 회원가입 플로우 5개 페이지를 셋업 포함 10분 만에 구현했고, Feature 기반 아키텍처와 재사용 컴포넌트 분리까지 깔끔하게 유지됐다고 후기를 남겼어요.
헷갈리기 쉬운 세 가지를 먼저 정리
여기서 한 번 멈추고 짚을 게 있어요. Figma의 AI 기능은 지금 이름이 비슷해서 많이들 헷갈려요. 셋업하기 전에 이 셋을 구분해두면 "내가 지금 뭘 하고 있는지"가 명확해져요.
| 기능 | 방향 | 설명 |
|---|---|---|
| Figma MCP (Dev Mode) | 디자인 → 코드 | 피그마 디자인을 AI가 읽어 코드 생성 |
| Figma Make | 프롬프트 → 디자인 | 텍스트 설명으로 디자인 자동 생성 |
| Code to Canvas | 코드 → 디자인 | 프로덕션 코드를 편집 가능한 피그마 프레임으로 변환 |
세 기능을 조합하면 "디자인→코드→디자인→코드" 무한 루프가 가능해져요. 디자이너와 개발자가 각자 익숙한 도구에 머물면서도 실시간으로 싱크가 맞는 거예요. 오늘 셋업할 건 이 중 세 번째, Code to Canvas예요.
직접 켜보기: 4단계 셋업
지원 클라이언트는 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회 이상이 되면 성능이 떨어질 수 있어요. 복잡한 작업은 단계를 나눠서 진행하는 걸 추천해요.
피그마는 왜 자기 살을 깎는 기능을 냈을까
마지막으로 맥락 하나. 'SaaSpocalypse(소프트웨어의 종말)'라는 신조어가 돌고 피그마 주가까지 급락한 상황이었어요. AI가 디자인 툴을 위협한다는 공포가 한창이었죠. 그 와중에 피그마는 "코드가 디자인이 된다"는, 어찌 보면 자기 영역을 더 흔드는 기능을 내놨어요.
Dylan Field(Figma CEO)의 답은 분명했어요. "AI가 디자인을 대체하는 게 아니라, 디자이너와 개발자의 협업을 강화하는 것". 위협을 막는 대신 위협의 방향으로 먼저 달려가 판을 다시 짠 거예요. 디자이너가 워크플로우 밖으로 밀려나던 처음의 문제로 돌아가 보면 — 이건 디자이너를 다시 한가운데로 끌어오는 수예요.
