Figma MCP 서버

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

🚀 특징

• Figma API 통합 : 디자인 파일에 액세스하기 위한 Figma API에 직접 연결

• React-Ready Output : Figma 데이터를 React 호환 포맷으로 처리합니다.

• 스타일 처리 : Figma 스타일을 CSS/스타일 구성 요소로 변환합니다.

• 자산 관리 : 이미지 자산 및 SVG 구성 요소를 처리합니다.

• 레이아웃 처리 : Figma 자동 레이아웃을 Flexbox로 변환합니다.

• 유형 안전성 : 안정적인 유형 검사를 위해 TypeScript로 구축됨

Related MCP server: FigmaMind MCP Server

🛠️ 제공되는 도구

1. get_file_content :

   • Figma 파일 콘텐츠를 가져와서 처리합니다.

   • 레이아웃, 스타일 및 구성 요소를 변환합니다.

   • React-ready 컴포넌트 구조 GXP1을 반환합니다.

2. get_node_images :

   • Figma에서 이미지 자산을 검색합니다.

   • 다양한 포맷(PNG, JPG, SVG) 지원

   • 구성 가능한 스케일링 옵션 GXP2

📦 설치

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

   git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp

2. 종속성 설치:

   npm install

3. Figma 액세스 토큰을 구성하세요.

   cp .env.example .env # Add your Figma access token to .env

🎯 커서 IDE 설정

1. 프로젝트 루트에 .cursor/mcp.json 파일을 만듭니다.

   mkdir -p .cursor touch .cursor/mcp.json

2. 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" } }

}

🧩 예시 프로젝트

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

🔄 처리 파이프라인

1. 입력 : Figma 공식 API를 통한 파일 데이터

2. 처리중 :

   • 스타일 변환(색상, 타이포그래피, 효과)

   • 레이아웃 변환(Flexbox에 대한 절대값)

   • 구성 요소 계층 매핑

   • 자산 최적화

3. 출력 : React 준비 완료 컴포넌트 데이터

📝 라이센스

MIT 라이센스

🤝 기여하기

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

🙏 감사의 말

• 포괄적인 API를 위한 Figma API 팀

• MCP 사양을 위한 모델 컨텍스트 프로토콜

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