southleft/figma-console-mcp

해결하는 문제

Figma Console MCP는 AI 어시스턴트(예: Claude)와 Figma 사이에 양방향 브리지 역할을 하며, 디자인 시스템을 API처럼 다룹니다. AI가 디자인 토큰을 읽고 UI 컴포넌트를 생성하며, 디자인-코드 일관성과 접근성에 대해 결정론적인 검사를 수행함으로써 디자인과 코드 사이의 수작업 간격을 제거합니다.

작동 방식

이 프로젝트는 Model Context Protocol (MCP)를 구현하여 AI 에이전트가 여러 연결 모드로 Figma와 상호작용할 수 있도록 합니다.

• 로컬 모드 (NPX/Git): 데스크톱 브리지 플러그인을 통해 연결되어 완전한 쓰기 접근 권한과 실시간 모니터링(콘솔 로그, 선택 추적)을 제공합니다.
• 클라우드 모드: 웹 AI 클라이언트(예: Claude.ai 또는 v0)에서 오는 명령을 WebSocket 릴레이를 통해 Figma 데스크톱 플러그인으로 전달합니다.
• 원격 SSE: 로컬 설치 없이 디자인 데이터를 탐색할 수 있는 읽기 전용 연결입니다.

Figma REST API와 Figma Plugin API를 조합하여 변수, 컴포넌트, 레이아웃을 관리합니다.

대상 사용자

• 컴포넌트, 프레임, 레이아웃의 자동 생성에 AI를 활용하고 싶은 디자이너
• 디자인 토큰을 코드로 추출하거나 코드베이스 스타일을 Figma로 동기화해야 하는 개발자
• 디자인 시스템의 건강 상태, 접근성(WCAG), Figma와 프로덕션 코드 간의 일관성을 유지하는 데 집중하는 디자인 엔지니어

주요 기능

• 양방향 동기화: Figma 변수를 여러 JSON 형식으로 내보내거나, 코드 측 편집 내용을 Figma로 푸시할 수 있습니다.
• 디자인 생성: AI 프롬프트를 통해 Figma 내에서 UI 컴포넌트, 프레임, 레이아웃을 직접 생성할 수 있습니다.
• 건강 감사: 이름 지정, 토큰, 접근성, 일관성에 대한 Lighthouse 스타일 스코어 감사 기능을 제공합니다.
• 디자인-코드 일관성: Figma 컴포넌트와 코드 구현을 결정론적으로 비교합니다.
• 접근성 스캔: 14개의 WCAG 디자인 검사를 수행하고, 준수 태그와 컴포넌트 스코어카드를 제공합니다.
• 버전 인식: 이분 탐색 블레이밍을 통해 속성 변경 사항을 추적하고, 마크다운 형식의 변경 로그를 생성합니다.