Figma MCP 서버

Figma API에 연결되는 MCP(Model Context Protocol) 서버로, AI 도구와 LLM이 Figma 디자인에 액세스하여 작업할 수 있습니다.

특징

• 디자인 데이터 추출 : Figma 디자인에서 구성 요소, 스타일 및 텍스트를 추출합니다.

• 디자인 시스템 분석 : 디자인 시스템의 일관성과 패턴을 분석합니다.

• UI 콘텐츠 관리 : 디자인에서 모든 UI 복사본을 추출하고 구성합니다.

• 개발 핸드오프 : 개발자를 위한 포괄적인 문서 생성

• 원활한 AI 통합 : Claude, Cursor 및 기타 MCP 호환 클라이언트와 같은 AI 도구에 디자인을 연결합니다.

Related MCP server: Figma MCP Server

시작하기

필수 조건

• Node.js 16 이상

• Figma 개인 액세스 토큰(Figma 계정 설정에서 받으세요)

설치

1. 저장소를 복제합니다.

   지엑스피1

2. 종속성 설치:

   npm install

3. 프로젝트 루트에 .env 파일을 만듭니다.

   FIGMA_API_TOKEN=your_figma_personal_access_token
   API_KEY=your_secure_api_key
   TRANSPORT_TYPE=stdio

4. 서버를 빌드하세요:

   npm run build

5. 서버를 시작합니다:

   npm start

클라이언트에 연결

데스크톱용 클로드

1. Claude for Desktop 구성 파일을 열거나 만듭니다.

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

   • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. 다음 구성을 추가합니다.

   {
     "mcpServers": {
       "figma": {
         "command": "node",
         "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
         "env": {
           "FIGMA_API_TOKEN": "your_figma_personal_access_token",
           "TRANSPORT_TYPE": "stdio"
         }
       }
     }
   }

3. 데스크톱용 Claude 재시작

커서

글로벌 구성

커서의 MCP 구성 파일을 생성하거나 편집합니다.

• macOS: ~/Library/Application Support/Cursor/mcp.json

• 윈도우: %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

프로젝트별 구성

1. 프로젝트 루트에 .cursor 디렉토리를 만듭니다.

   mkdir -p .cursor

2. 해당 디렉토리 안에 mcp.json 파일을 만듭니다.

   {
     "mcpServers": {
       "figma-mcp": {
         "url": "http://localhost:3000/sse",
         "env": {
           "API_KEY": "your_secure_api_key"
         }
       }
     }
   }

사용 가능한 도구

사용 가능한 프롬프트

• analyze-design-system - 일관성을 위해 디자인 시스템 구성 요소와 스타일을 분석합니다.

• extract-ui-copy - 디자인에서 모든 UI 복사본을 추출하고 정리합니다.

• generate-dev-handoff - 설계 기반 개발 핸드오프 문서 생성

사용 예

Claude와 함께 사용:

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

커서와 함께 사용:

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

환경 변수

건축학

이 MCP 서버:

1. 개인 액세스 토큰을 사용하여 Figma API에 연결합니다.

2. 모델 컨텍스트 프로토콜을 따르는 표준화된 인터페이스를 제공합니다.

3. LLM이 Figma 디자인과 상호 작용하는 데 사용할 수 있는 도구, 리소스 및 프롬프트를 제공합니다.

4. stdio 전송(로컬 연결)과 SSE 전송(원격 연결)을 모두 지원합니다.

기여하다

기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.