Figma엔 없는데 코드엔 있는 상태, 혹은 디자인은 준비되어 있지만 코드가 빠르게 팔로업하지 못하는 상태. 협업하는 팀이라면 누구나 겪어봤을 이 간극을 Figma 엔지니어 Alex와 디자이너 Gui가 Claude Code + Figma MCP로 좁혀가는 방식을 공개했습니다.
🔗 Figma MCP × Claude Code: 무엇이 달라졌을까?
실제 현장에서는 코드베이스가 디자인 파일보다 훨씬 앞서 나가는 경우가 많습니다. 코드에는 존재하지만 Figma 파일에는 아예 없는 상태(state)나 워크플로우가 쌓여가는 것이 고질적인 문제였습니다.
Figma MCP(Model Context Protocol)를 Claude Code와 연결하면, AI 에이전트가 코드베이스를 직접 읽고 해당 상태들을 자동으로 Figma 문서에 불러올 수 있습니다.
실제 시연 예시: "회원가입 플로우의 다섯 가지 상태를 Figma로 보내줘"라고 지시하면, Claude가 코드베이스에서 해당 상태를 파악해 각각을 Figma 캔버스에 나란히 배치합니다. 디자이너는 스크린샷이 아닌 실제 편집 가능한 컴포넌트로 바로 작업을 시작할 수 있습니다.
🔄 양방향 동기화: 코드 → Figma → 코드
이 워크플로우는 단방향이 아닙니다.
① 코드 → Figma: Claude Code가 로컬 앱의 UI 상태를 Figma 문서로 가져옴
② Figma에서 디자인 수정: 디자이너가 직관적으로 요소를 편집
③ Figma → 코드: MCP를 통해 수정된 디자인을 다시 로컬 코드베이스에 반영
과거에는 디자이너가 PSD 파일을 만들거나 CSS 수치를 직접 전달해야 했던 과정이 자동화됩니다. Alex는 "이제는 브라우저와 코드 창을 같이 열어 두지 않아도 된다. 터미널 안에서 대부분의 작업이 끝난다"고 말했습니다.
디자이너 × 엔지니어 실시간 협업MCP가 커넥터 역할을 하면서, 디자이너와 엔지니어가 동일한 앱의 서로 다른 표현(Figma vs. 코드)에서 동시에 작업할 수 있게 되었습니다. 팀원이 실시간으로 프로토타입을 만들고 즉각 피드백을 주고받는 에너지가 되살아났으며, PR이나 화면 공유만으로는 얻기 어려운 몰입감 있는 협업 경험을 제공합니다.
⚙️ Claude Code 멀티 인스턴스 활용법
Alex는 현재 Claude Code 인스턴스를 동시에 2~5개 실행하며 병렬 작업을 처리한다고 합니다. 인스턴스 1은 코드베이스 ↔ Figma 동기화, 인스턴스 2는 탐색적 코딩 및 프로토타이핑, 인스턴스 3은 기술 사양 문서 작성에 활용됩니다. 또한 /ship 같은 AI 스킬(커스텀 스킬)을 만들어, 코드 푸시 전 테스트 통과 → 린트 검사 → CI 확인까지 전 과정을 자동화합니다.
*여기서 말하는 인스턴스는 Claude Code를 실행하는 터미널 창 하나라고 보면 이해하시면 됩니다
Claude Code는 터미널에서 claude 명령어로 실행하는 AI 코딩 에이전트인데, 터미널 창(또는 탭)을 여러 개 열면 각각이 독립된 "인스턴스"가 됩니다. 각 인스턴스는 서로 다른 작업을 동시에, 독립적으로 처리합니다.
쉽게 비유하면, 개발자를 동시에 3명 고용해서 각자 다른 일을 시키는 것과 같습니다.
- 인스턴스 1 → "너는 Figma ↔ 코드 동기화만 담당해"
- 인스턴스 2 → "너는 새 기능 프로토타이핑만 해"
- 인스턴스 3 → "너는 기술 문서만 써"
각 인스턴스는 별도의 컨텍스트(대화 맥락)를 가지고 있어서 서로 간섭하지 않고 병렬로 돌아갑니다. Alex가 "터미널 창 하나에서 대부분의 작업이 끝난다"고 한 것도 이런 멀티 인스턴스 구조 덕분입니다.
🛠️ 지금 바로 써볼 수 있는 GitHub 레포
제가 해외 유튜버, X 인플루언서를 팔로업하면서 모으고, 적용해본 Claude Code로 디자인 퀄리티를 한 단계 높일 수 있는 오픈소스 프로젝트들을 소개합니다. 솔직히 이중에 OO스킬&레포가 가장 좋다! 라고 단언할 수는 없습니다. 직접 사용해보면서 본인이 구축하고자 하는 워크플로우, 스킬에 맞는 방법을 찾아나가시는걸 추천드립니다 :)
① grab/cursor-talk-to-figma-mcp
Claude Code(또는 Cursor)와 Figma를 WebSocket으로 연결해, AI가 Figma 문서를 읽고 직접 수정할 수 있게 합니다. 텍스트 일괄 교체, 컴포넌트 인스턴스 오버라이드 전파, 프로토타입 플로우 시각화 등 실전 자동화 기능이 풍부합니다. 설치는 bun setup 한 줄로 끝납니다.
② noemuch/bridge
Claude Code를 "디자인 시스템을 속속들이 아는 디자이너"로 만들어주는 도구입니다. Claude가 raw Figma API 스크립트를 직접 쓰는 대신, 선언적인 YAML 스펙(CSpec)을 작성하면 내장 컴파일러가 토큰을 해석하고 Figma API 규칙을 자동 적용해 코드를 생성합니다. /design-workflow make <화면 설명> 명령 하나로 스펙 작성 → 컴파일 → Figma 실행까지 자동으로 진행됩니다.
③ redongreen/uSpec
UI 컴포넌트를 설명하면 AI 에이전트가 Figma 파일을 분석해 API 스펙, 컬러 어노테이션, 구조 스펙, 스크린 리더 접근성 스펙, 모션 스펙 등 6가지 유형의 문서를 Figma 캔버스에 직접 생성해줍니다. Claude Code, Cursor, Codex 모두 지원하며, 디자이너가 개발팀에 전달할 핸드오프 문서 작성 시간을 대폭 줄여줍니다.
④ ui-ux-pro-max-skill
Claude Code, Cursor, Windsurf, Codex 등 주요 AI 코딩 어시스턴트에 설치해 쓰는 UI/UX 전문 AI 스킬입니다. 가장 큰 특징은 v2.0에서 새로 추가된 디자인 시스템 자동 생성 기능입니다. "뷰티 스파 랜딩 페이지 만들어줘"처럼 자연어로 요청하면, 161개 업종 규칙, 67개 UI 스타일, 161개 컬러 팔레트, 57개 폰트 조합을 기반으로 해당 프로덕트에 최적화된 컬러, 타이포그래피, 레이아웃 패턴, 피해야 할 안티패턴까지 한 번에 제안합니다.
⑤ jakubkrehel/make-interfaces-feel-better
"Details that make interfaces feel better"라는 아티클을 기반으로 만든 Agent Skill입니다. Claude Code, Codex 등 AI 코딩 어시스턴트에 설치하면, UI 컴포넌트를 만들거나 프론트엔드 코드를 리뷰할 때 이 디테일들을 자동으로 적용해줍니다.
⑥ anthropics/skills — frontend-design
Anthropic이 직접 공개한 공식 Claude Skills 레포입니다. Claude Code, Claude.ai, Claude API 어디서나 /plugin marketplace add anthropics/skills로 설치해 쓸 수 있으며, 그 중 frontend-design 스킬은 "평범한 AI 결과물"을 의도적으로 거부하도록 설계된 UI 생성 지침서입니다.
제가 오늘 뉴스레터에서는 클로드 코드-피그마 중심으로 설명했지만, 영상에서 더 많은 내용을 다루니 시청해보시는걸 추천드립니다 :)
의견을 남겨주세요