[MCP, Claude, Figma] AI에게 Figma 작업을 시켜보자!

Jiiker·2025년 6월 22일

MCP(Model Context Protocol)란?

MCP는 애플리케이션이 LLM(대형 언어 모델)에 컨텍스트를 제공하는 방식을 표준화한 오픈 프로토콜입니다. MCP는 마치 USB-C 포트처럼 작동합니다. USB-C가 다양한 기기와 액세서리를 연결하기 위한 표준 포트라면, MCP는 다양한 데이터 소스와 도구를 AI 모델에 연결하는 표준화된 방식을 제공합니다.

라고 설명이 나와있다. 우리가 사용하는 여러가지 애플리케이션(Figma, Notion, Slack 등)이 LLM(ChatGPT, Claude, Gemini 등)에 컨텍스트를 제공하는 방식을 표준화한 것이라고 한다. 이는 쉽게 말해서 AI가 Figma, Notion과 같은 각각의 애플리케이션이 동작하는 방식을 이해하고, 이를 직접 다룰 수 있게 됨을 의미한다. 각각의 애플리케이션이 LLM과 직접 소통할 수 있는 소통창구를 열어준 셈이다.

이전까지는 적어도 인간이 AI에게 물어보고 AI가 알려준 정답을 통해 Figma, Notion 등에 옮겼었다면, 이제는 그 노력조차 하지 않아도 된다는 뜻이다. 마침 새롭게 진행하는 사이드 프로젝트에서 피그마 디자인을 직접 해야했기에 그 과정이 너무 귀찮아 피그마를 연결하는 방법부터 찾아보았다.

Figma MCP 연결 방법(feat. Talk To Figma)

우선은 MCP 공식문서 빠른 시작 가이드를 살펴보면 아주 간단하게 사용 방법을 소개하고 있다. 이를 따라서 진행해 보자.

Claude 설치

우선 클로드 공식 홈페이지에 들어가서 운영체제에 맞는 Claud를 설치해주자. 클로드 내부의 설정 파일을 직접 수정해주어야 하기 때문에 따로 설치를 진행해야 한다.

Bun 설치

사실 MCP 공식문서 가이드에 bun 설치에 관한 안내가 없어서 설치를 안해도 되는 줄 알았다. 하지만, 중간중간 참고하는 사이트마다 bun을 설치하라고 해서 이게 뭔가 찾아봤다.

Bun은 Node.js와 비슷한 자바스크립트 실행 환경(런타임)

많은 MCP 서버들이 Bun 환경에서 실행되도록 만들어졌음

특히, 내가 지금 사용하려고 하는 Talk To Figma MCP 서버의 경우 bunx cursor-talk-to-figma-socket 명령어를 통해 실행하기 때문에 bun의 설치가 필수이다.

Window

윈도우의 경우 cmd를 열어

powershell -c "irm bun.sh/install.ps1|iex"

위와 같은 명령어로 설치할 수 있고,

iOS

맥북(iOS)의 경우에는

curl -fsSL https://bun.sh/install | bash

와 같은 명령어로 설치할 수 있다.

mcp 서버 실행

이후에 윈도우의 cmd나 iOS의 터미널을 열어서

bunx cursor-talk-to-figma-socket

명령어를 통해 직접 실행해야만 Talk To Figma MCP 서버가 실행되고, MCP 연결이 가능해진다.

Claude 설정 파일

다음으로 윈도우 기준으로는 파일 > 설정으로 들어가면 되고, 맥북(iOS)의 경우에는 상단 탭의 Claude > Settings...로 들어가보자. 그 중 개발자 탭을 눌러보면 위와 같은 화면을 확인할 수 있다. 여기서 설정 편집을 눌러보자.

그럼 위와 같은 폴더가 열리면서 설정 파일이 포커싱된다. 해당 파일을 아무 문서 편집 툴을 이용해서 열어보자. 나는 VS Code가 제일 익숙했기 때문에 VS Code를 이용해서 열어보았다.

그럼 위와 같은 JSON 파일이 열리는데, 처음에는 아무것도 설정되어있지 않은 빈 파일이다. 여기에 우리가 필요한 MCP 설정들을 추가해주면 Claude에서 해당 기능들을 사용할 수 있게 되는 것이다.

Claude 설정 JSON 코드

MCP Github

우선 해당 MCP의 Github 레포지토리에도 사용방법이 자세하게 안내되어 있다.

