Figma API 토큰이 필요 없는 오픈 소스 Figma MCP 서버를 구축했습니다

지난 몇 달 동안, AI 코딩 어시스턴트(AI coding assistants)들은 Figma 디자인을 프로덕션 코드(production code)로 변환하는 능력이 놀라울 정도로 향상되었습니다.

하지만 사용 가능한 거의 모든 Figma MCP 서버를 시도해 본 결과, 저는 계속해서 동일한 문제들에 직면했습니다.

• Figma API 토큰이 필요했습니다.
• 긴 세션 동안 API 속도 제한(API rate limits)이 발생하여 답답했습니다.
• AI가 Figma에서 실제 에셋(assets)을 내보내는 대신, 자리 표시자(placeholder) 아이콘이나 잘못된 이미지를 생성하는 경우가 많았습니다.
• 여러 Figma 파일을 넘나들며 작업하는 것이 번거로웠습니다.

그래서 저는 직접 만들기로 결심했습니다.

오늘 저는 Figma MCP Console을 오픈 소스로 공개합니다.

Figma MCP Console이란 무엇인가요?

Figma MCP Console은 AI 어시스턴트를 Figma 데스크톱(Figma Desktop)과 직접 연결하는 로컬 MCP 서버입니다.

다음과 같은 도구들과 함께 작동합니다:

• Claude CLI
• Claude Desktop
• Codex CLI
• Cursor
• VS Code (GitHub Copilot)
• Windsurf
• Antigravity
• 그리고 모든 MCP 호환 클라이언트(MCP-compatible client).

Figma REST API에 의존하는 대신, AI 클라이언트와 Figma 플러그인 사이의 로컬 브리지(local bridge)를 통해 통신합니다.

그것은 다음을 의미합니다:

• API 토큰 불필요
• API 속도 제한(API rate limits) 없음
• 낮은 지연 시간(lower latency)
• 현재 열려 있는 Figma 파일과의 직접적인 상호작용

제가 이것을 만든 이유

가장 큰 고충은 코드를 생성하는 것이 아니었습니다.

AI가 원래의 디자인을 충실하게 재현하도록 만드는 것이었습니다.

대부분의 도구는 다음과 같은 결과를 출력하곤 했습니다:

• 다른 아이콘
• 다른 일러스트레이션
• 다른 간격(spacing)
• 다른 에셋(assets)

레이아웃은 비슷해 보였지만, 실제로 동일한 디자인은 아니었습니다.

저는 AI가 대체물을 환각(hallucinating)하는 대신, Figma에서 실제 에셋을 직접 내보내기를 원했습니다.

무엇을 할 수 있나요?

1. Figma → 코드

Figma 프레임 링크를 붙여넣으세요.

AI는 다음과 같은 작업을 수행할 수 있습니다:

• 디자인 검사(inspect)
• 아이콘 내보내기(export)
• 이미지 내보내기(export)
• 프로덕션 준비가 된 코드(production-ready code) 생성
• 최종 구현물을 스크린샷과 비교

코드를 생성한 후 멈추는 대신, AI가 스크린샷을 찍고 이를 원래의 Figma 프레임과 비교하도록 권장합니다.

이러한 자기 검증(self-verification) 단계는 최종 결과물을 극적으로 향상시킵니다.

2. 요구사항(Requirement) → Figma

반대 방향으로도 작업할 수 있습니다.

예를 들어:

히어로 섹션(hero section), 가격 카드(pricing cards), 푸터(footer)가 포함된 SaaS 랜딩 페이지를 디자인해줘.

AI는 오토 레이아웃(Auto Layout)을 사용하여 Figma 내부에 직접 디자인을 생성합니다.

모든 것을 그린 후, AI는 자신의 작업물을 스크린샷으로 찍고 시각적 오류를 자동으로 수정합니다.

3. 디자인 토큰 동기화(Design Token Synchronization)

이 서버는 Figma 변수(variables)와 디자인 토큰(design tokens)을 읽을 수 있습니다.

이를 통해 다음과 같은 요소들을 애플리케이션의 디자인 시스템(design system)과 훨씬 쉽게 동기화할 수 있습니다:

• 색상(colors)
• 타이포그래피(typography)
• 간격(spacing)
• 테마(themes)

4. 일괄 편집(Bulk Editing)

수백 개의 레이어를 수동으로 편집하는 대신, AI에게 다음과 같은 작업을 요청할 수 있습니다:

• 레이어 이름 변경(rename layers)
• 텍스트 교체(replace text)
• 프레임 재구성(reorganize frames)
• 컴포넌트 업데이트(update components)

여러 개의 Figma 파일? 문제없습니다.

제가 정말 원했던 기능 중 하나는 여러 프로젝트에 대한 지원이었습니다.

모든 AI 세션은 동일한 로컬 브리지(local bridge)에 연결됩니다.

여러 개의 Figma 파일을 동시에 열어둘 수 있습니다.

AI는 사용자의 프롬프트(prompt)를 기반으로 적절한 파일을 단순히 선택합니다.

예를 들어:

디자인 시스템(Design System) 파일의 기본 색상(primary color)을 랜딩 페이지(Landing Page) 파일의 CTA 버튼에 복사해줘.

추가적인 설정은 필요하지 않습니다.

설치(Installation)

글로벌 설치는 필요하지 않습니다.

단순히 다음을 실행하세요:

npx -y figma-mcp-console

그 다음 Figma 개발용 플러그인(development plugin)을 한 번만 가져오기(import) 하세요.

그게 전부입니다.

기술 스택(Tech Stack)

이 프로젝트는 다음을 중심으로 구축되었습니다:

• 모델 컨텍스트 프로토콜 (Model Context Protocol (MCP))
• TypeScript
• Node.js
• Figma 데스크톱 플러그인 API (Figma Desktop Plugin API)
• 로컬 웹소켓 브리지 (Local WebSocket bridge)

왜 Figma API를 사용하지 않나요?

Figma API는 많은 워크플로우(workflows)에 매우 훌륭합니다.

하지만 상호작용하는 AI 디자인 세션을 위해, 저는 다음과 같은 특성을 가진 것을 원했습니다:

• 즉각적으로 작동함
• API 인증(authentication)을 피함
• 속도 제한(rate limits)의 영향을 받지 않음
• 현재 열려 있는 문서와 직접 통신함

로컬 브리지(local bridge)가 훨씬 더 적합한 방식임이 밝혀졌습니다.

로드맵 (Roadmap)

현재 제가 작업 중인 몇 가지 기능은 다음과 같습니다:

• 더 스마트한 에셋 추출 (asset extraction)
• 개선된 이미지 매칭 (image matching)
• 더 나은 디자인 토큰 동기화 (design token synchronization)
• 더 많은 편집 작업 (editing operations)
• 개선된 멀티 파일 워크플로우 (multi-file workflows)

피드백 환영

이 프로젝트는 여전히 발전 중이며, AI 지원 UI 개발을 사용하는 개발자분들의 피드백을 간절히 기다리고 있습니다.

GitHub:

https://github.com/hoangann2000/figma-mcp-console

npm:

https://www.npmjs.com/package/figma-mcp-console

아이디어, 기능 요청 또는 버그 보고가 있다면 언제든지 이슈(issue)를 생성하거나 토론(discussion)을 시작해 주세요.

여러분이 Figma와 함께 MCP를 어떻게 사용하고 계신지 꼭 듣고 싶습니다.