Windsurf에서 talk-to-figma-mcp 로 퍼블리싱 자동화하기

---

1. cursor-talk-to-figma-mcp란?

cursor-talk-to-figma-mcp는 Figma 디자인을 자연어 명령어로 제어할 수 있도록 해주는 MCP 서버입니다.

• 🔄 claude, cursor, Windsurf 와 같은 ai agent tool 을 사용하여 피그마에 디자인을 명령어로 실행할 수 있습니다.

---

2. Windsurf에 MCP 서버 설정하기

📦 설치(bun & cursor-talk-to-figma-mcp)

1) Install Bun if you haven't already:

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

2) Run setup, this will also install MCP in your Cursor's active project

bun setup

3) cursor-talk-to-figma-mcp clone

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

4) Start the Websocket server

bun socket

5) MCP server

bunx cursor-talk-to-figma-mcp

⚙️ MCP 서버 설정

windsurf > mcp_config.json

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest",
        "--server=vps.sonnylab.com",
        "--port=3055",
        "--toolCallTimeoutMillis=120000"
      ],
      "env": {
        "FIGMA_API_TOKEN": "FIGMA API TOKEN"
      }
    },
  }
}

ℹ️ Figma

피그마에 Plugin을 설치합니다.

3. 피그마 플러그인에서 channel id 획득

여기까지 되었다면 모든 준비를 마쳤습니다.

1) 피그마에서 원하는 워크스페이스로 이동하고, actions 메뉴에서 방금전에 설치한 플러그인을 선택합니다.

2) Cursor Talk To Figma Plugin channel ID 복사.

그러면 위와 같이 플러그인 팝업이 제공되고,
서버에 연결할 채널아이디를 획득할 수 있습니다.
이 채널아이디를 복사합니다.

4. 디자인하기

복사한 채널아이디를 ai agent 에 입력하고, 원하는 디자인을 명령어로 입력합니다.
join_channel : (plugin 에서 제공하는 채널명 입력)
예시)
join_channel : wciae506
상품 목록 화면을 디자인해줘. 상단에는 페이지 제목 "상품 목록"이 있고, 그 아래에는 상품을 카드 형태로 3개씩 가로 정렬하고, 각 카드에는 상품 이미지, 상품명, 가격 정보가 포함돼 있어. 카드 하단에는 "장바구니에 담기" 버튼이 있어야 해. 배경은 흰색, 카드 테두리는 연한 회색으로 해줘.

🚨 Talk To Figma Plugin socket connection 팝업을 닫지 마세요.

• 저의 경우 MCP 서버를 셋팅하고 ai agent 로 플러그인 채널을 연결후, 팝업을 최소화 할 수 없어서 닫기 버튼으로 닫는 경우가 있었습니다. 그런데 팝업을 닫아버리면 소켓 통신이 끊어져 버리기 때문에 mcp 서버 또한 동작하지 않습니다.
• 이 플러그인으로 피그마의 디자인을 하는 동안에는 팝업을 종료해서는 안됩니다. 또한 팝업을 닫으면 새로운 채널명을 획득해야 하므로, ai agent 에게 새로운 채널명을 명시해야 합니다.

결과물

사용후기

🎯 잘 작동했던 점

피그마를 실행하지 않고도 빠르게 구조화된 UI를 만들 수 있음
디자이너 없이 개발자 혼자도 기획-디자인 초기 구조를 잡을 수 있음
반복 작업(예: 리스트, 카드 UI 등)을 단순 명령으로 처리할 수 있어 빠름

⚠️ 개선이 필요하거나 주의할 점

추상적인 명령어는 제대로 인식하지 못함
예: "깔끔하게 만들어줘", "세련된 디자인" 등은 AI가 해석하기 어려워 정확한 속성 지정이 필요
정확한 컴포넌트 레이아웃 지시가 필요
예: "카드당 너비 300px", "그리드 3컬럼" 같은 식으로 구체적 수치를 주면 더 좋음
Figma 플러그인 팝업을 닫으면 채널이 끊김
반드시 작업 완료 전까지는 팝업을 유지해야 하며, 브라우저 탭을 닫지 않는 것도 중요

💡 추천 사용 방식

초기 와이어프레임 또는 MVP 단계에서 빠르게 화면 스케치를 하기에 적합
디자이너와 협업하기 전, 개발자 스스로 UI 초안을 만드는 용도로 유용
같은 유형의 컴포넌트를 반복해서 제작해야 하는 경우 스크립트 기반 접근이 매우 효율적