[Figma 꿀팁] Windows에서 Figma MCP + Cursor 연결해본 후기, 직접 해보니 이렇게 하세요.

 

 

얼마 전부터 Cursor AI에서 Figma를 불러와서 디자인을 기반으로 코드를 생성할 수 있는 기능이 나온 걸 보고, 저도 호기심에 직접 설치해봤습니다. 처음엔 '이게 진짜 잘 될까' 싶었는데, 실제로 연결해보니 꽤 유용하다는 후기가 많았고, 제대로 활용하면 디자이너-개발자 협업에 큰 도움이 될 수도 있겠다는 생각이 들었어요.

 

유튜브에 Figma MCP라고 검색을 하면 설치 방법을 상세하게 알 수 있습니다. 먼저 Cursor talk to figma mcp라는 플러그인을 깃허브에서 다운 받아줍니다. 그리고 아래 피그마에서도 cursor talk to figma mcp 플러그인을 설치를 해줍니다.

 

Cursor talk to figma mcp 구글 검색

인터넷에서 cursor talk to figma mcp를 검색

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

해당 파일을 설치하고

커서 앱에서 오픈 프로젝트에서 해당 폴더를 그대로 열어줍니다.

 

유튜브에서는 'read me 읽어보고, MCP 서버 연결 순서대로 진행해줘' 라고 입력하라고 하더라구요.

 

 

MCP 서버 설치 - (Windows) Bun 설치

MCP 서버 설치하는게 제일 간단하면서도 어려웠는데, Windows에서는 Bun이 설치가 되어있지 않아서 Powershell을 통해 따로 설치를 해줘야 합니다.

 

1. Node.js 먼저 설치

Bun은 내부적으로 Node.js를 사용해서, 미리 Node.js가 설치되어있어야 문제없이 동작합니다.

 

2. Powershell 관리자 모드로 열기

윈도우에서는 관리자 권한으로 Powershell을 실행하는게 중요해요. 그래야 환경 변수 등록등이 문제 없이 적용됩니다.

 

3. bun 사이트 들어가서 윈도우용 Bun 설치하기

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

 

https://bun.sh/

 

해당 사이트로 이동하거나 Powershell을 켜서 해당 코드를 복사해서 넣어주면 됩니다.

퍼센트가 올라가는 모습

Bun이 설치가 완료되었습니다.

절차에 따라 진행하면 맨 마지막 화면이 노출됩니다.

 

피그마를 키고 Cursor AI 에 Join_channel ( 서버 코드 ) 입력해주면 끝입니다.

 

ChatGPT가 추천해준 cursor ai 사용 명령문