Figma MCP Dev mode(Figma MCP Server) 연결

 

기존에 사용했던 Talk to Figma 같은 경우는 디자이너 중심이었다고 하면 이번에 새로 출시된 Figma mcp dev 모드는 디자인 코드 추출과 개발협업이 더 강화된 ai 도구라고... gpt가 말해주네요.

 

Figma MCP Dev mode

 

 

 

1. Figma dev mode- 활성화

 

    1.1 - Figma - 새디자인 파일 좌측 상단 피그마 로고 눌러서 - 기본 설정 - Dev mode MCP 모드 활성화

 

 

 

 

 

or

 

 

 

  1-2. 디자인 창 오른쪽에서도 활성화 가능

 

 

 

 

 

 

 

 

2. Cursor 공식 툴 사이트 들어가서  - Figma "+Add Figma to Cursor" 클릭

 

https://docs.cursor.com/tools

Cursor – MCP Directory

 

 

 

 

 

 

 

 

 

 

3 . Cursor- 설정 들어가서 "Tools&Integrations"or "MCP server"에 들어가서 보면 인스톨할 수 있는 창이 뜹니다.

설치하면 아래 화면같이 "Figma"라고 써 있는 mcp가 연결됩니다.

 

 

 

 

 

 

 

 

 

 

 

4. Fimga에서 토큰 생성

 

 

Figma에 가서 프로필- 설정 - 보안 - 새로운 토큰 생성 (복사)

 

 

 

 

 

 

 

 

 

 

6. Cursor에 가서 Figma mcp 연결

 

" npx figma-developer-mcp --figma-api-key= (여기에 개인이 복사한 토큰 붙여넣기) mpc 서버에 연결해줘"

 

 

Cursor 프롬프트 창에 위 내용 입력하면 mcp 서버에 연결이 됩니다.