Claude/CursorAI MCP 기능으로 Figma 디자인 자동화

디자인을 하다 보면 자주 반복되는 단순 작업이나, 테마 변경처럼 전반적인 스타일을 바꾸는 일이 얼마나 번거로운지 아시죠? 특히 기획자나 디자이너 입장에서는 코드나 스크립트가 익숙하지 않다 보니 이런 반복 작업이 마냥 부담스럽게 느껴지기도 합니다. 그런 분들에게 정말 반가운 소식이 있어요. 이제는 Claude와 Cursor AI의 MCP 기능을 통해 디자인 변경도 AI에게 부탁할 수 있는 시대가 열렸습니다.

왜 Claude Desktop과 Cursor AI, 그리고 MCP인가?

먼저 MCP란 Multi-Control Protocol의 약자입니다. 이 기능은 Claude나 Cursor AI 같은 언어 모델이 외부 도구(대표적으로 Figma)와 실시간으로 상호작용할 수 있게 도와주는 일종의 브릿지 역할을 해요. 즉, 사용자의 명령을 AI가 이해하고, 이를 실시간으로 Figma 상의 작업으로 바꿔주는 기술이죠.

Claude AI는 최근 데스크탑 버전에 MCP 기능을 탑재하면서, 기획자나 디자이너도 쉽게 사용할 수 있게 됐습니다. 무엇보다 GUI 중심의 인터페이스 덕분에 비전공자도 접근하기 쉬운 것이 특징이죠.

반면 Cursor AI는 원래 개발자 중심의 IDE 환경으로 출발했지만, Figma와 연결 가능한 MCP 플러그인도 지원하고 있어 디자이너가 활용할 수도 있습니다. 특히 코드 작성과 동시에 디자인을 다룰 때는 Cursor가 유리할 수 있습니다.

결국 선택의 기준은 ‘어떤 작업 흐름에 더 익숙한가’입니다. 비전공자인 디자이너/기획자라면 Claude Desktop이, 개발과 병행해 작업하는 분이라면 Cursor AI가 적합할 수 있어요.

1단계 – Bun 설치 (간단한 한 줄 명령어)

먼저 Claude MCP가 동작하려면 Bun이라는 자바스크립트 런타임이 필요합니다. 걱정 마세요. 복잡한 개발 지식 없이도 아래 명령어 하나면 설치가 완료됩니다.

Windows의 명령 프롬프트(관리자 권한)을 실행하고 다음 명령어를 붙여넣으세요:

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

설치가 완료되면 bun -v 명령어로 설치가 제대로 되었는지 확인할 수 있습니다.

2단계 – Figma 플러그인 설정 (Cursor & Claude 공통)

이제 본격적으로 Figma와 Cursor AI MCP를 연결할 차례입니다. Figma 플러그인은 Claude와 Cursor 공용으로 사용할 수 있기 때문에, 한 번 설정하면 두 도구 모두에서 활용 가능합니다.

다음 링크로 이동해 플러그인을 설정해 주세요:
👉 Cursor Talk to Figma MCP Plugin

플러그인을 설치하면, Figma 상단의 플러그인 메뉴에서 “Talk to Figma MCP” 항목이 나타나야 정상 설치된 것입니다.

참고로 이 플러그인은 Cursor와 Claude 양쪽 모두 사용할 수 있는 범용 MCP 연결 포맷을 제공합니다. 이번 글에서는 Claude 중심으로 다루고 있으니, Claude 사용자분들은 안심하고 따라오시면 됩니다.

3단계 – Cursor AI에서 MCP 설정

먼저 Cursor AI에서 MCP 기능을 활용하는 방법부터 소개할게요.
Cursor AI가 설치되지 않았다면 아래 링크로 다운로드 하여 설치하시면 됩니다.

👉 Curosr AI Download

Cursor AI를 실행하고 File → Preferences → Curosr Settings로 이동합니다.

Cursor Settings 에서 MCP → + Add new global MCP server 를 선택하면 mcp.json 파일이 열립니다.

mcp.json 파일에 다음 코드를 입력하시면 됩니다.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest",
        "--server=vps.sonnylab.com"
      ]
    }
  }
}

