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

security - not tested

license - not found

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Figma 디자인을 React Native 구성 요소로 변환하여 사용자가 Figma 디자인에서 구성 요소를 추출하고 적절한 타이핑과 스타일을 적용하여 해당 React Native 구성 요소를 생성할 수 있도록 합니다.

Related MCP Servers

Talk to Figma MCP
yhc984
-
security
F
license
-
quality
Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
Last updated -
TypeScript
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
Figma MCP Server
sanjeev23oct
-
security
F
license
-
quality
A 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 -
997
1
TypeScript
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
Converts 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 -
14
TypeScript
MIT License

View all related MCP servers

Figma to React Native MCP