여러 채널에서 MCP를 이용한 디자인 제공 글이 보였다. Cursor를 통해 명령하여, 피그마 플러그인이 디자인을 구현해주는 영상을 보았고, 이를 이용해보고 싶어 세팅하는 과정과 아주 간단한 후기를 남겨본다.

Figma 디자인을 AI에게 맡겨 포트폴리오, 간단한 사이드 프로젝트를 만들기 위한 디자인을 뽑아낼 수 있는가를 확인하는게 개인적인 목적이다.

MCP(Model Context Protocol)란?

MCP는 LLM과 같은 모델이 대화나 작업 중에 지속적으로 일관된 "문맥"을 유지할 수 있도록 도와주는 프로토콜 혹은 구조이다. 쉽게 말해, AI가 "내가 지금까지 어떤 대화를 했는지", "사용자가 누구인지", "무슨 목적의 작업을 하고 있는지"를 이해하고 반영할 수 있도록 해주는 시스템을 말한다.

Cursor

코딩을 위한 텍스트 에디터이다. vscode기반이며, 추가적으로 나와 페어코딩을 할 수 있는 AI agent가 존재한다. 자세한건 다른 블로그에서 알아보자..^^

그래서 어떻게 하면 나도 쓸수 있나

모든 정보는 오픈소스 cursor-talk-to-figma-mcp에서 제공한다. 아래는 위 오픈소스를 사용하기위해 풀어둔 글이다.

Bun을 설치하여 로컬에 소켓 서버를 가동하고, Figma에 플러그인을 등록하여 사용한다.

Bun 설치

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

Bun을 실행하기위한 MCP를 세팅
```
bun setup
```
바로 실행이 안된다면, Path등록이 안되었을 수 있음. 아래 명령으로 세팅
```
echo 'export PATH="$HOME/.bun/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
```
웹소켓 로컬 서버 실행
```
bun socket
```
figma에 plugin 등록 4.1 cmd + k 후, Plugins & widgets 탭에 Import from manifest 클릭 4.2 cursor-talk-to-figma-mcp 프로젝트의 manifest 선택 4.3 플러그인 실행 (cmd + k > plugin tab에서 추가된 Cursor 플러그인 실행)
Cusor로 돌아가 preferences > Cursor Settings > MCP탭에서 Disabled되어있는 TalkToFigma를 활성화 함. 만약 "Client closed" 로 빨간불이 들어왔다면, bun이 제대로 실행되지 않아서 일 수 있다. 프로젝트의 ~/.cursor/mcp.json 에서 command 옵션을 아래와 같이 수정해보자.
```
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "/Users/YOURUSERNAME/.bun/bin/bunx",
      "args": [
			"cursor-talk-to-figma-mcp"
	  ]
    }
  }
}
```
Talk to figma with channel 채널 ID 를 Cursor에게 말하면, 연결을 확인한다. Channal ID는 terminal이나 figma에서 확인 가능하다.

간단 사용 후기

디테일한 정보까지 넣어가며 사용해보지 않았지만, 아주 기본적인 틀이나 구조들은 잡아준다. 기본적인 색감이나 디자인 룰에대해 모르는 개발자가 간단히 디자인하기에 적합해 보인다. 실제로 디자이너들이 사용하기엔 더미데이터 반복 구성 정도 인 것 같다. figma component로 만들어주지는 못하고, 컴포넌트를 만들기위해 요구사항을 작성하면 의도에 맞게 그려주기는 한다. 이를 그대로 직접 컴포넌트화하고 속성들을 세팅해줘야 한다. 잠깐 사용해보면서 많이 놀랍긴했다. 물론 디테일을 수정하면서 조금씩 답답함이 있었지만, 한번 프로젝트에 사용해보고 싶은 정도이다. Cursor에서 제공하는 상위 모델을 이용하고, 정보들도 더 디테일하고 많이 제공하고, 프롬프트도 최적화하여 사용해보고 추가적인 후기를 작성해 봐야겠다.