정상적으로 MCP 설정이 완료된 경우라면 다음와 같이 이용 가능한 MCP Tools를 확인 할 수 있습니다.

3단계 – Claude Desktop 설정 변경

이제 Claude Desktop에서 MCP를 활성화하는 설정을 해야 합니다. 이 설정은 JSON 형식으로 간단히 편집하면 됩니다.

Claude Desktop이 설치되지 않았다면 아래 링크로 다운로드 하여 설치하시면 됩니다.

👉 Claude Desktop Download

Claude Desktop을 실행하고 파일 → 설정 → 개발자로 이동합니다.

아래 내용을 복사해 claude_desktop_config.json 파일에 붙여넣습니다:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest",
        "--server=vps.sonnylab.com"
      ]
    }
  }
}

수정 후 저장하고 Claude Desktop을 다시 시작하면 설정이 반영됩니다.

⚠️ 만약 연결 후 상태가 running이 아니라 failed로 표시된다면, Claude Desktop을 관리자 권한으로 실행했는지 확인해보세요. 이 부분에서 많은 분들이 막히는 경우가 많더라고요.

4단계 – Figma MCP 연결 시작

설정을 마쳤다면 이제 Cursor AI와 Claude Desktop 대화창에서 연결을 시작할 수 있습니다.
대화창에 다음과 같은 명령을 입력해 MCP 연결을 요청해보세요:

Connect to server in channel: 채널코드

Cursor AI

Cluade Desktop

5단계 – 실전 테스트: 디자인 자동화 체험기

연결이 완료되었으면 이제 진짜 재미있는 시간이 시작됩니다.
저는 기본적인 로그인 화면 만들기를 다음과 같이 요청해봤습니다:

“로그인 화면을 만들어줘”

Cursor AI

Cluade Desktop

Figma 문서를 읽고, 어떤 정보가 포함되어 있는지 확인한 뒤, 아래와 같이 단계적으로 작업을 수행하기 시작했습니다.

• 로그인 화면용 프레임을 생성
• 이메일 입력란, 비밀번호 입력란 프레임 자동 생성
• 각 입력란 안에 텍스트 라벨 추가
• 동그란 모서리를 적용해 더욱 직관적인 디자인으로 변환

심지어 프레임을 나누고, 텍스트 컴포넌트를 삽입하며 UI 요소들을 하나하나 설명하며 생성해줬습니다. 마치 팀 내 디자이너가 설명해주는 듯한 친절한 피드백이 인상적이었습니다.

기본 UI를 완성한 후에는 “다크로 변경해줘” 라는 한 마디로 전체 디자인이 어두운 테마로 전환되었습니다. Claude MCP는 각 요소의 배경 색상과 텍스트 색상, 버튼 스타일 등을 모두 분석한 후 어두운 색상값으로 자동 조정해주었습니다.

“다크로 변경해줘”

기본 UI를 완성한 후에는 “다크로 변경해줘” 라는 한 마디로 전체 디자인이 어두운 테마로 전환되었습니다. Claude MCP는 각 요소의 배경 색상과 텍스트 색상, 버튼 스타일 등을 모두 분석한 후 어두운 색상값으로 자동 조정해주었습니다.

디자인, 이제는 대화로 하는 시대

이제 디자인 작업은 클릭이나 드래그만으로 진행하지 않아도 됩니다. Claude나 Cursor처럼 AI와 대화하듯 원하는 UI를 구현하고, 수정하고, 개선할 수 있는 시대가 열린 것이죠.

특히 Claude는 언어 이해력이 뛰어나 디자이너와 ‘디자인 감성’을 공유하는 듯한 느낌을 주고, Cursor는 복합 작업을 빠르게 처리할 수 있어 효율적인 도구입니다.

마치며 – 비전공자에게도 열린 자동화의 문

이제 디자인 도구는 디자이너만의 전유물이 아닙니다. 누구나 도전해볼 수 있는 자동화 시대, Cursor AI MCP와 Claude AI의 연동은 그 출발점이라 할 수 있습니다.

앞으로도 이런 혁신적인 도구들을 테스트하고, 실제로 어떤 변화가 일어나는지 블로그에서 계속 공유드릴게요. 여러분도 직접 사용해보시고, 새로운 디자인 워크플로우를 경험해보시길 권합니다!