[ AI/MCP ] web 방식 figma로 MCP 시도해 보기

너무 핫해서 안 해볼 수 없었던, 그러나 시간이 없었던 figma MCP를 시도해 보기.

 

나름 많은 삽질을 했다. 하여 APP으로 하는 방식 말고
web을 통해서 하는 방식으로 설명해 보려고 한다.

사전에 알아둬야 할 내용

figma MCP는 크게(?) 2가지 방식있는 것으로 확인했다.

1) web figma를 통해서
2) figma Application을 다운 받아서(youtube에 많이 있으니 검색해 보길 바란다.)

 

여기서는 web figma를 통해서 진행한다.

 

MCP에 대한 간단한 설명

claude MCP는 하나의 application 에 하나의 서버가 연결된다.
다만 claude Protocol을 만들어 통신 방식으로 획일화 시키고 있다.
현재 완전한 http같은 protocol은 아니지만 아마도 claude가 생태계를 선점할 것 같다.

• 호스트는 연결을 시작하는 LLM 응용 프로그램 (Claude Desktop 또는 IDE와 같은)입니다.
• 클라이언트는 호스트 애플리케이션 내부에서 서버와 1:1 연결을 유지합니다.
• 서버는 클라이언트에게 컨텍스트, 도구 및 프롬프트를 제공합니다.

MCP offical Home Page

 

 

 

 

---

---

 

Figma server 만들기(?) via git clone

간단한다.
남이 만들어 놓은 거 git clone 해서 설치하고 실행 시키면 된다.

Figma-Context-MCP

 

git clone https://github.com/GLips/Figma-Context-MCP.git (원하는 폴더 위치)

 

figma API 받기

setting을 누르면 팝업, 여기서 Security(텝)로 가서 맨 아래로 내려간다.

여기서 generate new token 클릭

 

위에처럼 설정을 하고 API 키를 받으면 API 키 발급 완료

 

이렇게 발급 받은 figma API는 2가지 방식으로 server를 실행할 수 있다.

1) npm build + npm start

2) 아래의 명령어를 terminal에 넣고 실행

npx figma-developer-mcp --figma-api-key=<여기도 피그마 토큰을 넣어주세요>

실행을 하면 아래처럼 서버가 구동되기 시작한다.

---

 

잠깐 알아둬야 할 이해, 두개의 서버가 존재한다.

음식점(MCP 서버)이 있다고 해봅시다:
🏪 git clone 폴더 = 실제 음식점 (요리하는 곳)
📱 .cursor/mcp.json = 배달앱에 등록된 음식점 주소 음식점이 운영 중이어도,

배달앱에 주소가 등록되어 있지 않으면 주문할 수 없습니다!

 

 

내가 작업할 폴더 만들기

react vite든, next js든 폴더는 만든다.

전 여기서  next js  폴더를 만듬

 

폴더 구조에 cursor를 불러올 수 있도록 설정하기

1. 가장 상위 폴더에 .cursor 폴더를 만든다.
2. mcp.json을 설정한다.
3. mcp.json에 config(?)를 설정한다.

{ "servers": {
  "my-mcp-server-a1d294c3": {
    "type": "stdio",
    "command": "claude",
    "args": []
     }
    }
}

또는, IDE 의 '설정 버튼'을 활용해서 만들 수 있다.
설정은 오른 쪽 맨 상단에 톱니바퀴로 있다.

설정

setting > MCP tab

+ add new global MCP server를 누르면
위의 환경 설정 config를 넣는 json 형태 파일의 나온다.
위 3번 config 내용 붙여 넣기.

 

4. cursor IDE 오른 쪽 채팅 창에 mcp.json이 떠야 한다.
안되면 setting > MCP servers에서 Figma MCP 오른 쪽 토글 버튼을 활성/비활성을 해보면서 확인해 볼 것

 

5. 프롬프트에 작업 진행할 figma 작업물 붙여 넣기(작업물 url 붙여넣기는 아래 쪽에 다시 설명)

5. 승인해 주기(cursor IDE 오른 쪽 하단)

저기 얼굴 있는 곳에 최초 '접근을 허용할 것인가'라는 질문이 뜨니까,
그것도 잘 확인해 볼 것.

상단에 보면 generating이라고 뜨는 데, 거기서 wait to approval... 이런 식으로 뜬다.
그러면 하단에 얼굴있는 곳에 버튼이 뜰 것이다.

 

 

Figma에서 작성해볼 내용 선택하기

작업해 놓은 결과물 클릭 후 마우스 오른쪽

Copy link to selection 한 내용을 프롬프트에 복붙

결과 값

 

이렇게 하면 자기가 알아서 작성해 준다.
여기서 나온 결과를 accept all or reject를 하면 된다.

 

결론

어려웠던 점 3가지

처음엔 figma로 MCP를 할 수 있는 방법이 한 개만 있는 줄 알았는데,
2개의 방식이 존재했다. 그래서 많은 것을 한 번에 설치했고 개념이 꼬였다.

Figma MCP 서버에 앞으로 작업할 프로젝트를 작성해서 넣었다.
MCP 서버와 내 프로젝트를 분리해서 작업을 진행하는 방법을 이해하지 못했기 때문이다.

MCP 서버 실행과 어떻게 내 프로젝트에서 figma MCP를 불러오는 지 몰라서 고생했다.

 

몇번 써보고 생각해 본 지점

나는 figma 디자인을 못해서, cursor가 온전히(?) 이해를 못하는 것 같다.
하여, 한 페이지를 만들 때 만약 내용이 많아지면 영역을 나눠서 요청하면 좋다.

이 개념은 multi-agents에 내용을 가져온 것 방법이다.
(물론 그 전에 그렇게 하는 사람들은 있었겠지만)

abstract
...MetaGPT utilizes an assembly line paradigm to assign diverse roles to various agents, efficiently breaking down complex tasks into subtasks involving many agents working together...

MetaGPT: Meta Programming for A Multi-Agent Collaborative Framework

업무/요청이 단순해지면 환각과 오류가 줄어든다는 뜻.

html 구조상 header, main, footer가 있을 것이다.
특히 main에서도 <section >, <article>, <aside> 등으로 구조가 나눠질 것이니
figma 디자인을 부분적으로 나눠 요청을 하면 큰 LLM 모델이 아니여도 나름 만족할 결과을 얻을 수 있다.

 

 

 

ps-

여전히 잘못된 부분, 혹은 잘못 이해한 부분이 있을 수 있으니
그런 부분은 충분히 숙지해서 진행해 보길 바란다.

 

 

이글은 아래 사이트를 참조하여 작성하였습니다.
https://www.reese-log.com/cursor-figma-model-context-protocol