피그마 피디아
피그마 관련 정보
월간 피그마
UXUI 공부
피그마 실무Q&A
운영 가이드
콘텐츠 작성 가이드
무료 애니메이션 툴 phase 소개
유용한 피그마 플러그인
피그마 용어 사전
Mac 단축키 리스트
Win 단축키 리스트
월간 피그마 아카이빙
월간 피그마 문의채널
키오스크 맛집 탐방
UXUI 아티클
UXUI 용어정리
기술&디자인 블로그
Share
피그마 피디아
피그마 실무Q&A
운영 가이드
콘텐츠 작성 가이드
무료 애니메이션 툴 phase 소개
피그마 관련 정보
유용한 피그마 플러그인
피그마 용어 사전
Mac 단축키 리스트
Win 단축키 리스트
월간 피그마
월간 피그마 아카이빙
월간 피그마 문의채널
UXUI 공부
키오스크 맛집 탐방
UXUI 아티클
UXUI 용어정리
기술&디자인 블로그
이제 Figma에서 클릭만 하면 MCP연결? Dev mode MCP 베타 오픈
글 작성일
2025/06/09
링크
https://www.youtube.com/watch?v=_mQC4dn4v5M&t=24s
질문 카테고리
데브모드
1 more property
연결방법
Dev mode실행 시 우측 메뉴에서 MCP 모드 사용 여부 체크
Cursor Tools page에 가서Figma 메뉴 추가하기
https://docs.cursor.com/tools
Personal access tokens라는 메뉴에서 generate new token을 클릭하여 생성
npx figma-developer-mcp --figma-api-key=<여기에 토큰 복붙> 에서 괄호 안에 복사한 토큰을 붙여넣고
cursor에 figma mcp연결해달라고 요청하기
연결되었다고 뜨면 데브모드 상태에서 프레임 선택하고 프레임 정보 읽어달라고 요청해보기(연결 확인)
Dev mode MCP에서 지원하는 기능
Dev mode 상태에서 선택한 객체만 읽어줌
프레임 구조 읽기, 변수 읽기, 디자인, 요청한 언어에 맞는 코드 생성
Code connect와 연계해서 활용 시 할루시네이션 현상을 줄여줌
(이건 저도 개발 베이스가 아니라 잘은 모르는데, 다른분이 쓰신 후기 참고했습니다.)
참고영상
https://www.youtube.com/watch?v=_mQC4dn4v5M&t=24s