VS Code Copilot Agent와 Figma MCP 연결 가이드
개요
이 글에서는 VS Code Copilot Agent를 Figma MCP(Model Context Protocol)와 연결하는 방법을 상세히 설명합니다. 대부분의 자료가 Cursor 기반으로 작성되어 있지만, VS Code Copilot을 주로 사용하는 개발자를 위해 해당 환경에서의 설정 방법을 다룹니다. 관련 정보가 제한적이어서 직접 시행착오를 거치며 성공한 방법을 공유합니다.
테스트 환경
- OS: Windows 11
- Node.js: v22.17.0
- VS Code: v1.102.2
- Figma API Token: 필수 (Personal Access Token)
참고: MCP(Model Context Protocol)는 Anthropic에서 개발한 개방형 표준으로, AI 어시스턴트가 다양한 데이터 소스와 도구에 안전하고 제어 가능한 방식으로 연결할 수 있게 해주는 프로토콜입니다. 2024년 11월에 공개되어 현재 VS Code, Claude Desktop 등에서 지원됩니다.
Figma MCP 연결 방법
Figma MCP에 연결하는 방법은 두 가지가 있습니다:
1. 로컬 서버 방식 (stdio)
- 개인 서버에서 MCP 서버를 직접 실행
- 무료로 사용 가능
- 직접 설정 및 관리 필요
2. Figma Dev Mode MCP 서버 방식
- Figma에서 제공하는 공식 MCP 서버 사용
- 더 안정적이고 설정이 간편
- Figma 유료 플랜 구독 필요
- 자세한 설정 방법: Figma Dev Mode MCP 서버 안내
이 가이드에서는 무료로 사용할 수 있는 로컬 서버 방식을 중심으로 설명하겠습니다.
로컬 서버 설정 방법
1단계: VS Code에서 Figma MCP 서버 설치
- VS Code MCP 개발자 도구 페이지에 접속
- Figma MCP 서버 설정을 다운로드
- VS Code의
mcp.json파일에 자동으로 설정이 추가됩니다
2단계: Figma API 토큰 설정
Figma API 토큰을 설정하는 방법은 두 가지가 있습니다:
방법 1: mcp.json 파일에 직접 설정 (해당 방식 사용)
{
"servers": {
"Framelink Figma MCP": {
"type": "stdio",
"command": "npx",
"args": [
"figma-developer-mcp",
"--figma-api-key=<FIGMA_API_KEY>"
],
"env": {}
},
}
}방법 2: 환경변수 사용
- Windows 환경변수에
FIGMA_API_KEY설정- 시스템 속성 → 고급 → 환경 변수에서 설정
- 또는 PowerShell에서:
[System.Environment]::SetEnvironmentVariable("FIGMA_API_KEY", "your-token-here", "User")
- mcp.json에서 환경변수 참조:
{ "servers": { "Framelink Figma MCP": { "type": "stdio", "command": "npx", "args": [ "figma-developer-mcp", "--figma-api-key=${FIGMA_API_KEY}" ], "env": { "FIGMA_API_KEY": "${FIGMA_API_KEY}" } } } }
보안 팁: 환경변수 방식이 더 안전하지만, 개인 개발 환경에서는 직접 설정도 무방합니다.
3단계: MCP 서버 실행 및 관리
VS Code에서 MCP 설정을 완료하면:
- Extensions 탭: 하단에 MCP 서버 관련 옵션이 나타남
- Copilot Chat: 도구 버튼을 통해 MCP 설정 편집 가능
- 설정 파일 위치:
C:\Users\{사용자명}\AppData\Roaming\Code\User\mcp.json
4단계: 서버 상태 모니터링
VS Code 출력 창에서 MCP 서버 상태를 확인할 수 있습니다:
- 서버 실행/중지 상태
- 오류 메시지 및 로그
- 포트 충돌 등의 문제 진단
포트 충돌 해결 방법
간혹 3333 포트에서 충돌이 발생할 수 있습니다:
# 3333포트 사용 중인 프로세스 확인
netstat -ano | findstr :3333
# 해당 프로세스 강제 종료
taskkill /PID <PID번호> /F실제 사용법
Figma 프로젝트 연결
Copilot Chat에서 Figma 프로젝트 URL을 제공하면 자동으로 파일 키를 추출하여 연결합니다:
AI 응답 예시:
Master, Figma MCP를 이용해 <프로젝트이름> 프로젝트 정보를 읽어보겠습니다.
먼저 Figma 파일의 정보를 가져와야 하므로 fileKey가 필요합니다.
figma(MCP 서버)
Master, 파일 정보를 성공적으로 가져왔습니다.
프로젝트 구조와 디자인 요소들을 분석하여 코드 생성을 도와드리겠습니다.
Figma 파일 키 확인 방법
URL 형식: https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]
예시: https://www.figma.com/file/abc123def456/Design에서 abc123def456이 파일 키결론 및 활용 방안
MCP를 통한 Figma 연동으로 다음과 같은 이점을 얻을 수 있습니다:
- 자동 디자인 분석: AI가 Figma 디자인을 직접 읽고 분석
- 코드 자동 생성: 디자인 기반 컴포넌트 및 스타일 자동 생성
- 일관성 유지: 디자인 시스템과 코드 간의 일관성 보장
- 생산성 향상: 디자인-개발 간 소통 비용 절약
앞으로는 이러한 AI 도구들을 적극 활용하여 더 높은 생산성과 품질을 달성하는 것이 중요할 것입니다.
참고 자료: