VS Code Claude Code에 Figma MCP 연동하여 1:1 웹 UI 개발 환경 구축하기

Об этом предложении

웹 애플리케이션 개발 시 피그마(Figma) 디자인을 코드로 구현할 때 단순히 이미지 캡처나 눈대중 수치를 이용하면 패딩, 마진, 폰트 스펙 등에서 오차가 발생한다. VS Code 기반의 Claude Code 환경에 Figma MCP(Model Context Protocol) Server 를 연동하면, 피그마 API를 통해 Auto Layout 수치, 컬러 토큰, Typography 정보를 직접 읽어와 정밀하게 1:1 코드로 변환할 수 있다. 시행착오 끝에 성공한 Figma MCP 서버 설정 과정 및 트러블슈팅 가이드를 정리한다. 1. 피그마 API 토큰 발급 Figma 웹 또는 데스크톱 앱 로그인 후 프로필 아이콘 클릭 $\rightarrow$ Settings 이동. Personal access tokens 섹션으로 이동. Generate new token 클릭. Token Scopes 설정 시 보안을 위해 읽기 전용( :read ) 권한만 선택한다. file_content:read (필수: 레이어 구조, Auto Layout 수치 조회) file_metadata:read library_assets:read / library_content:read file_dev_resources:read 생성된 토큰( figd_... 형태)을 복사해 둔다. 2. Windows PowerShell 스크립트 실행 권한 설정 PowerShell 환경에서 claude CLI 실행 시 스크립트 권한 에러( PSSecurityException )가 발생할 수 있다. 다음 명령어로 현재 사용자 계정의 실행 정책을 변경한다. Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 권한 변경 확인 시 Y 를 입력한다. 3. .claude.json MCP 설정 파일 구성 npm 공식 스코프 패키지명이 아닌, 검증된 Figma MCP 패키지( figma-developer-mcp )를 사용해야 404 및 바이너리 실행 에러를 방지할 수 있다. VS Code 터미널에서 아래 명령어로 설정 파일을 연다. code C:\Users\Administrator\.claude.json 파일 내용을 다음과 같이 작성하고 저장한다. { "mcpServers": { "figma": { "type": "stdio", "command": "npx", "args": [ "-y", "figma-developer-mcp", "--stdio" ], "env": { "FIGMA_API_KEY": "figd_여기에_발급받은_토큰_입력" } } } } type: "stdio" : Claude Code와 MCP 서버 간 로컬 프로세스 직통 통신(Standard Input/Output) 방식이다. -y : npx 실행 시 패키지 자동 다운로드 승인 옵션이다. --stdio : 백그라운드 stdio 모드로 MCP 서버를 구동하는 옵션이다. 4. 트러블슈팅 (Troubleshooting) 1 npm error 404 Not Found (@modelcontextprotocol/server-figma) 원인 : @modelcontextprotocol/server-figma 패키지는 npm 레지스트리에 존재하지 않는다. 해결 : figma-developer-mcp 패키지를 사용하도록 지정한다. 2 npm error could not determine executable to run (mcp-server-figma) 원인 : npx 에서 해당 패키지의 실행 바이너리를 지정하지 못할 때 발생한다. 해결 : args 에 figma-developer-mcp 와 --stdio 옵션을 명시한다. 5. 연동 상태 확인 및 사용 방법 연동 확인 터미널에서 아래 명령어를 실행하여 연결 상태를 확인한다. claude mcp list 정상적으로 연동되면 다음과 같이 ✓ Connected 상태로 표시된다. figma: npx -y figma-developer-mcp --stdio - ✓ Connected Claude Code 활용 프롬프트 예시 피그마의 특정 프레임 우클릭 $\rightarrow$ Copy link to selection 으로 링크를 복사한 뒤 Claude Code 터미널에 전달한다. "이 피그마 프레임( https://www.figma.com/design/...?node-id=123-456)의 의) 레이아웃과 스타일을 Figma MCP로 읽어와서 src/components/Header.tsx 파일로 Tailwind CSS를 적용해 1:1로 정확히 작성해 줘. Auto Layout의 gap과 padding 수치를 엄격하게 지켜 줘."

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.39

Уверенность

49%