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

연결방법

✔️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