Figma MCP로 디자인 파일을 Claude·Cursor에 연결

Middle class 약 15분MCP 연동

💡 Figma 디자인 파일을 Claude나 Cursor에 직접 연결하면 '이 컴포넌트 코드로 변환해줘'라고 했을 때 AI가 실제 디자인을 보고 픽셀 단위로 정확한 코드를 작성해줍니다.

🔒 figma.com

실제 화면

STEP 1 / 3…

STEP 1. Figma MCP 서버 설정

🔧

STEP 1

아래 안내를 따라 진행하세요

Figma Dev Mode MCP Server를 사용합니다. Claude Desktop 앱의 설정 파일(`~/Library/Application Support/Claude/claude_desktop_config.json`)을 엽니다. mcpServers 섹션에 Figma 설정을 추가합니다.

JSON

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp"],
      "env": {
        "FIGMA_API_KEY": "여기에피그마API키"
      }
    }
  }
}

💡

또는 Figma 공식 Dev Mode MCP(figma.com/developers/mcp)를 사용하면 인증 없이 Figma 데스크톱 앱을 통해 자동 연결됩니다.

이 단계를 완료했나요?