Figma

officialfigmadesign

maintained by Figma ↗

Figma가 직접 만들고 관리하는 공식 MCP 서버다. Claude가 Figma 파일의 레이아웃, 컴포넌트, 스타일 정보를 읽고 직접 Figma 파일에 콘텐츠를 생성·수정하는 작업을 할 수 있다. 인증은 OAuth 방식만 지원한다. Personal Access Token은 MCP 서버 수준에서 지원하지 않는다. 설정 후 /mcp 커맨드에서 Authenticate를 클릭해 브라우저 OAuth 로그인을 완료하면 된다. Remote MCP 서버(https://mcp.figma.com/mcp)에 연결하는 방식을 사용한다.

무엇을 할 수 있나

파일 구조 읽기

Figma 파일의 전체 레이어 구조와 프레임 목록을 가져온다.

컴포넌트 스펙 조회

특정 컴포넌트의 크기, 색상, 폰트, 간격 등 디자인 스펙을 정확히 읽는다.

스타일 / 변수 추출

색상 팔레트, 타이포그래피, 변수 등 파일에 정의된 디자인 토큰을 가져온다.

Figma 파일에 직접 쓰기

프레임, 컴포넌트, 변수, 자동 레이아웃을 Figma 파일에 직접 생성·수정한다. 현재 베타 기간 중 무료이며 향후 사용량 기반 과금으로 전환 예정이다.

디자인 → 코드 변환

Figma 컴포넌트 스펙을 읽어 React, HTML/CSS 등 실제 코드를 생성한다.

Claude Desktop — Remote MCP (권장)

~/Library/Application Support/Claude/claude_desktop_config.json 에 아래 내용을 추가한다. 설정 후 Claude를 재시작하고, /mcp 커맨드에서 figma → Authenticate를 클릭해 OAuth 로그인을 완료하세요.

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

API 키 불필요. OAuth로 인증하며 액세스 토큰 유효 기간은 90일입니다.

Claude Code

아래 명령어로 Remote MCP를 추가한다. API 키 없이 OAuth로 인증한다. 설정 후 /mcp 커맨드에서 figma → Authenticate를 클릭해 로그인하세요.

claude mcp add --transport http figma https://mcp.figma.com/mcp

기본값은 현재 프로젝트에만 등록(local). 모든 프로젝트에서 쓰려면 --scope user를 추가하세요.

GitHub ↗