Integrations

Fetches designs and components from Figma projects using the Figma API and extracts component information for conversion to React.
Generates React components from Figma designs, including support for component extraction and creation of functional React components.
Applies Tailwind CSS classes to generated React components based on the styles defined in the Figma designs.

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

프로젝트를 빌드하세요:

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 컴포넌트로 변환하는 전체 워크플로

워크플로 예시

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

개발

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

npm run dev

특허

아이에스씨

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Figma 파일에서 구성 요소를 추출하고 바로 사용할 수 있는 코드로 변환하여 Figma 디자인을 TypeScript 및 Tailwind CSS를 사용하여 React 구성 요소로 변환합니다.

MCP Figma to React Converter