Integrations

Enables creating and manipulating designs in Figma through either a Figma plugin or directly via the Figma API, supporting operations like creating projects, frames, components, layouts, interactions, retrieving file information, and exporting assets.

클로드 피그마 MCP

Figma 플러그인이나 Figma API를 통해 직접 Claude가 Figma에서 디자인을 만들고 조작할 수 있도록 하는 MCP(Model Context Protocol) 서버입니다.

개요

이 프로젝트는 Claude가 Figma와 상호 작용할 수 있는 두 가지 접근 방식을 제공합니다.

플러그인 접근 방식 : Figma 플러그인을 사용하여 Figma UI에서 명령을 실행합니다.
- 처음부터 디자인을 만들고 조작할 수 있습니다.
- Figma 애플리케이션에서 Figma 플러그인을 실행해야 합니다.
API 접근 방식 : Figma REST API를 직접 사용합니다.
- 기존 Figma 파일을 검색하고 내보낼 수 있습니다.
- Figma를 열지 않고도 작동하지만 생성 기능이 제한적입니다.
- Figma API 키가 필요합니다

설치

NPM 사용(권장)

패키지를 전역으로 설치합니다.

지엑스피1

또는 npx로 직접 실행하세요.

npx claude-figma-mcp

로컬 소스에서 실행

이 저장소를 복제하세요
npm install 로 종속성 설치
npm run build 로 TypeScript 코드를 빌드합니다.
npm start (HTTP 모드) 또는 npm run start:cli (STDIO 모드)로 서버를 실행합니다.

Claude Desktop 통합 설정

표준 접근 방식(NPM 패키지)

Claude Desktop 구성 파일에 다음을 추가하세요.

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "claude-figma-mcp",
        "--stdio"
      ]
    }
  }
}

Figma API 접근 방식

Figma API를 직접 사용하는 것을 선호하는 경우(더 안정적이지만 생성 기능이 적음):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "claude-figma-mcp",
        "--stdio",
        "--figma-api-key",
        "your_figma_api_key_here"
      ]
    }
  }
}

단순화된 서버 옵션

표준 서버에 문제가 있는 환경의 경우, 우리는 단순화된 서버를 제공합니다:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/path/to/claude-figma-mcp/simple-mcp-server.js"
      ]
    }
  }
}

Figma 플러그인 설정(플러그인 접근 방식만 해당)

Figma를 열고 메뉴 → 플러그인 → 개발 → 매니페스트에서 플러그인 가져오기...로 이동합니다.
이 저장소에서 figma-plugin/manifest.json 파일을 선택하세요
이제 Figma 플러그인 메뉴에서 플러그인을 사용할 수 있습니다.

용법

플러그인 접근 방식

HTTP 모드에서 MCP 서버를 시작합니다.
Figma를 열고 Claude MCP 통합 플러그인을 실행하세요.
플러그인 UI에서 "MCP 서버에 연결"을 클릭하세요.
Claude에서 Figma MCP 도구를 사용하여 Figma와 상호 작용합니다.

API 접근 방식

Figma API 키로 MCP 서버를 시작하세요
Claude에서 Figma MCP 도구를 사용하여 Figma 파일과 상호 작용합니다.
Figma를 열 필요가 없습니다. 작업은 API를 통해 직접 수행됩니다.

사용 가능한 도구

플러그인 접근 도구

create_project : 새로운 Figma 프로젝트를 생성합니다
create_frame : 새로운 프레임/아트보드를 만듭니다
create_rectangle : 사각형 요소를 생성합니다
create_text : 텍스트 요소를 생성합니다
create_component : 미리 정의된 UI 구성요소(버튼, 입력 등)를 생성합니다.
create_layout : 공통 레이아웃 패턴(헤더, 푸터 등)을 만듭니다.
create_interaction : 요소 간의 대화형 프로토타입 연결을 생성합니다.
export_frame : 프레임을 이미지로 내보냅니다

API 접근 도구

get_file : Figma 파일에 대한 정보를 검색합니다.
get_file_nodes : Figma 파일에서 특정 노드 가져오기
get_comments : Figma 파일에서 주석을 검색합니다.
post_comment : Figma 파일에 주석을 추가합니다.
get_team_components : 팀의 구성 요소를 나열합니다.
export_image : 프레임이나 노드를 이미지로 내보냅니다.

클로드 프롬프트 예시

플러그인 접근 방식 예

Can you create a login screen in Figma? It should have a logo at the top, email and password input fields, and a login button.

I need a dashboard layout in Figma with a header, sidebar navigation, and a main content area with 4 card components showing different statistics.

API 접근 방식 예

Show me the contents of my Figma file with ID abcde12345

Export the frame named 'Homepage' from my Figma file abcde12345 as a PNG

구성

서버는 환경 변수나 명령줄 인수를 사용하여 구성할 수 있습니다.

환경 변수

PORT : HTTP 서버 포트(기본값: 3000)
WEBSOCKET_PORT : Figma 플러그인 통신을 위한 WebSocket 서버 포트(기본값: 8080)
FIGMA_API_KEY : Figma API 키(API 접근 방식에 필요)

명령줄 인수

--port : HTTP 서버 포트
--websocket-port : WebSocket 서버 포트
--figma-api-key : Figma API 키
--stdio : stdio 모드에서 실행(Claude Desktop 통합용)

문제 해결

Claude Desktop 연결 문제

기본 서버에 문제가 있는 경우 간소화된 서버 옵션을 시도해 보세요.

node /path/to/claude-figma-mcp/simple-mcp-server.js

플러그인이 서버에 연결할 수 없습니다

확실하게 하다:

MCP 서버는 HTTP 모드로 실행 중입니다.
포트가 방화벽에 의해 차단되지 않았습니다.
WebSocket 포트(기본값: 8080)는 서버 구성과 플러그인 모두에서 일치합니다.

API 키가 인식되지 않습니다

Figma API 키가 다음과 같은지 확인하세요.

유효하고 필요한 권한이 있습니다
환경 변수나 명령줄 인수에 올바르게 설정됨

기여하다

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

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested