-
securityF
license-
qualityConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
42
5
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
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
Figma 파일에서 구성 요소를 추출하고 바로 사용할 수 있는 코드로 변환하여 Figma 디자인을 TypeScript 및 Tailwind CSS를 사용하여 React 구성 요소로 변환합니다.
Related MCP Servers
- -securityFlicense-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.Last updated -
- 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 -57252
- -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 -