GLips/Figma-Context-MCP

어떤 프로젝트인가요?

핵심 기능

• 01붙여 넣은 링크를 통해 Figma 파일, 프레임 또는 그룹의 레이아웃 및 스타일 메타데이터를 가져옵니다.
• 02Figma API 응답을 간소화해 모델에 가장 관련성 높은 디자인 정보만 전달합니다.
• 03JSON 파일에서 설정하며 npx로 실행하는 MCP 서버로 동작합니다.
• 04명령줄 플래그 또는 FIGMA_API_KEY 환경 변수를 통해 Figma 액세스 토큰을 받습니다.

활용 사례

• 스크린샷 대신 레이아웃 컨텍스트를 활용해 Cursor에서 Figma 디자인을 프런트엔드 코드로 구현합니다.
• AI 에이전트가 UI를 개발하면서 어떤 프레임워크에서든 컴포넌트 구조와 간격을 파악하도록 합니다.
• 기존 Figma 프레임을 에이전트 워크플로에 입력해 화면을 빠르게 프로토타이핑합니다.

빠른 시작

1. 1

   README에 링크된 안내에 따라 Figma 액세스 토큰을 만듭니다

2. 2

   API 키를 사용해 에디터의 MCP 설정 파일(macOS/Linux)에 MCP 서버 설정을 추가합니다

   npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
3. 3

   AI 클라이언트를 다시 시작하고 Figma 파일, 프레임 또는 그룹 링크를 채팅에 붙여 넣습니다

사용 전 알아둘 점

• !서버가 디자인 데이터를 가져오려면 먼저 Figma 액세스 토큰이 필요합니다.
• !Cursor 전용으로 설계되어 다른 AI 클라이언트에서는 추가 설정이 필요할 수 있습니다.

토픽

자주 묻는 질문

Figma-Context-MCP은(는) 무엇인가요?

Cursor 같은 AI 코딩 에이전트가 Figma 파일의 레이아웃과 스타일 데이터에 접근해 디자인을 구현할 수 있도록 하는 MCP 서버입니다. Framelink MCP for Figma는 Cursor 같은 AI 코딩 도구를 Figma API에 연결하는 Model Context Protocol 서버입니다. 사용자가 Figma 파일, 프레임 또는 그룹 링크를 채팅에 붙여 넣으면 에이전트가 관련 레이아웃 및 스타일 메타데이터를 가져와 그에 맞는 코드를 작성합니다.

Figma-Context-MCP은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

Figma-Context-MCP은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

Figma-Context-MCP은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. Figma-Context-MCP의 마지막 커밋은 2026년 10월 16일입니다.

Figma-Context-MCP은(는) 어디에 사용할 수 있나요?

스크린샷 대신 레이아웃 컨텍스트를 활용해 Cursor에서 Figma 디자인을 프런트엔드 코드로 구현합니다. AI 에이전트가 UI를 개발하면서 어떤 프레임워크에서든 컴포넌트 구조와 간격을 파악하도록 합니다. 기존 Figma 프레임을 에이전트 워크플로에 입력해 화면을 빠르게 프로토타이핑합니다.

Figma-Context-MCP는 어떻게 설치하나요?

README에 링크된 안내에 따라 Figma 액세스 토큰을 만듭니다 API 키를 사용해 에디터의 MCP 설정 파일(macOS/Linux)에 MCP 서버 설정을 추가합니다: npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio AI 클라이언트를 다시 시작하고 Figma 파일, 프레임 또는 그룹 링크를 채팅에 붙여 넣습니다

Figma-Context-MCP은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/GLips/Figma-Context-MCP