피그마 피디아
home
피그마 실무Q&A
home

이제 Figma에서 클릭만 하면 MCP연결? Dev mode MCP 베타 오픈

글 작성일
2025/06/09
질문 카테고리
데브모드
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