Figma에서 React Native MCP로

Cursor의 MCP를 사용하여 Figma 디자인을 React Native 컴포넌트로 변환하세요. 이 도구는 Figma 디자인에서 컴포넌트를 추출하고 적절한 타이핑과 스타일을 적용하여 해당 React Native 컴포넌트를 생성합니다.

설치

개발을 위해

eas.json 에 추가하세요:

지엑스피1

최종 사용자를 위해

Cursor IDE에 MCP 서버를 설치하세요.

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"

용법

설치 후 Cursor에서 다음 프롬프트를 사용할 수 있습니다.

모든 구성 요소 추출

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

특정 성분 추출

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

구성

config 객체는 다음 매개변수를 허용합니다.

{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}

특징

현재의:

✅ Figma에서 구성 요소 추출
✅ React Native 구성 요소 생성
✅ 구성 요소 계층 구조 유지
✅ 컴포넌트 속성 및 유형 처리
✅ 중첩된 구성 요소 지원

곧 출시 예정:

🚧 GraphQL 스키마 생성

개발

기여하거나 수정하려면:

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

npm install

짓다:

npm run build

로컬로 실행:

npm start

환경 변수

로컬에서 실행하는 경우 .env 에 다음이 필요합니다.

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

오류 처리

일반적인 오류 및 해결 방법:

"클라이언트 생성 실패" : 모든 환경 변수가 제대로 설정되었는지 확인하세요.
"구성요소 페이지를 찾을 수 없습니다" : Figma 파일에 "구성요소"라는 이름의 페이지가 있는지 확인하세요.
"Figma 파일을 가져오지 못했습니다" : Figma 토큰과 파일 ID를 확인하세요.

특허

MIT

문제 및 기능 요청이 있으시면 GitHub에서 문제를 열어주세요.

Figma to React Native MCP

Integrations