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\"
}"Related MCP server: MCP Figma to React Converter
용법
설치 후 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에서 문제를 열어주세요.