cursor 피그마(Figma) MCP 설치방법

피그마 MCP를 설치하는 방법은 몇가지가 있지만,
피그마에서 공식적으로 MCP를 제공해주게 되어 아무래도 이 방법이 좋을꺼 같습니다.
뭐 적용방법이 쉽기도 합니다.

피그마가 설치 되거나 사용한다는 전제하에 설명 드리도록 하겠습니다.

---

1. bunx 또는 bun 설치 및 실행
터미널에서 아래와 같은 명령어를 실행해 줍니다.

bunx cursor-talk-to-figma-socket

만약 bunx가 설치되어 있지 않다면 위의 명령이 실행되지 않습니다. 그럼 먼저 Bun을 설치합니다.
Bun은 npm or npx로 설치해 줍니다.

npm install -g bun

npx cursor-talk-to-figma-socket

 

npx cursor-talk-to-figma-socket 명령어를 터미널에 실행하면 막 쌸라쏼라(?) 영어가 나오고 계속 실행되어진 상태로 유지 합니다.

nodeJS가 없으면 안되겠죠??
nodeJS가 설치되어 있지 않다면 npm 명령어를 사용할 수 없기 때문에 혹시 설치가 안되어 있으신 분은 아래글을 참고 바랍니다.

node.js 윈도우에서 설치하기 및 삭제

 

---

2. 플러그인 연결
일단 피그마를 열고 디자인 화면에서 우클릭을 화면 다음과 같은 화면을 확인할 수 있습니다.

플러그인 > Cursor Talk To Figma MCP Plugin 클릭!

이런 화면을 확인하실 수 있을꺼예요.
빨간 부분은 채널이라는 것이고,
파란부분은 cursor에 MCP 설정하는 내용입니다.

파란색 부분의 내용을 모두 복사하세요. 그리고 cursor을 킵니다.

---

3. Cursor에 피그마 MCP 연결

위 이미지에 나와 있는 순서로 들어가 커서 셋팅에서 MCP & Integrations 에 들어가 줍니다.
이 부분이 MCP 설정하는 부분입니다.

저는 이미 MCP 연결을 해서 TalkToFigma 연결이 잘 된 상태 입니다.
처음 MCP 연결하시는 분은 빨간 영역 (New MCP Server)를 눌러 주세요.

혹시 몰라서 설치한거 지워 봤는데 이렇게 나오네요? 암튼
MCP 추가 버튼을 눌러줍니다.

아까 내용을 붙여 넣어주시면 이렇게 나올꺼예요.
참고로 피그마 MCP 내용은 TalkToFigma 영역 부터 감싸고 있는 부분까지가 필요한 내용이예요.

다른 MCP 를 추가 하신다면 mcpServers 안에 내용을 쉼표 넣어서 추가 해주시면 됩니다.

---

4. 사용방법

아까 확인했던 화면에서 빨간 영역있죠 이 부분이 피그마 채널이라고 하는 부분입니다. 저 안의 내용은 어딜 선택하냐에 따라 바뀔수 있습니다.
저 채널명을 통해 cursor에서 html,css 로 디자인을 만들수 있고 
또한 cursor에서 피그마에게 디자인을 요청할 수도 있어요.

단순한 예로 사용법을 알려드릴꼐요

피그마 디자인에서 마크업이 필요한 부분을 마우스로 저렇게 파란색 영역으로 선택해 줍니다.
그 영역에서 마우스 우클릭해서
플러그인 > Cursor Talk To Figma MCP Plugin 클릭!
그럼 위 화면 채널명 보이시죠? 안보인다고 하지 말아줘 녹색 부분 말하는겁니다.
저 부분 긁어서 cursor 프롬프트를 작성해 보겠습니다. 

엔터 땅 치면!!!

이렇게 만들어준다~ 근데 알고 봤더니 아까 선택한 부분은 디자인이 아니라 이미지 부분이여서 
차마 화면은 보여드릴꼐...

아무튼 이렇게 사용하시면 될꺼 같습니다.

기타 궁금하시거나 보완해야할 부분은 언제나 환영합니다?!
감사합니다. ^^