Figma MCP 서버

디자인중급전송 방식: stdio

Figma MCP 서버는 Claude Code를 Figma API에 연결하여 터미널에서 직접 디자인-투-코드 워크플로우를 구현합니다. 컴포넌트 계층 구조 검사, 색상/타이포그래피/간격 토큰 추출, 디자인 사양 읽기, Figma 목업에 맞는 프론트엔드 코드 생성이 가능합니다. 파일, 페이지, 개별 프레임 탐색을 지원하여 값을 수동으로 복사하지 않고도 비주얼 디자인을 픽셀 퍼펙트한 구현으로 전환할 수 있습니다.

Figma디자인UI디자인 토큰코드 생성

설치 방법

claude mcp add figma -- npx -y figma-developer-mcp --token=your_figma_token

설정 예시

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--token=figd_your_personal_access_token"
      ]
    }
  }
}

지원 기능

디자인 읽기

에셋 내보내기

컴포넌트 목록

디자인 토큰 추출

댓글 읽기

디자인 편집

프로토타입 생성

팀 관리

실행 미리보기

Figma MCP 서버

Figma MCP 서버에 대해

MCP(Model Context Protocol) 서버는 Claude Code를 외부 도구, API, 데이터 소스와 연결합니다. Figma MCP 서버은(는) 디자인 카테고리의 중급 수준 MCP 서버로, Claude가 실제 서비스와 상호작용하여 라이브 데이터에 접근하고 내장 기능을 넘어서는 작업을 수행할 수 있도록 합니다.