Figma MCP 서버

Figma 디자인과 React 구현을 연결하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버는 Figma 파일 데이터를 처리하고 React 친화적인 형식으로 제공하여 Figma 디자인을 React 애플리케이션으로 픽셀 단위까지 완벽하게 변환할 수 있도록 지원합니다.

🚀 특징

Figma API 통합 : 디자인 파일에 액세스하기 위한 Figma API에 직접 연결
React-Ready Output : Figma 데이터를 React 호환 포맷으로 처리합니다.
스타일 처리 : Figma 스타일을 CSS/스타일 구성 요소로 변환합니다.
자산 관리 : 이미지 자산 및 SVG 구성 요소를 처리합니다.
레이아웃 처리 : Figma 자동 레이아웃을 Flexbox로 변환합니다.
유형 안전성 : 안정적인 유형 검사를 위해 TypeScript로 구축됨

🛠️ 제공되는 도구

get_file_content :
- Figma 파일 콘텐츠를 가져와서 처리합니다.
- 레이아웃, 스타일 및 구성 요소를 변환합니다.
- React-ready 컴포넌트 구조 GXP1을 반환합니다.
get_node_images :
- Figma에서 이미지 자산을 검색합니다.
- 다양한 포맷(PNG, JPG, SVG) 지원
- 구성 가능한 스케일링 옵션 GXP2

📦 설치

저장소를 복제합니다.
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp
종속성 설치:
npm install
Figma 액세스 토큰을 구성하세요.
cp .env.example .env # Add your Figma access token to .env

🎯 커서 IDE 설정

프로젝트 루트에 .cursor/mcp.json 파일을 만듭니다.
mkdir -p .cursor touch .cursor/mcp.json
Stdio 기반 서버 구성의 경우:
{ "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

## 💻 Usage

1. Build the server:
 ```bash
 npm run build
 ```

2. Configure MCP settings based on your IDE:

- For VS Code (global settings):
  ```json
  // In settings.json
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- For Cursor IDE:
  Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
  This configuration will take precedence over VS Code settings when using Cursor IDE.

3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩 예시 프로젝트

Figma 디자인의 픽셀 단위까지 완벽한 React 구현을 생성하기 위해 이 MCP 서버를 사용하는 전체 예는 raccoon-game 디렉토리에서 확인할 수 있습니다.

🔄 처리 파이프라인

입력 : Figma 공식 API를 통한 파일 데이터
처리중 :
- 스타일 변환(색상, 타이포그래피, 효과)
- 레이아웃 변환(Flexbox에 대한 절대값)
- 구성 요소 계층 매핑
- 자산 최적화
출력 : React 준비 완료 컴포넌트 데이터

📝 라이센스

MIT 라이센스

🤝 기여하기

기여를 환영합니다! 기여 지침을 꼭 읽어주세요.

🙏 감사의 말

포괄적인 API를 위한 Figma API 팀
MCP 사양을 위한 모델 컨텍스트 프로토콜

[당신의 이름]이 ❤️로 만들었습니다

Figma MCP Server

Integrations