MCP Figma to React Converter

MCP Figma에서 React로의 변환기

Figma 디자인을 React 컴포넌트로 변환하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. Figma 디자인을 가져오고 TypeScript와 Tailwind CSS를 사용하여 React 컴포넌트를 생성하는 도구를 제공합니다.

특징

• Figma API를 사용하여 Figma 디자인 가져오기
• Figma 디자인에서 구성 요소 추출
• TypeScript로 React 구성 요소 생성
• Figma 스타일을 기반으로 Tailwind CSS 클래스 적용
• 접근성 기능으로 구성 요소 강화
• stdio 및 SSE 전송 모두 지원

필수 조건

• Node.js 18 이상
• Figma API 토큰

설치

1. 저장소를 복제합니다
2. 종속성 설치:

지엑스피1

3. 프로젝트를 빌드하세요:

구성

FIGMA_API_TOKEN 환경 변수를 Figma API 토큰으로 설정해야 합니다. Figma 계정 설정 페이지에서 개인 액세스 토큰을 받을 수 있습니다.

용법

로컬 MCP 서버로 실행

또는 명시적인 운송 수단으로:

HTTP 서버로 실행

사용 가능한 도구

Figma 도구

• getFigmaProject : Figma 프로젝트 구조 가져오기
• getFigmaComponentNodes : Figma 파일에서 구성 요소 노드 가져오기
• extractFigmaComponents : Figma 파일에서 구성 요소 추출
• getFigmaComponentSets : Figma 파일에서 구성 요소 세트를 가져옵니다.

React 도구

• generateReactComponent : Figma 노드에서 React 컴포넌트 생성
• generateComponentLibrary : Figma 컴포넌트에서 여러 React 컴포넌트 생성
• writeComponentsToFiles : 생성된 구성 요소를 파일에 씁니다.
• figmaToReactWorkflow : Figma 디자인을 React 컴포넌트로 변환하는 전체 워크플로

워크플로 예시

1. Figma 파일 키(URL의 figma.com/file/ 뒤의 문자열)를 가져옵니다.
2. 파일 키와 출력 디렉토리를 사용하여 figmaToReactWorkflow 도구를 사용하세요.
3. 이 도구는 구성 요소를 추출하고 React 코드를 생성하며 파일을 저장합니다.

개발

개발을 위해 감시 모드를 사용할 수 있습니다.

특허

아이에스씨