나중에 MCP를 직접 커스텀 해서 사용한다거나 확장성을 고려했을 때는 Github를 이용하는 게 가장 좋을 것 같다. 하지만, 이것저것 복잡해보여서 일단 MCP 찍먹을 위해 좀 더 간편한 방법을 찾아보았다.

Smithery

그렇게 더 간편한 방법이 없을까 찾아보다 알게 된 사이트가 Smithery였다. Smithery는 내가 원하는 MCP를 찾을 수 있는 플랫폼이다.

검색을 통해 내가 원하는 MCP를 쉽게 찾을 수 있고,

여기서 LLM에 제공할 MCP JSON 설정 코드를 볼 수 있다. MCP 서버 이름이 "cursor-..."로 시작하지만, MCP 설정은 클로드나 커서나 동일하기 때문에 클로드에서 이걸 사용해도 상관없다고 한다.

Figma Plugin

그런데 피그마의 경우 피그마 사이트에서 제공하는 Talk To Figma MCP Plugin이 있었다. 뭔가 제일 신뢰가 가기도 했고, Smithery에서 가져온 JSON 코드를 입력했을 때 계속해서 에러가 발생해서 이걸 사용했는데, 말끔하게 해결이 되었다. 그렇기 때문에 이번 포스팅에서는 이 방법을 소개하고, Smithery를 이용하는 방법은 추후에 좀 더 살펴보도록 하자.

위의 Plugin 페이지에서 Open in...을 눌러서 연동을 원하는 피그마 프로젝트를 선택해서 들어가면,

위와 같은 화면이 뜨고, 여기서 우측 하단의 Run을 눌러서 실행시켜 주자.

이 때, 위와 같이 연결된 서버의 채널이 뜨고, mcp.json 파일이 보이면, 성공적으로 연결된 것이다.

해당 JSON 코드를 클로드 설정 파일에 붙여 넣은 후, 클로드를 완전히 종료했다가 다시 실행시켜주자.

이제 클로드에서 해당 피그마 프로젝트 채널에 연결해서 작업해달라고 요청하면 클로드가 자동으로 작업을 수행해주는 것을 확인할 수 있다. 클로드가 무료 버전이라 조금 복잡한 작업을 맡기면 가능한 대화수를 초과했다고 뜬다.(지금은 빨간색 동그라미에 만족하도록 하자...) 우선은 연동 방법만 익혀두고 추후에 커서나 클로드 유료 버전을 결제해서 마음껏 사용해봐야겠다!!

🛠️ 트러블 슈팅

🚨 bunx 명령어 찾을 수 없음

Could not connect to MCP server TalkToFigma
MCP TalkToFigma: spawn bunx ENOENT
MCP TalkToFigma: Server disconnected. For troubleshooting guidance, please visit our debugging documentation

처음에 bun을 설치하지 않고, Talk To Figma MCP의 JSON 설정 코드를 클로드 설정 파일에 넣었을 때, 클로드 실행시 만난 에러이다. bun을 설치해줌으로써 해결할 수 있다.

🎯 iOS 추가 이슈

그런데 맥북(iOS)의 경우 bun을 설치한 후에도 위와 같은 에러가 떴었는데, 다른 벨로그의 트러블 슈팅 글을 보고 해결할 수 있었다.

우선 path 설정과 관련한 문제였는데, ~/.zshrc 파일에서

export BUN_INSTALL="$HOME/.bun"
export PATH="$BUN_INSTALL/bin:$PATH"

와 같이 경로 설정이 되어있는지 확인해보자. 내 경우에는 경로 설정은 위와 동일하게 되어있었는데, 명령어를 입력하면 명령어를 찾을 수 없다고 떴었다.

그 때,

source ~/.zshrc

위 명령어를 한 번 실행해주니 정상적으로 명령어가 인식됐다.

명령어는 정상적으로 동작했지만 여전히 같은 에러가 떴는데, 위 블로그에서 해결한 것 처럼

"mcpServers": {
  "TalkToFigma": {
    "command": "/Users/[유저이름]/.bun/bin/bunx",
    "args": ["cursor-talk-to-figma-mcp@latest", "--server=vps.sonnylab.com"]
  }
}

명령어 경로를 절대 경로를 이용하여 /Users/Jiiker/.bun/bin/bunx와 같이 지정해서 해결했다. [유저이름]에는 본인의 계정 이름을 입력하면 된다.