처음 이 조합을 써봤을 때 솔직히 반신반의했다.
AI가 Figma를 “직접 읽는다”는 말이 과장처럼 들렸다. 그런데 실제로 연결해보니 달랐다. Claude가 내 Figma 파일의 컴포넌트 이름, 오토레이아웃 구조, 스페이싱 값을 정확히 인식하고 있었다. 이건 단순히 스크린샷을 넘기는 수준이 아니었다.
이 글은 그 경험을 바탕으로 쓴다.
먼저 알아야 할 것: 연동 방식이 두 가지다
Claude와 Figma를 연결하는 방법은 현재 크게 둘로 나뉜다.
1) MCP 방식 — Claude (Desktop 또는 Code)와 Figma를 직접 연결
- Claude가 Figma 파일을 실시간으로 읽고, 수정하고, 코드를 생성한다.
- 설정이 조금 필요하지만, 양방향으로 작동한다.
2) Claude Design → Figma 내보내기 방식
- 2026년 4월 출시된 Claude Design에서 만든 결과물을 HTML로 내보낸 뒤 Figma로 옮기는 방식.
- 설정이 거의 없다. 대신 흐름이 단방향이다.
두 방식 모두 장단점이 있다. 순서대로 설명한다.
1부. MCP로 Claude와 Figma 연결하기
MCP가 뭔지부터
MCP(Model Context Protocol)는 Anthropic이 개발한 개방형 표준 프로토콜로, AI 모델과 소프트웨어를 연결하는 통신 규약이다. 흔히 “AI 분야의 USB-C 커넥터”에 비유된다. Brunch
쉽게 말하면, Claude가 Figma 안에 있는 데이터를 직접 꺼내 쓸 수 있게 해주는 다리다.
MCP 없이는 Claude가 내가 붙여넣은 내용만 알 수 있다. MCP가 있으면 파일 시스템, 데이터베이스, Figma 파일 등을 실시간으로 읽고 작업할 수 있다. AI Blogs
예전에는 Figma 스크린샷을 캡처해서 Claude에 올리고, “이 버튼 색이 뭐야?” 같은 걸 물어봤다. 이제는 그럴 필요가 없다. 파일을 연결해두면 Claude가 직접 열어본다.
연결 방법 A: Claude Desktop + Figma Desktop (비개발자도 가능)
가장 진입장벽이 낮은 방법이다. 터미널 명령어 없이 설정할 수 있다.
준비물
- Claude Desktop 앱 (유료 플랜 필요)
- Figma Desktop 앱 (브라우저 버전은 연결이 불안정하다)
- Figma Professional 이상 플랜 (Dev Mode 사용 필요)
설정 순서
① Figma Desktop에서 MCP 서버 활성화
Figma Desktop을 실행한다. 상단 메뉴에서 Figma → Preferences → Enable Dev Mode MCP Server를 켠다. 이걸 켜야 Claude가 Figma에 접근할 수 있다.
Figma Desktop 앱을 실행한 뒤, 공식 문서를 따라 Figma Desktop Server를 활성화하면 된다. 이 단계는 비교적 간단하며, Figma 브라우저 버전보다 Desktop 버전을 쓰는 것을 권장한다. 브라우저도 연결은 가능하지만 Desktop 버전에 비해 안정성이 떨어진다. Brunch
② Claude Desktop에서 MCP 연결 확인
Claude Desktop을 실행한다. Settings → Developer로 이동하면 Figma MCP 서버가 Running 상태인지 확인할 수 있다.
Claude Code에서 Settings → Developer로 이동해 Figma Desktop MCP가 실행 중(Running)인지 확인하면 된다. Brunch
③ Figma 파일 링크로 작업 시작
연결이 완료되면, Claude 대화창에 Figma 파일 링크를 붙여넣고 바로 작업을 요청할 수 있다. "이 파일에서 카드 컴포넌트 구조 설명해줘" 같은 식으로.
연결 방법 B: Claude Code + Figma (개발자 협업용)
코드와 디자인을 동시에 다루는 워크플로우에 적합하다. 개발자와 함께 쓰거나, 직접 프론트엔드 코드까지 뽑아내고 싶을 때 효과적이다.
터미널에서 명령어 한 줄로 연결
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp위 명령어를 터미널에 붙여넣고 실행하면 된다. 완료 후 /mcp를 입력하면 메뉴가 나타나고, Discover에서 Installed로 이동해 Figma MCP 서버 인증을 진행하면 된다. 브라우저 창이 열리면서 Figma 접근 권한 허용 절차가 진행된다. Substack
또는 Claude Code 채팅창에서 직접 입력해도 된다.
claude plugin install figma@claude-plugins-official연결이 완료되면 Claude에 ‘Authentication successful. Connected to figma’가 표시된다. Figmapedia
연결하면 실제로 뭘 할 수 있나
연결 후 파이프라인은 양방향으로 작동한다. Figma에서 Claude 방향으로는, 컴포넌트 구조, 스페이싱 값, 보더 라디우스, 폰트 크기, 컬러 토큰, 오토레이아웃 설정, 레이어 계층까지 읽어들여 코드로 정확하게 변환해준다. Claude에서 Figma 방향으로는, Claude가 만든 UI를 편집 가능한 Figma 프레임으로 캡처해 넣어준다. 실제 레이어로 구성되어 있어 바로 수정하거나 복제할 수 있다. Substack
디자이너 입장에서 가장 체감 되는 것은 맥락 설명을 반복하지 않아도 된다는 점이다.
예전 방식은 이랬다.
“이 버튼은 Primary 버튼이고, 색상은
#2563EB이고, 패딩은 상하 12px, 좌우 20px이고, 보더 라디우스는 8px야. 이 스타일로…”
MCP 연결 후엔 그냥 Figma 링크 하나 던지면 된다. Claude가 알아서 읽는다.
한계도 솔직히 말하면
- Figma Professional 이상 플랜이 없으면 Dev Mode를 못 쓴다. 공식 MCP는 Dev Mode가 필요하다. 무료 계정 사용자라면 비공식 오픈소스 플러그인(
claude-talk-to-figma-mcp)을 써야 하는데, 설정이 훨씬 복잡해진다. - 현재는 Figma → 코드 방향이 더 안정적이다. 코드 to Figma 같은 양방향 흐름은 현재 Claude Code에서 가장 안정적으로 구현되며, Cursor나 Windsurf 등에서는 기능 차이나 제한이 있다. Litmers
- 디자인 시스템 정리가 먼저다. 연동 효과는 기존 디자인 시스템 완성도에 비례한다. 가이드라인이 불명확하거나 파편화된 팀은 연동 전 정비가 먼저다. 레이어 이름이
Frame 432,Rectangle 7이런 식이면 Claude도 헤맨다. 네이밍 정리가 선행되어야 한다. Dxtalk
2부. Claude Design에서 Figma로 가져오기
Claude Design이 뭔지
Claude Design은 Anthropic이 2026년 4월 17일 출시한 AI 비주얼 창작 도구다. Claude Opus 4.7 모델을 기반으로 하며, claude.ai 좌측 내비게이션의 팔레트 아이콘을 통해 접근할 수 있다. Digit2sight
자연어 프롬프트만으로 디자인 시안, 프로토타입, 슬라이드 같은 실무 결과물을 만들 수 있는 대화형 AI 디자인 도구로, 발표 당일 Figma 주가가 약 7% 하락할 정도로 업계의 관심이 쏠렸다. Elancer
기존 Claude가 텍스트와 코드 중심이었다면, Claude Design은 시각적인 결과물에 특화된 전용 모드다.
Claude Design → Figma로 옮기는 방법
Claude Design 자체에는 아직 Figma 직접 내보내기 버튼이 없다. 현재 가장 많이 쓰는 방법은 Anima라는 Figma 플러그인을 활용하는 방식이다.
순서
- claude.ai에 접속해 좌측 팔레트 아이콘 클릭 → Claude Design 모드 진입
- 원하는 화면을 프롬프트로 생성한다
- 완성된 결과물에서
Share→Export as standalone HTML선택 - Figma에서 Anima 플러그인 실행
- HTML 파일을 불러오면 Figma 편집 가능한 레이어로 변환된다
Anima Figma 에이전트는 전문 디자이너가 Claude Design에서 Figma로 이동해 편집 가능한 캔버스에서 계속 작업할 수 있도록 도와준다. Anima
Claude Design의 실제 강점
온보딩 시 디자인 시스템 연동이 가능하다.
온보딩 과정에서 코드베이스와 디자인 파일을 읽어 디자인 시스템을 구축할 수 있기 때문에, 이후 프로젝트마다 일반적인 플레이스홀더 대신 실제 컬러, 타이포그래피, 컴포넌트를 사용하게 된다. Anima
한 번 설정해두면 매번 “우리 Primary 컬러는 이거야” 같은 설명을 반복하지 않아도 된다.
Claude Code와 연결하면 코드까지 바로 나온다.
디자인이 완성되면 Claude Design이 핸드오프 번들을 자동으로 생성할 수 있다. 이 번들에는 디자인 의도와 컴포넌트 구조, 스타일 정보가 정리되어 있어서 Claude Code에 한 번의 지시로 전달할 수 있다. “여기 이 번들을 기반으로 Next.js 프로젝트에 구현해줘” 정도의 명령이면 실제 코드로 옮기는 작업이 시작된다. Daleseo
디자이너가 Figma에서 시안을 만들고, 개발자가 그걸 다시 해석하는 과정에서 생기는 갭이 여기서 상당히 줄어든다.
Claude Design의 현실적인 한계
직접 써보고 느낀 것들이다.
- 아직 Research Preview 단계다. Claude Design은 현재 연구 프리뷰(Research Preview) 단계이며, 향후 몇 주에 걸쳐 모든 유료 사용자에게 순차적으로 공개될 예정이다. 기능이 갑자기 바뀌거나 제한될 수 있다. Apiyi.com Blog
- Figma로 넘어갈 때 레이어 정리가 필요하다. HTML → Figma 변환이다 보니, 자동 생성된 레이어 구조가 실무에서 바로 쓰기엔 지저분하다. 이후 정리 작업은 디자이너 몫이다.
- 복잡한 인터랙션은 아직 약하다. AI 모델은 여전히 사람의 공감 능력이 필요한 깊이 있는 UX 로직에서는 어려움을 겪는다. 기본 레이아웃과 시각 구조는 잘 잡아주지만, 복잡한 상태 변화나 엣지 케이스는 직접 다듬어야 한다. Skypage
3부. 디자이너로서 이 도구를 어떻게 쓰면 좋을까
경력을 쌓으면서 느낀 건, 좋은 도구는 내 판단을 대체하는 게 아니라 내가 판단할 시간을 더 만들어준다는 것이다.
Claude + Figma 연동도 마찬가지다.
지금 당장 효과적인 사용 시나리오:
- 초기 와이어프레임 초안 생성 → Claude Design으로 빠르게 뽑고, Figma에서 디테일 다듬기
- 디자인 스펙 전달 → Figma MCP 연결 후 “이 컴포넌트 패딩이 몇이야?”를 Claude에게 물어보며 개발자와 소통
- 디자인 시스템 문서화 → Claude가 Figma 파일 읽고 컴포넌트 사용 가이드 초안 생성
- 핸드오프 준비 → Claude Design에서 핸드오프 번들 생성 → Claude Code로 넘겨서 프론트엔드 코드 출력
이건 Claude한테 맡기지 마라:
- 서비스의 핵심 UX 흐름 결정. 이건 아직 사람이 해야 한다.
- 사용자 리서치 기반의 의사결정. Claude는 데이터를 줘야 분석하지, 현장 감각은 없다.
- 디자인 시스템의 최초 구축. 정리가 안 된 상태에서 연동하면 쓰레기가 더 빠르게 만들어질 뿐이다.
마무리
솔직히 말하면, 이 조합이 Figma를 대체하진 않는다.
적어도 지금은. Claude Design이 나왔을 때 Figma 주가가 떨어졌지만, 실무에서 써보면 여전히 Figma는 디자이너의 메인 작업 공간이다. Claude는 그 앞과 뒤를 더 빠르게 만들어주는 역할에 가깝다.
그럼에도 이 연동을 지금 세팅해두는 게 의미 있는 이유는, 워크플로우는 습관이기 때문이다. 지금 세팅해두고 조금씩 쓰다 보면, 6개월 뒤에는 이게 없는 방식으로 돌아가기 싫어지는 시점이 온다.
한번 연결해보고, 직접 판단해보길 권한다.
참고 링크
- Figma MCP 공식 문서: https://developers.figma.com/docs/figma-mcp-server/local-server-installation/
- Claude Design 접근: https://claude.ai (좌측 팔레트 아이콘)
- Anima 플러그인 (Claude Design → Figma): Figma 플러그인 마켓에서 검색