-
security-
license-
qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
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에서 문제를 열어주세요.
This server cannot be installed
Related Resources
Related MCP Servers
- AsecurityFlicenseAqualityA bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.Last updated -55102
- -securityAlicense-qualityConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated -60MIT License
- -securityFlicense-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -1