hybrid server

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

Integrations

Extracts components from Figma designs and transforms them into a standardized JSON format that can be used to reconstruct interfaces programmatically. Supports organizing components into logical sections, normalizing positions, and extracting assets.

피그마인드

모델 호출 프로토콜(MCP)을 구현한 공식 API를 사용하여 Figma에서 구성 요소와 패턴을 추출하는 애플리케이션입니다.

프로젝트 소개

FigmaMind는 Figma 디자인을 분석하고 이를 표준화된 JSON 표현으로 변환하는 도구입니다. 버튼, 입력 필드, 헤더 등의 구성 요소를 식별하여 해당 속성과 관계를 추출합니다.

이 애플리케이션은 두 가지 유형의 API를 제공합니다.

REST API : HTTP를 통한 기존 사용
MCP(모델 호출 프로토콜) : LLM 및 기타 MCP 호환 시스템과의 통합을 위해 사용됨

주요 특징

공식 API를 통해 Figma 구성 요소 추출
구성 요소 유형(버튼, 입력, 헤더 등)을 자동으로 식별합니다.
위치 및 속성의 표준화
자산 추출(이미지 및 아이콘)
모델 호출 프로토콜(MCP) 구현
전적으로 TypeScript로 작성됨

요구 사항

Node.js 18.0.0 이상
Figma API 토큰

설치

저장소를 복제합니다.

지엑스피1

종속성 설치:

npm install

Figma 토큰을 사용하여 프로젝트 루트에 .env 파일을 만듭니다.

FIGMA_TOKEN=seu_token_aqui
PORT=3000

프로젝트를 컴파일합니다:

npm run build

사용

서버 시작

npm start

자동 재로딩을 통한 개발의 경우:

npm run dev

사용 예

REST API를 통해

Figma 디자인 변형:

curl -X POST -H "Content-Type: application/json" \
  --data '{"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}' \
  http://localhost:3000/api/transform

MCP를 통해

사용 가능한 도구 나열:

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "tools.list", "id": 1}' \
  http://localhost:3000/tools/list

도구 실행:

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "run", "id": 2, "params": {"name": "figmamind.transform", "arguments": {"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}}}' \
  http://localhost:3000/run

프로젝트 구조

figmamind/
├── docs/                     # Documentação detalhada
├── examples/                 # Exemplos de uso
│   ├── input/                # Dados de exemplo para entrada 
│   └── output/               # Dados de exemplo de saída
├── src/                      # Código-fonte
│   ├── mcp/                  # Implementação do MCP
│   ├── processor/            # Processamento de componentes
│   ├── services/             # Serviços (Figma API)
│   ├── transformers/         # Transformadores específicos
│   ├── types/                # Definições de tipos TypeScript
│   └── utils/                # Utilitários
├── tests/                    # Testes automatizados
└── scripts/                  # Scripts utilitários

테스트

자동화된 테스트를 실행합니다.

# Teste da transformação do Figma
npm run test:transform

# Teste dos endpoints MCP
npm run test:mcp

# Teste da API REST de transformação
npm run test:api

# Executa o teste principal
npm test

선적 서류 비치

자세한 내용은 docs/ 폴더를 참조하세요.

TypeScript로 변환

이 프로젝트는 타이핑, 코드 견고성, 유지 관리성을 개선하기 위해 JavaScript에서 TypeScript로 변환되었습니다. 변환에는 다음이 포함됩니다.

모든 데이터 구조에 대한 인터페이스 및 유형 추가
모든 .js 파일을 .ts 로 변환
함수 매개변수 및 반환에 대한 강력한 타이핑 구현
TypeScript를 사용하여 자동화된 테스트 만들기

특허

MIT

João Pereira가 개발

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Figma 디자인에서 구성 요소를 추출하여 모형과 AI 도구에서 쉽게 사용할 수 있도록 표준화된 JSON 형식으로 변환하여 인터페이스를 재구성합니다.

Appeared in Searches

Tools or methods to convert Figma designs into code