강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

콜라중독님의 프로필 이미지
콜라중독

작성한 질문수

[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

[2-1] 폴터구조와 파운데이션 생성

cursorTalkToFigmaMcp 사용방법

작성

·

30

0

피그마 mcp 사용방법 따로 가이드 없을까요..?
커서에서도 뭔가 mcp툴을 설치해줘야하는것같고

bun을 설치해서 피그마에서 나오는 스크립트를 실행시켜줘야 커넥션이 생기는것같은데. 강의를 보고 따라했는데 실제로 figma랑 연결안하고 자동으로 타이포그라피랑 컬러를 생성하는것같아요..

답변 2

1

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 콜라중독님!
피그마에 연결하는 방법은 버전에 따라 다양한 방법으로 나뉠 수 있는데요!
현재 기준으로 쉽게 접속하는 방법이 있어서 안내드릴테니 따라해 보세요!

아래의 순서대로 총 4가지 단계를 완료해 주세요!
과정1) Cursor-Talk-To-Figma 플러그인을 실행하여 Connect하기
과정2) Cursor-Talk-To-Figma 플러그인에 Connect 되면 나타나는 설정값을 복사해서 커서 Settings에 등록하기
과정3) 커서를 종료하고 다시 켜기(이 과정에서 반드시 "완전히 종료" 하셔야 합니다 - 최소화(X))
과정4) 커서 Settings에 등록된 MCP 초록불 확인 후, Cursor-Talk-To-Figma 플러그인 다시 Connect


아래 상세한 가이드를 드립니다




과정1) Cursor-Talk-To-Figma 플러그인을 실행하여 Connect하기

피그마에 접속해서 Cursor-Talk-To-Figma 플러그인을 실행해 주세요!

image.png



연결이 되지 않았다는 에러메시지를 복사하여 Cursor의 채팅에 알려주세요!

image.png

 

image.png

 

image.png

(이 과정에서, bun이 컴퓨터에 설치되지 않은 경우 에러가 발생할 수 있는데, "bun이 설치되지 않은 경우 bun을 설치해서 진행해줘" 라는 문장을 추가해서 요청해 주세요!)




과정2) Cursor-Talk-To-Figma 플러그인에 Connect 되면 나타나는 설정값을 복사해서 커서 Settings에 등록하기


연결 준비가 완료되었으므로 피그마에 돌아가서, Connect 버튼을 눌러서 연결 한 후, 설정을 복사해 주세요!

image.png

 

image.png

 

복사한 설정값을 Cursor의 Settings의 MCP 메뉴에 들어가서 추가해 주세요.

image.png






과정3) 커서를 종료하고 다시 켜기(이 과정에서 반드시 "완전히 종료" 하셔야 합니다 - 최소화(X))

최소화가 아닌, 완전히 종료 후 다시 실행해 주세요.





과정4) 커서 Settings에 등록된 MCP 초록불 확인 후, Cursor-Talk-To-Figma 플러그인 다시 Connect하기

Cursor를 재시작 후, Settings에 들어가서 피그마MCP에 초록불이 켜진 것을 확인해 주세요.

image.png


피그마에서 Cursor-Talk-To-Figma 플러그인을 켜고, 연결을 재시도하여, 성공시 나타나는 채널명을 복사해서 사용해 주세요

image.png


프롬프트에서 활용하기 이전에, 정말 연결이 잘 되었는지 테스트가 궁금하다면 미리 한 번 테스트 해보세요!

image.pngimage.png

0

콜라중독님의 프로필 이미지
콜라중독
질문자

해결했습니다 감사합니다~ 추가적으로 궁금한점인데 파일에서는 채널명이나 노드아이디를 수정했는데 ai창을 닫지않으면 해당 수정한 채널명으로 요청보내지않고 이전에입력되있던 아이디로 요청을 보내는것같은데 파일을 수정하면 ai창을 닫았다가 다시 열어야하나요 ??

콜라중독님의 프로필 이미지
콜라중독

작성한 질문수

질문하기