Repolode
제출하기
southleft

southleft/figma-console-mcp

AI 어시스턴트가 Figma에 연결해 디자인 토큰을 추출하고, 디자인을 만들고 편집하며, 디자인과 코드의 일치 여부 및 접근성을 검사할 수 있게 해주는 MCP 서버입니다.

대체할 수 있는 제품:Figma Dev Mode

GitHub에서 보기웹사이트
스타
3,165
포크
287
열린 이슈
9
마지막 커밋
9일 전

어떤 프로젝트인가요?

Figma Console MCP는 Claude, Cursor, Codex 같은 AI 클라이언트에 Figma 파일을 제공하는 Model Context Protocol 서버입니다. 변수, 컴포넌트, 스타일, 파일 구조를 읽을 수 있으며, Figma Desktop에서 실행되는 Desktop Bridge 플러그인을 통해 프레임과 컴포넌트를 만들고, 변수와 모드를 관리하며, 텍스트, 채우기, 레이아웃을 편집하는 등 Figma에 변경 사항을 반영할 수도 있습니다.

기본적인 읽기와 쓰기를 넘어 디자인 시스템 작업도 지원합니다. Figma 변수와 DTCG JSON 및 여러 토큰 형식을 양방향으로 동기화하고, Figma 컴포넌트와 코드 구현을 대조하고, WCAG 스타일의 접근성 린트를 실행하고, 컴포넌트 문서를 생성할 수 있습니다. 도구는 토큰, 변형, 바인딩 등의 구조화된 데이터를 반환하므로 생성되는 코드가 팀에서 사용하는 스택을 따릅니다.

전체 쓰기 권한을 사용하려면 Node.js에서 실행되며 130개 도구를 제공하는 NPX 또는 Local Git 설정이 필요합니다. Cloud Mode에서는 Node.js 없이 Claude.ai 같은 웹 AI 클라이언트를 실행 중인 플러그인과 연결할 수 있으며, 105개 도구를 제공합니다. Remote SSE 엔드포인트는 읽기 전용입니다.

핵심 기능

  • 01AI에서 사용할 수 있도록 Figma 변수, 컴포넌트, 스타일, 파일 구조를 읽습니다
  • 02Figma에서 프레임, 컴포넌트, 텍스트, 채우기, 오토 레이아웃을 만들고 편집합니다
  • 03DTCG JSON, CSS, Tailwind 및 기타 형식과 디자인 토큰을 양방향으로 동기화합니다
  • 04Figma 컴포넌트와 코드 구현을 비교하고 차이를 보고합니다
  • 05WCAG 기반 접근성 검사와 컴포넌트 접근성 점수 카드를 실행합니다
  • 06Claude Code, Cursor, Windsurf, Claude Desktop, Codex, Gemini CLI에서 사용할 수 있습니다

활용 사례

  • AI 어시스턴트가 Figma 파일에서 직접 UI 목업이나 컴포넌트를 생성하도록 합니다
  • 팀 전체에서 Figma 변수와 코드의 디자인 토큰을 동기화합니다
  • 최종 승인 전에 코드로 구현한 컴포넌트가 Figma 디자인과 일치하는지 확인합니다
  • 디자인 시스템의 명명 규칙, 토큰, 접근성 문제를 점검합니다

빠른 시작

  1. 1

    Figma 도움말에서 Figma 개인 액세스 토큰을 발급받으세요

  2. 2

    npx를 사용해 MCP 클라이언트에 서버를 추가하세요(Claude Code 예시)

    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
  3. 3

    Figma Desktop에서 Desktop Bridge 플러그인 매니페스트를 가져와 실행하세요

  4. 4

    구성을 불러오려면 MCP 클라이언트를 다시 시작하세요

사용 전 알아둘 점

  • 모든 기능을 사용하려면 Figma Desktop과 Desktop Bridge 플러그인 연결이 필요합니다.
  • Remote SSE 모드는 읽기 전용이며 디자인을 만들거나 수정할 수 없습니다.
  • variables와 같은 일부 기능을 사용하려면 Figma Enterprise 플랜이 필요합니다.

포함된 컬렉션

오픈소스 AI 에이전트 프레임워크와 앱MCP 서버

토픽

#figma#mcp#design-system#design-tokens#ai-agent#accessibility#typescript#ai#design-systems#figma-api

자주 묻는 질문

figma-console-mcp은(는) 무엇인가요?
AI 어시스턴트가 Figma에 연결해 디자인 토큰을 추출하고, 디자인을 만들고 편집하며, 디자인과 코드의 일치 여부 및 접근성을 검사할 수 있게 해주는 MCP 서버입니다. Figma Console MCP는 Claude, Cursor, Codex 같은 AI 클라이언트에 Figma 파일을 제공하는 Model Context Protocol 서버입니다. 변수, 컴포넌트, 스타일, 파일 구조를 읽을 수 있으며, Figma Desktop에서 실행되는 Desktop Bridge 플러그인을 통해 프레임과 컴포넌트를 만들고, 변수와 모드를 관리하며, 텍스트, 채우기, 레이아웃을 편집하는 등 Figma에 변경 사항을 반영할 수도 있습니다.
figma-console-mcp은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
figma-console-mcp은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
figma-console-mcp은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. figma-console-mcp의 마지막 커밋은 2026년 10월 29일입니다.
figma-console-mcp은(는) 어디에 사용할 수 있나요?
AI 어시스턴트가 Figma 파일에서 직접 UI 목업이나 컴포넌트를 생성하도록 합니다 팀 전체에서 Figma 변수와 코드의 디자인 토큰을 동기화합니다 최종 승인 전에 코드로 구현한 컴포넌트가 Figma 디자인과 일치하는지 확인합니다 디자인 시스템의 명명 규칙, 토큰, 접근성 문제를 점검합니다
figma-console-mcp는 어떻게 설치하나요?
Figma 도움말에서 Figma 개인 액세스 토큰을 발급받으세요 npx를 사용해 MCP 클라이언트에 서버를 추가하세요(Claude Code 예시): claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest Figma Desktop에서 Desktop Bridge 플러그인 매니페스트를 가져와 실행하세요 구성을 불러오려면 MCP 클라이언트를 다시 시작하세요
figma-console-mcp은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/southleft/figma-console-mcp

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트