[AI] Claude Code에 Figma MCP 설정

·
AI
오늘은 최근 AI 개발 생태계의 화두인 MCP(Model Context Protocol)를 활용해,Figma와 Claude Code를 연동하는 방법을 공유하려 합니다. 디자인 파일을 보며 일일이 CSS 속성을 복사하던 번거로움에서 벗어나,AI 에이전트가 내 디자인 컨텍스트를 직접 이해하게 만드는 생산성 혁명을 경험해 보세요.1. Figma MCP란?MCP(Model Context Protocol)는 AI 모델이 외부 데이터(GitHub, Figma, DB 등)와직접 상호 작용할 수 있도록 돕는 표준 인터페이스입니다. Figma MCP 서버를 연결하면 다음과 같은 작업이 가능해집니다.디자인 컨텍스트 추출: 변수, 컴포넌트, 레이아웃 데이터를 IDE로 직접 가져오기코드 생성: 선택한 프레임 기반으로 Reac..