MCP 服务器

NCDS Figma MCP Server

Enables AI coding tools like Cursor to access Figma design data through the Model Context Protocol, allowing accurate implementation of designs across frameworks. Based on NCDS (NHN Commerce Design System) with enhanced source generation capabilities.

README

<div align="center"> <h1>Framelink Figma MCP 서버 + NCDS</h1> <p> 🌐 다른 언어: <a href="README.md">English (영어)</a> | <a href="README.ja.md">日本語 (일본어)</a> | <a href="README.zh-cn.md">简体中文 (중국어 간체)</a> | <a href="README.zh-tw.md">繁體中文 (중국어 번체)</a> </p> <h3>코딩 에이전트에게 Figma 데이터에 대한 접근 권한을 부여하세요.<br/>한 번에 모든 프레임워크에서 디자인을 구현하세요.</h3> <a href="https://npmcharts.com/compare/figma-developer-mcp?interval=30"> <img alt="주간 다운로드" src="https://img.shields.io/npm/dm/figma-developer-mcp.svg"> </a> <a href="https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE"> <img alt="MIT 라이선스" src="https://img.shields.io/github/license/GLips/Figma-Context-MCP" /> </a> <a href="https://framelink.ai/discord"> <img alt="Discord" src="https://img.shields.io/discord/1352337336913887343?color=7389D8&label&logo=discord&logoColor=ffffff" /> </a> <br /> <a href="https://twitter.com/glipsman"> <img alt="Twitter" src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fglipsman&label=%40glipsman" /> </a> </div>

<br/>

이 프로젝트는 Framelink Figma MCP 서버를 포크하여 NCDS 기반의 추가 구현을 포함합니다. Cursor 및 기타 AI 기반 코딩 도구에 Model Context Protocol 서버를 통해 Figma 파일에 대한 접근 권한을 부여하세요.

Cursor가 Figma 디자인 데이터에 접근할 수 있을 때, 스크린샷을 붙여넣는 것과 같은 대안적인 접근 방식보다 훨씬 더 정확하게 디자인을 한 번에 구현할 수 있습니다.

데모

Figma 디자인 데이터로 Cursor에서 UI를 구축하는 데모 시청

작동 방식

IDE의 채팅을 엽니다 (예: Cursor의 에이전트 모드).
Figma 파일, 프레임 또는 그룹에 대한 링크를 붙여넣습니다.
Cursor에게 Figma 파일로 무언가를 하도록 요청합니다 (예: 디자인 구현).
Cursor는 Figma에서 관련 메타데이터를 가져와 코드를 작성하는 데 사용합니다.

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

모델에 제공되는 컨텍스트의 양을 줄이면 AI의 정확도를 높이고 응답을 더 관련성 있게 만드는 데 도움이 됩니다.

시작하기

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

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

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

MacOS / Linux

{
  "mcpServers": {
    "NCDS Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-mcp-ncds", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

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