자연어로 Figma 디자인을 해보자(feat. cursor-talk-to-figma-mcp)

하루가 다르게 발전하고 있는 세상이다.

개인적으로 꼭 만들고 싶은 앱이 있어 개인 사이드프로젝트를 시작했는데, 디자인이 막막하던 차에 여기저기서 MCP가 들려오기 시작했다.

처음엔 그게 뭔데? 로 시작했는데, 자료 찾아보고, 영상 몇 개 보다보니 감이 좀 잡힌다.

쉽게 말해서 MCP 란, AI 모델이 다른 프로그램을 사용할 수 있게끔 만들어진 프로토콜이다.

자세한 설명은 이미 수없이 많은 블로그, 유튜브 영상에서 다루고 있으니,

이번 포스팅에서는 cursor 와 mcp 를 이용해서 Figma 디자인을 자동으로 해보는 실습에 초점을 맞춰서 진행해보겠다.

1. MCP 서버 실행

GitHub - sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP

Cursor Talk To Figma MCP. Contribute to sonnylazuardi/cursor-talk-to-figma-mcp development by creating an account on GitHub.

GitHubsonnylazuardi

우선 위 레포를 확인해보자.

해당 프로젝트는 cursor ide 와 figma 사이의 MCP 를 구현해서, cursor 에서 figma 와 통신해 디자인할 수 있는 아주 엄청난 프로젝트이다.

2주 전에 첫 커밋이 등록되었는데, 벌써 star 가 2.2k 개다. 어마어마한 수치다.

README.md 에 있는 가이드 영상을 보고 박수를 쳤다. 놀랍도다...

차근차근 따라가보자.

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

우선 bun 을 설치해주자.

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

cd cursor-talk-to-figma-mcp

해당 프로젝트를 가져오고, 해당 프로젝트 폴더로 이동한다.

bun setup

bun setup 을 진행한다.

만약 진행 과정 중 command not found 가 발생한다면,

새 터미널 창에서 시도하면 된다.

setup 을 하게 되면 위 화면과 같이 cursor ide 좌측 하단에 alert가 뜬다.

Enable 을 눌러주자!

bun socket

웹 소켓 서버를 열어주고,

bunx cursor-talk-to-figma-mcp

mcp 서버를 띄운다.

2 . Figma 에서 플러그인 설치하기

피그마 데스크톱 앱에서, Import plugin from manifest... 를 누른다.

그럼 파일을 선택할 수 있는 탐색기가 뜨는데,

현재 우리의 프로젝트인 cursor-talk-to-figma-mcp 의 /src/cursor_mcp_plugin/manifest.json 을 선택해준다.

그럼 위와 같이 플러그인이 등록된다.

만들어진 Cursor MCP Plugin 을 클릭하면, 아래와 같이 연결된 것을 확인할 수 있다.

3. cursor 에서 mcp 설정하기

새로운 터미널을 열어 실행한다.

vi ~/.cursor/mcp.json

아래 내용을 입력하고 저장한다.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}

4. 실행하기

cmd + I 를 눌러 agent 채팅 화면을 열고,

talk to figma with channel 채널명

을 입력하면, channel join 부터 시작한다.

이제 디자인을 요청해보자. 나는 사진 일기 앱을 만들어볼 것이다.

이것저것 더 채팅하고, 수동으로 조금 만지니 뚝딱 뭔가를 만들어주었다.

5. 결론

처음으로 mcp 서버를 실행시켜서 무언가를 해봤던 것 같은데,

zero to one 단계에서 정말 획기적이라는 생각을 했다.

특히 태생부터 백엔드였던 나는 figma 에 엄청 서툴고, 디자인의 ㄷ 도 모르는 상태였는데, 뭔가를 만들어준다는 점에서 진입 장벽이 굉장히 낮아진게 아닌가 하는 생각이 들었다.

그래도 아직 디자이너를 대체할 수준을 절대 못되고, 특히 반복 작업을 잘 하지 못한다. 레이아웃의 위치 잡아주는 것도 아직은 조금 미흡한 단계인 듯 하다.

사람 손을 타긴 해야한다.(2025.04 기준)

그렇지만, 이 또한 수개월 내에 괄목할만한 성장을 하지않을까라고 생각한다.

이런 기술들이 나오고, 발전할 때마다 개발자로서의 자신을 돌아본다.

좀 더 뾰족한 개발자가 되어야한다고 생각이 든다.

이제는 개발자가 아닌, 정말 제품에 집중하고 문제를 해결하는 프로덕트 오너로서의 역할이 더 중요해지지 않을까?

이번 포스팅에서는 채팅으로 figma 를 다뤄봤다면,

다음 내 목표는 figma 를 코드로 옮기는 것이다. figma mcp 를 이용해서.

요즘 인공지능 활용에 대한 새로운 인사이트를 얻고 있다.

다른 회사에서는 이미 ai 엔지니어 뿐만 아니라 일반 백엔드/프론트엔드로 불리는 개발자들에게도 ai 활용 역량을 요구하고 있다.

이번 주말에는 회사에서 서버팀 내의 반복작업을 줄일 수 있는 mcp 서버를 한번 만들어봐야겠다. 즐거운 일이 될 것이다!