Corsur Ai를 활용한 말로하는 디자인, Talk To Figma MCP 실행 가이드 및 활용 후기

Talk To Figma MCP

최근에 발견한 Talk To Figma MCP는 Cursor와 Figma를 연결하여 자연어 명령만으로 UI를 자동 생성해주는 도구입니다. "모바일 로그인 화면 만들어줘"라는 한 줄의 명령으로 실제 디자인이 Figma에 생성되는 경험은 매우 인상적이었습니다.

본인은 Cursor Ai 를 통해 Figma 에서 Talk to Figma MCP 플러그인을 설치해 사용해보았습니다.

• Cursor: GPT 기반 AI 코드 에디터
• MCP: LLM과 외부 앱을 연결하는 표준 프로토콜
• Talk To Figma MCP: 자연어 명령으로 Cursor에서 Figma UI를 생성 및 수정을 지원하는 플러그인

설치 과정

• Cursor Ai 는 설치되어있다는 가정 하에 진행하겠습니다.
  • 설치가 필요하시면 공식 웹사이트에서 받으실 수 있습니다.

1. Github 에서 프로젝트 파일 다운로드 (Download ZIP)

2. 프로젝트를 관리할 폴더에서 압축 해제

3. Cursor Ai 에서 해당 프로젝트 파일 오픈 (cursor-talk-to-figma-mcp)

4. 터미널에서 MCP 서버를 설정 해줍니다.

1) Bun 설치

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

‍

2) 설정 실행 < 일단 여기까지 해두시고, 5번으로 넘어가세요.

bun setup

‍

3) WebSocket 서버 실행

bun socket

‍

4) MCP 서버 실행

bunx cursor-talk-to-figma-mcp

‍

5. Figma에서 Talk To Figma MCP 플러그인 설치
1) 설치 경로 : Figma > Plugins > Development > Import plugin from
2) 위 설치과정 1번에서 받았던 프로젝트 파일중 아래 파일을 선택합니다‍

src/cursor_mcp_plugin/manifest.json

연결 절차

1. 플러그인을 실행하고 실행된 Talk To Figma MCP 팝업에서 아래의 안내에 따라 나오는 값을 Cursor Ai 에 붙여 넣습니다.

1) 아래 값을 복사합니다.

2) 해당 값을 다음의 경로에 붙여 넣습니다.

Cursor Ai Settings > Cursor Settings > MCP 에서 아래 스크린샷의 Add new global MCP server 버튼 클릭

그럼 mcp.json 파일이 생성되는데 위에서 복사한 값을 덮어씌우고 저장하세요.

(그러고 나서 Cursor Ai MCP 세팅에서 TalkToFigma 에 초록불이 들어오면서 활성화 되는지 확인해보세요. 저는 바로 되지는 않아서 Cursor Ai를 종료했다가 재실행했습니다.)

2. WebSocket 서버를 실행합니다.

bun socket

3. 새 터미널을 열고 MCP 실행 코드를 입력하세요.

bunx cursor-talk-to-figma-mcp

4. Figma 플러그인 Talk To Figma 팝업 에서 채널 값을 복사합니다.

5. 이제 Cursor Ai에서 자연어 명령으로 채널값을 주고 연결하도록 해서 "채널 연결이 성공적으로 완료되었습니다" 가 나오면 성공적으로 연결한 것입니다.
예시 프롬프팅 : 000000 채널 연결해
Cursor Ai 예시 답변 : 채널 연결이 성공적으로 완료되었습니다. 이제 Figma와 상호작용할 준비가 되었습니다. 다음 작업을 진행하실 수 있습니다.

6. 서버를 종료할 때는 터미널에서 control + c 로 하면 됩니다.

‍

실제 사용 후기

‍솔직하게 말하자면, 아직은 초기 와이어 프레임을 잡는 데  유용할 것 같습니다. 디테일한 디자인 작업은 무리라고 생각되며, 와이어 프레임을 잡는 작업도 프롬프팅을 얼마나 잘 쓰는지에 따라 달려있을 것 같습니다. 다만 MCP를 통해 자연어로 UIUX 디자인을 할 수 있는 환경이 만들어졌고, 발전 가능성이 있다는 점에서 큰 의미가 있어보입니다.