southleft/figma-console-mcp
Figma를 AI API로 쓰는 MCP 서버 공개
원제 southleft/figma-console-mcp
스타 3,130당일 +242TypeScript
Key Point
AI가 Figma 디자인을 코드처럼 다룰 수 있게 해주며, 클라우드 모드로 Node.js 없이 웹에서 바로 쓸 수 있어 디자인 자동화의 진입장벽을 낮춘다.
핵심 요약
- Figma Console MCP는 디자인 시스템을 API로 활용하는 Model Context Protocol 서버로, Claude 등 AI 어시스턴트를 Figma에 연결한다.
- 설계 → 코드 양방향 연동을 지원하며 Figma에 직접 쓰기, 디자인-코드 동기화 검증, 접근성 및 디자인 시스템 건강도 체크가 가능하다.
- 토큰·변형체·바인딩 같은 구조화된 데이터를 정확히 넘겨서 생성 코드가 팀의 기존 스택과 규약을 따르도록 한다.
- NPX 설정(추천), 클라우드 모드(웹 AI용), 로컬 Git, 읽기 전용 원격 SSE 등 네 가지 연결 방식 중 선택 가능하며, 각각 130개, 105개, 130개, 읽기 전용 도구 제공한다.
- NPX는 Node.js 18+ 필요, Figma 개인 액세스 토큰 생성, 데스크톱 앱에서 플러그인 로드로 ~10분 내 설정, 설계 생성·변수 관리·실시간 모니터링 모두 가능하다.
- 클라우드 모드는 Node.js 없이 Claude.ai·v0·Replit 같은 웹 AI에서 Figma 디자인 생성·수정 가능하며, 플러그인 페어링 코드로 연결된다.
- 독립형 도구로 제공되는 '디자인 시스템 건강도 감사'는 여섯 가지 항목(이름, 토큰, 메타데이터, 접근성, 일관성, 커버리지)을 점수로 평가하고 자동 수정 지침을 제시한다.
- 셰이더·그리드·자동 레이아웃, OKLCH·Display P3 색상, 텍스트 감싸기, 변수 폰트축 등 최신 기능(v1.46.0)을 지원하며 DTCG 토큰 포맷 9가지 이상으로 내보낼 수 있다.
- 코드베이스 스캔으로 실제 스타일을 토큰 형태로 추출, Storybook 스캐폴딩, 토큰을 Figma 변수로 역동기화, 토큰 소스 추적, 변형 도입 시점 이진 탐색까지 가능하다.
- 프레임·도형·텍스트 생성, 레이아웃 적용, 컴포넌트 세트 한 호출로 생성, 여러 파일 동시 실행, 슬롯·애니메이션·FigJam 보드·슬라이드 데크 프로그래매틱 관리를 제공한다.
- WCAG 접근성 14개 검사 항목, 컴포넌트별 점수, axe-core 코드 스캔, 디자인-코드 동기화 검증, 버전 이력 추적 및 마크다운 변경 로그 생성 기능도 포함된다.
- 모든 응답에 `_mcp: "figma-console-mcp"` 태그를 붙여 여러 Figma MCP 실행 시 속성이 명확하고, 에러는 `[figma-console-mcp]` 접두사를 달아 구분된다.
저장소 보기 ↗github.com