← 
Figma
Claude
Figma이게 가능해져요
Figma 디자인을 Claude가 직접 보고 코드를 작성해요
Claude이 버튼 컴포넌트 React 코드로 만들어줘 (스크린샷 첨부)
나
스크린샷을 보니 파란색 버튼으로 보이는데요, 정확한 색상 코드, 크기, 패딩 값을 알려주시면 더 정확하게 작성할 수 있어요.MCP 미연결
Figma MCP로 디자인 파일을 Claude·Cursor에 연결
Middle class 약 15분MCP 연동
Figma 디자인 파일을 Claude나 Cursor에 직접 연결하면 '이 컴포넌트 코드로 변환해줘'라고 했을 때 AI가 실제 디자인을 보고 픽셀 단위로 정확한 코드를 작성해줍니다.
Figma 열기
figma.com
STEP 1 / 4…
1
STEP 1. Figma 계정 만들기 및 Claude Desktop 설치
claude.ai/download
Claude Desktop
Anthropic
여기를 클릭!
무료 · v1.x
figma.com → Sign up / claude.ai/download → 앱 다운로드 및 설치
두 가지가 필요합니다. Figma: figma.com에 접속해 'Sign up' 버튼으로 Google 계정 또는 이메일로 가입합니다. 무료 플랜으로 시작 가능합니다. Claude Desktop: claude.ai/download에서 Mac 또는 Windows용 Claude Desktop 앱을 다운로드해 설치합니다. 앱 설치 후 Anthropic 계정으로 로그인합니다.
Claude Desktop(데스크톱 앱)과 claude.ai(웹사이트)는 다릅니다. MCP 연동은 반드시 데스크톱 앱에서만 작동합니다.
이 단계를 완료했나요?