Figma MCP로 디자인 파일을 Claude·Cursor에 연결
Figma 디자인 파일을 Claude나 Cursor에 직접 연결하면 '이 컴포넌트 코드로 변환해줘'라고 했을 때 AI가 실제 디자인을 보고 픽셀 단위로 정확한 코드를 작성해줍니다.
따라 하기
1단계
Figma 계정 만들기 및 Claude Desktop 설치
- 두 가지가 필요합니다.
- 1Figma: figma.com에 접속해 Sign up(가입하기) 버튼으로 Google 계정 또는 이메일로 가입합니다.
- 2무료 플랜으로 시작 가능합니다.
- 3Claude Desktop: claude.com/download에서 Mac 또는 Windows용 Claude Desktop 앱을 다운로드해 설치합니다.
- 4앱 설치 후 Anthropic 계정으로 로그인합니다.
Figma 열기claude.ai/download
Claude Desktop
Anthropic
여기를 클릭!
무료 · v1.x
누를 위치 figma.com›Sign up / claude.com/download›앱 다운로드 및 설치
팁 원격 MCP 서버는 claude.ai 웹 커넥터로도 연결되지만, 내 컴퓨터에서 도는 로컬 서버는 데스크톱 앱이나 Claude Code에서만 돼요(공식 도움말).
처음이라 잘 모르겠다면
Claude Desktop 설정 파일에 Figma MCP 서버 설정을 추가하세요. figma-mcp npm 패키지를 사용합니다.
막히면 볼 것
AI 없이 할 때와 뭐가 다른가요?
Figma 디자인을 Claude가 직접 보고 코드를 작성해요
이 버튼 컴포넌트 React 코드로 만들어줘 (스크린샷 첨부)
나
스크린샷을 보니 파란색 버튼으로 보이는데요, 정확한 색상 코드, 크기, 패딩 값을 알려주시면 더 정확하게 작성할 수 있어요.