MCP디자인·이미지

Figma

피그마 디자인 데이터를 읽어 화면을 코드로 옮깁니다. 색·간격·레이어 구조를 그대로 가져옵니다.

제공 Framelink라이선스 MIT갱신 2026년 9월 9일

설치하기

Node.js가 설치돼 있어야 합니다. 터미널에서 `node -v`로 확인하세요. 키는 피그마 설정 → Security → Personal access tokens에서 발급합니다. 키를 명령에 직접 넣으므로 셸 기록에 남는 점에 유의하세요. 설정 파일 — macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json. 저장한 뒤 Claude Desktop을 완전히 종료했다 다시 켜야 반영됩니다.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=여기에키",
        "--stdio"
      ]
    }
  }
}

채워야 하는 값

키	설명	필수
--figma-api-key	피그마 개인 액세스 토큰환경변수가 아니라 명령 인자로 넣습니다.	필수

설치와 실행은 사용자 환경에서 이뤄집니다. team-ai는 이 도구를 호스팅하거나 대신 실행하지 않습니다. 제공처와 저장소를 확인한 뒤 설치하세요.

설명

디자인 파일의 레이어·스타일·컴포넌트를 읽습니다. 시안을 코드로 옮길 때 값을 눈으로 옮겨 적지 않아도 됩니다. 읽기 전용입니다. 피그마 파일을 고치지 않습니다.

변경 이력

2026년 9월 9일라이브러리에 등록