MCP-Figma 설정법
Figma의 MCP 서버를 Claude Code에 연결하면 디자인 파일을 직접 읽어서 코드로 옮기거나, 디자인 스펙을 참고해 구현할 수 있습니다. 원격(Remote) 버전과 데스크톱(로컬) 버전 두 가지가 있습니다.
1. 원격 버전 (일반 사용자 추천)
대부분의 경우 이 방법으로 충분하고, 기능도 가장 넓게 지원됩니다.
$claude plugin install figma@claude-plugins-official
설치 후 Claude Code를 재시작하고, 아래 순서로 인증을 완료합니다.
/plugin입력 후 실행- Installed 탭으로 이동(오른쪽 화살표 키)
figma서버를 찾아 Enter → 인증 화면 진입- Enter를 한 번 더 눌러 브라우저 인증 페이지 열기
- 브라우저에서 Allow access 클릭
- 터미널로 돌아와
/plugin을 다시 실행 →figma가 "connected"로 표시되면 완료
2. 데스크톱(로컬) 버전 (기업/조직 플랜)
Figma 데스크톱 앱과 같은 컴퓨터에서 작업할 때 API 키 없이 로컬 소켓으로 연결하는 방식입니다.
Figma 쪽 설정:
- Figma 데스크톱 앱에서 디자인 파일 열기 (캔버스에서 아무것도 선택하지 않은 상태)
- 툴바에서 Dev Mode로 전환
- 오른쪽 사이드바에서 MCP 서버 활성화
- 표시되는 서버 URL 확인 (기본값
http://127.0.0.1:3845/mcp)
Claude Code 쪽 설정:
$claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
등록 후 Claude Code를 재시작해야 반영됩니다.
3. 활용 예시
연결이 끝나면 Figma 파일 링크를 붙여넣고 "이 프레임을 React 컴포넌트로 구현해줘", "이 화면의 spacing/color 값을 CSS 변수로 뽑아줘" 같은 요청이 가능합니다.
4. 문제 해결
연결이 안 될 때는 Figma 데스크톱 앱이 최신 버전인지, Dev Mode MCP 서버 토글이 켜져 있는지 먼저 확인하세요. 조직 정책상 MCP 서버 메뉴 자체가 안 보이는 경우도 있는데, 이때는 원격 버전을 사용하면 됩니다.