Figma에서 MCP와 커서 활용하기

Cursor + Figma MCP 도입 이유

• 퍼블리싱 속도 향상
  • 초기 레이아웃 등 반복적인 마크업/스타일링 작업을 AI가 처리
  • 개발자는 로직/상태 관리/반응형 조정 등 핵심 구현에 집중 가능
• 전체 개발 사이클 단축

사용 방법

https://www.reese-log.com/cursor-figma-model-context-protocol

Cursor와 Figma로 경험하는 Model Context Protocol(MCP)

• 환경 세팅
  • Cursor 설치 및 MCP 플러그인 활성화

{
  "mcpServers": {
    "sse-server": {
      "url": "http://localhost:3333/sse"
    }
  }
}

Cursor Settings > mcp.json

• 디자인 → 코드 변환
  • Figma에서 특정 컴포넌트(버튼/카드/폼 등)를 선택 후 MCP 실행
  • 선택한 컴포넌트에 맞는 React + Tailwind 코드 자동 생성