Claude Code와 Figma Mcp 연결

요새 핫한 클로드 코드와 피그마 MCP 연결과 관련해서 초기 세팅 방법

 

준비물

- 클로드 코드 유료 계정 : pro 계정 시 1달에 22달러

- 피그마 무료 계정

 

세팅환경

- PC / 윈도우 파워쉘 활용

 

Step1. 

- 파워쉘 실행 : 윈도우검색창에서 powershell 입력

Step2.

- https://code.claude.com/docs/ko/overview 에서 Native Install 섹션에서 Windows PowerShell: 로 설치

irm https://claude.ai/install.ps1 | iex

설치 완료 시

 

바탕화면에 새로운 폴더 1개 만든 후 (테스트용으로 claude 폴더 생성)

바탕화면 우측 클릭 후 터미널 실행

이러면 해당 폴더에서 claude code가 실행되며, 해당 폴더의 파일들에 대해 접근이 가능합니다.

 

이후 claude 입력 후 엔터 치면 클로드 실행 완료

 

claude 입력 후 엔터 시 아래와 같은 화면 표기

 

원하는 테마 선택 후, 엔터

 

클로드 어카운트 승인 관련해서 필요

구글 oauth 로 승인 완료 후 위와 같은 화면 나오면 성공

이후 엔터엔터 치다보면 해당 폴더 신뢰하는지 물어보고 엔터 치면 이제 대망의 figma를 연결할 수 있는 초기 화면이 나옴

 

위 과정 충족 시 아래와 같은 화면

 

/plugin 치면 플러그인 상태창이 나옴

인스톨쪽에 보면 아무것도 없는데 여기에 figma mcp를 연결할 예정

 

https://code.claude.com/docs/ko/mcp 에 가서

 

 

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

 

입력 후 설치

 

 

입력하면

 

나오고 관련해서 해석하면

 

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

● Figma MCP 서버를 추가하는 명령어를 실행하신 것 같습니다:

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

이 명령은 Claude Code에 Figma 원격 MCP 서버를 추가해서, Claude가 Figma 디자인과 직접 상호작용할 수 있게 합니다.

이걸로 할 수 있는 것:

• Figma 파일, 컴포넌트, 디자인 토큰에 접근
• Figma 디자인을 읽고 검사
• 코드와 Figma 레이아웃 간 연동

다음 단계:

1. Figma Personal Access Token이 필요할 수 있습니다 — 환경 변수로 설정하거나 MCP 설정에 구성하세요
2. 서버가 잘 추가됐는지 확인: claude mcp list
3. 변경 사항을 적용하려면 Claude Code를 재시작하세요

Figma MCP 도구의 인증 설정이나 사용 방법도 도와드릴까요?

 

그다음 부터는 그냥 한글로 도와달라고 해서 해달라고 하는대로 해줌

 

내가 쓸 피그마 계정에서 엑세스 토큰 발급

 

토큰 발급은 피그마 계정 설정 프로필에서 가능 권한은 파일에 대해 read write만 우선 줘봄 토큰을 잘 복사해두고 1day로 해봄 테스트라

 

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp -H "Authorization: Bearer YOUR_TOKEN"

 

여기에서 YOUR_TOKEN 쪽에 토큰 추가하면 되고, 만일 이 명령어를 그대로 터미널에 실행하게 되면 이렇게 나옴

 

 

그러면 해당 토큰 폐기 후 설정하는 방법 알려달라고 하면 클로드 폴더에서 settings.json을 생성 후 거기에서 넣는 방식을 알려줌

처음부터 여기서 하면 됨

 

 

해당 파일은 /c/Users/kss90/.claude 폴더에 있으니 자기 폴더 체크하면 찾을 수 있음

json 파일 수정하면 read file 한다고 하고 yes 하면 됨

 

그리고 재시작 후 다시 클로드 실행 후 플러그인 체크하면 됨

 

 

다시 실행 후

/plugin 입력하고 인스톨쪽 보면

이 상태임

 

가장 중요한 지점!!

현재 이상태에서는 클로드가 코드로 만든걸 피그마로 가져오지 못하는 상태임

 

여기서 도구들 보면 전부 read only에 가장 중요한 generate figma design이라는게 없음 이제 우린 이걸 설치해줘야함

 

설치하는 방법은

 

discover 탭에서 figma 검색

 

검색 후 실행하면

 

이렇게 나오는데, 너가 원하는 설정으로 선택하면됨

 

뭘 선택해야 하는지도 정리해드리면:

1. 개인적으로만 써보고 싶다
Install for you, in this repo only (local scope)
이게 가장 무난합니다.
현재 작업 중인 저장소 안에서만 적용되고, 다른 프로젝트에는 영향이 없습니다.

2. 앞으로 내가 모든 프로젝트에서 계속 쓰고 싶다
Install for you (user scope)
내 계정 기준으로 전역 설치에 가깝습니다.

3. 팀원들도 이 저장소에서 같이 써야 한다
Install for all collaborators on this repository (project scope)
레포 단위로 공유하는 선택입니다. 팀 합의가 있을 때 고르는 게 좋습니다.

지금 상황에서는 보통 Install for you, in this repo only (local scope) 를 먼저 고르는 게 가장 안전합니다.
이유는:

• 범위가 작아서 실수해도 영향이 적고
• 팀 설정을 건드리지 않으며
• 우선 테스트해보기 좋기 때문입니다

 

나는 local scope 선택함 나혼자 프로젝트 테스트용으로 지금 사용중이라

 

설치하면 플러그인도 설치된거 볼 수 있음

근데 이것만 하면 아직 skills에 generate figma design이 없음

 

여기서 중요한것이

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

 

요 명령어 입력해야함

https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/

Remote server | Developer Docs

 

여기 가이드에 따르면 우선 원격서버로 하는거로 가능함(무료계정인경우) 유료계정인 경우 데스크톱앱도 지원한다는데, 잘 안되는 것 같은 후기 보면https://forum.figma.com/report-a-problem-6/generate-figma-design-not-available-in-claude-code-connector-51173

generate_figma_design not available in Claude Code connector? | Figma Forum

 

입력 후 이어서 권한들 주면

 

 

재시작 안내 나오고

 

플러그인 들어가서 다시 보면

 

이렇게 나옴. 여기서 다시 내가 쓸 피그마 계정 auth 연결하면됨

그러면 리모트 mcp가 나오고, 도구 쪽 보면 제너레이트 피그마가 있음

figma remote mcp 에서 7번에 보임

 

이상태가 세팅완료

 

이후에 클로드로 페이지 아무거나 만들고 디자인으로 옮겨달라고 하면 다음과 같이 됨

서버 실행 권한 나오고 계속 yes 엔터 치면

 

tool use에서 generate figma design 이거 나옴 이거 나오면 성공한거

그러면 이렇게 새창이 나오면서 되는건데, 특정 플러그인을 html에 스크립트 넣어서 이걸 요소 선택하고 파일열기하고 등등 가능한거 같음