Figma MCP Server

이 모델 컨텍스트 프로토콜 서버를 사용하면 Cursor 와 기타 AI 기반 코딩 도구가 Figma 파일에 액세스할 수 있습니다.

Cursor가 Figma 디자인 데이터에 액세스할 수 있으면 스크린샷을 붙여넣는 것과 같은 대체 방식보다 한 번에 디자인을 정확하게 제작하는 데 훨씬 더 효과적입니다.

데모

Figma 디자인 데이터를 사용하여 Cursor에서 UI를 구축하는 데모를 시청하세요.

Related MCP server: Figma MCP Server

작동 원리

1. IDE의 채팅을 엽니다(예: 커서의 에이전트 모드).

2. Figma 파일, 프레임 또는 그룹에 대한 링크를 붙여넣습니다.

3. Cursor에게 Figma 파일로 무언가를 하라고 요청합니다. 예를 들어, 디자인을 구현합니다.

4. 커서는 Figma에서 관련 메타데이터를 가져와서 코드를 작성하는 데 사용합니다.

이 MCP 서버는 Cursor와 함께 사용하도록 특별히 설계되었습니다. Figma API 에서 컨텍스트를 응답하기 전에, 응답을 단순화하고 변환하여 가장 관련성 높은 레이아웃 및 스타일 정보만 모델에 제공합니다.

모델에 제공되는 컨텍스트의 양을 줄이면 AI의 정확도가 높아지고 응답의 관련성도 높아집니다.

시작하기

많은 코드 편집기와 기타 AI 클라이언트는 구성 파일을 사용하여 MCP 서버를 관리합니다.

다음을 구성 파일에 추가하여 figma-developer-mcp 서버를 구성할 수 있습니다.

참고: 이 서버를 사용하려면 Figma 액세스 토큰을 생성해야 합니다. Figma API 액세스 토큰 생성 방법은 여기에서 확인할 수 있습니다.

맥OS / 리눅스

지엑스피1

윈도우

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

또는 env 필드에 FIGMA_API_KEY 와 PORT 설정할 수 있습니다.

Framelink Figma MCP 서버를 구성하는 방법에 대한 자세한 정보가 필요하면 Framelink 문서를 참조하세요.

스타 역사

자세히 알아보기

Framelink Figma MCP 서버는 간단하지만 강력합니다. Framelink 사이트에서 자세히 알아보고 최대한 활용해 보세요.

스폰서

🥇 골드 스폰서

🥈 실버 스폰서

🥉 브론즈 스폰서

😻 더 작은 후원자들