현재 작성되는 글은 라이브로 프로젝트에서 Figma MCP를 적용하는 과정을 기록하는 글이다.

웬만한 과정은 Vscode 에서 제공하는 글인 Use MCP servers in VS Code (Preview) 를 참고하여 처리한다.

1. 프로젝트 루트 파일에 config 파일 생성

프로젝트 루트 폴더에서 .vscode/mcp.json 파일 내 사용 할 MCP server 의 설정 파일을 생성한다.

사용 가능한 mcp 서버들은 해당 깃허브 들에 잘 정리 되어 있다.

해당 깃허브에서 Figma MCP Server 에 해당하는 레파지토리에서 작성 할 데이터 양식을 복사 붙혀넣기 해주자

{
  "servers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

2. 코파일럿 에이전트에 MCP 서버 추가

위에서 제공한 레파지토리의 리드미에선 mcpServers 라는 키 값으로 적혀 있으나 해당 json 파일은 커서 기준이고 vscode 에선 servers 라는 키값을 사용해야 한다.

mcpServers 를 사용한다고 해서 구동이 안되는건 아닌데 경고 문구가 뜨더라 🥹

해당 json 파일을 업로드하고 코파일럿 -> 에이전트 모드로 변경 한 후 도구 추가하기 버튼을 클릭하면 자동으로 ./vscode/mcp.json 에서 정의 한 서버들이 자동으로 추가 되어 있다.

💡 .vscode 폴더
vscode 폴더는 Visual Studio Code (VS Code) 에디터에서 사용하는 프로젝트별 설정 파일과 정보를 저장하는 숨김 폴더

이후 필요에 따라 사용할 기능들을 선택하라 했는데 피그마의 데이터와 피그마 이미지를 저장하는 모든 행위들을 사용 할 것이기 때문에 따로 해제하진 않도록 했다.

3. MCP 서버 연결 되었는지 확인하기

이후 명령 팔레트에서 MCP: 서버 나열 을 실행하여 에이전트에 등록된 서버의 tools/list 들을 불러오도록 하여 서버가 잘 등록 되었는지 확인한다.

2025-04-14 18:30:58.721 [info] 연결 상태: 시작
2025-04-14 18:30:58.724 [info] Starting server from LocalProcess extension host
2025-04-14 18:30:58.737 [info] 연결 상태: 시작
2025-04-14 18:30:58.737 [info] 연결 상태: 실행 중
2025-04-14 18:31:00.689 [info] ["Server connected and ready to process requests"]
2025-04-14 18:31:00.696 [info] Discovered 2 tools

4. mcp.json 에 API KEY 등록하기

현재 피그마 MCP 서버에 사용할 API 키가 아직 등록 되지 않았으니 피그마에서 API 키를 발급 받도록 한다.

피그마에서 API 키를 발급 받고 mcp.json 파일에서 다음과 같이 API 키를 입력해주도록 하자

{
  "inputs": [
    {
      "id": "figma-api-key",
      "type": "promptString",
      "description": "Figma API Key",
      "password": true
    }
  ],
  "servers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=${input:figma-api-key}",
        "--stdio"
      ]
    }
  }
}

5. 신나게 사용하기

이후 끝났다. 신나게 사용하면 된다.

간단히 테스트 용으로 아이콘들을 컴포넌트로 변경하는 간단한 태스크를 맡겼었는데 손수 했으면 30분간 노가다로 옮겼어야 할 일들이 단 1분만에 끝났다.

이렇게 행복할수가 (사실 눈물도 같이 흘리는중)

회고

이제 유저 플로우만 나오면 페이지 단도 옮겨야 하는데 솔직히 말해서 단순 마크업언어로 옮기는 작업도 에이전트만 쓰면 하루면 끝날 거 같다.

E2E 테스트도 MCP 연결해서 할 수 있다고 하니 작업 할 때 써봐야겠다.

진짜 생산성이 말도 안되게 올라간게 느껴진다. 이게 말이 되니?