GitHub Trending웹 · 프론트엔드오늘의 주요

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]` 접두사를 달아 구분된다.
AI 요약 안내

AI가 한국어로 정리한 내용입니다. 정확한 정보는 원문을 확인해 주세요.

요약 원칙 ↗