MCP Figma에서 React로의 변환기

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

특징

• Figma API를 사용하여 Figma 디자인 가져오기

• Figma 디자인에서 구성 요소 추출

• TypeScript로 React 구성 요소 생성

• Figma 스타일을 기반으로 Tailwind CSS 클래스 적용

• 접근성 기능으로 구성 요소 강화

• stdio 및 SSE 전송 모두 지원

Related MCP server: Figma MCP Server

필수 조건

• Node.js 18 이상

• Figma API 토큰

설치

1. 저장소를 복제합니다

2. 종속성 설치:

지엑스피1

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

npm run build

구성

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

용법

로컬 MCP 서버로 실행

FIGMA_API_TOKEN=your_token_here npm start

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

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio

HTTP 서버로 실행

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse

사용 가능한 도구

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 코드를 생성하며 파일을 저장합니다.

개발

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

npm run dev

특허

아이에스씨