glips/figma-context-mcp
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
Cursor와 같은 AI 코딩 에이전트에게 Figma 레이아웃 정보를 제공하는 MCP 서버입니다
개요
Figma용 Framelink MCP 코딩 에이전트에게 Figma 데이터에 대한 접근 권한을 주세요. 어떤 프레임워크든 원샷으로 디자인을 구현할 수 있습니다. 이 모델 컨텍스트 프로토콜 서버를 통해 커서와 기타 AI 기반 코딩 도구들이 Figma 파일에 접근할 수 있도록 하세요. 커서가 Figma 디자인 데이터를 사용할 수 있을 때, 스크린샷을 붙여넣는 대체 방식보다 한 번에 정확하게 디자인을 만드는 데 더 뛰어납니다. Figma 디자인 데이터를 활용해 커서에서 UI 빌드 데모를 시청하세요 1. IDE 채팅을 열기(예: 커서의 에이전트 모드). 2. Figma 파일, 프레임 또는 그룹에 링크를 붙여넣기. 3. Cursor에게 Figma 파일로 무언가를 요청하기—예: 디자인을 구현하기. 4. 커서는 Figma에서 관련 메타데이터를 가져오고, 이를 사용해 코드를 작성한다. 이 MCP 서버는 Cursor와 함께 사용하도록 특별히 설계되었습니다. Figma API에서 맥락을 제공하기 전에 응답을 단순화하고 번역하여 모델에 가장 적합한 레이아웃과 스타일링 정보만 제공하도록 합니다.
개요(AI 번역)
Figma용 Framelink MCP 코딩 에이전트에게 Figma 데이터에 대한 접근 권한을 주세요. 어떤 프레임워크에서든 원샷으로 디자인을 구현하세요.
이 모델 컨텍스트 프로토콜 서버를 통해 커서와 기타 AI 기반 코딩 도구들이 Figma 파일에 접근할 수 있도록 하세요.
커서가 Figma 디자인 데이터에 접근할 수 있을 때, 스크린샷 붙여넣기 같은 대체 방식보다 훨씬 정확하게 디자인을 한 번에 끝내는 데 훨씬 더 능숙합니다.
빠른 시작 지침을 →
데모
Figma 디자인 데이터를 활용해 커서에서 UI 빌드 데모를 시청하세요
작동 방식
- IDE 채팅을 엽니다(예: 커서의 에이전트 모드).
- Figma 파일, 프레임 또는 그룹에 링크를 붙여넣습니다.
- 커서에게 Figma 파일로 무언가를 요청합니다—예를 들어, 디자인을 구현하는 것.
- 커서는 Figma에서 관련 메타데이터를 가져와 코드를 작성하는 데 사용합니다.
이 MCP 서버는 Cursor와 함께 사용하도록 특별히 설계되었습니다. Figma API에서 맥락을 제공하기 전에 응답을 단순화하고 번역하여 모델에 가장 적합한 레이아웃과 스타일링 정보만 제공하도록 합니다.
모델에 제공되는 맥락의 양을 줄이면 AI가 더 정확해지고 응답이 더 관련성 있게 만들어집니다.
시작하기
이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.
README
원문 README의 일부입니다. 원문 보기.
Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
When Cursor has access to Figma design data, it’s way better at one-shotting designs accurately than alternative approaches like pasting screenshots.
See quickstart instructions →
Demo
Watch a demo of building a UI in Cursor with Figma design data
How it works
- Open your IDE’s chat (e.g. agent mode in Cursor).
- Paste a link to a Figma file, frame, or group.
- Ask Cursor to do something with the Figma file—e.g. implement the design.
- Cursor will fetch the relevant metadata from Figma and use it to write your code.
This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.
Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.
Getting Started
Many code editors and other AI clients use a configuration file to manage MCP servers.
The figma-developer-mcp server can be configured by adding the following to your configuration file.
설치
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio설정
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}