디자이너를 위한 MCP: Figma, 토큰 및 코드를 Claude 및 Cursor에 연결

MCP는 간단히 말해서 무엇입니까?

공식 MCP 문서에서는 AI 애플리케이션을 파일, 데이터베이스, 도구와 같은 외부 시스템에 연결하기 위한 오픈 소스 표준으로 설명합니다. 자체 예 중 하나는 Figma 디자인에서 전체 웹 앱을 생성하는 Claude Code입니다. 디자이너에게 중요한 부분은 AI가 더 이상 디자인이 어떻게 생겼는지 추측할 필요가 없다는 것입니다. 디자인 툴에 직접 물어볼 수도 있습니다.

현재 MCP 서버를 사용한 설계 도구

2026년 10월 현재:

• Figma: 코드 생성을 위한 에이전트 설계 컨텍스트(변수, 구성 요소, 레이아웃)를 제공하고 기본 콘텐츠를 캔버스에 다시 작성할 수 있는 MCP 서버입니다. Figma는 스타터 및 유료 플랜에 나열되어 있습니다. 베타 기간 동안 캔버스 글쓰기는 무료입니다.
• Penpot: Claude, Cursor, VS Code 및 OpenAI Codex를 포함한 모든 MCP 클라이언트와 작동하고 자체 호스팅이 가능한 무료 개방형 MCP 서버입니다.
• ExodeUI(우리가 만듭니다): AI 코딩 도구가 상태 및 스프링 물리학을 사용하여 대화형 애니메이션을 생성하고 편집할 수 있게 해주는 MCP 서버입니다.
• 토큰 설계: 토큰이 JSON로 저장소에 있는 경우 AI 코딩 도구는 이미 해당 토큰을 파일로 읽을 수 있습니다. 전용 서버는 도구 내부에 저장된 토큰에만 필요합니다.

디자이너가 실제로 사용하는 방법

가장 일반적인 워크플로는 마술적이라기보다는 실용적입니다. 개발자는 프레임을 선택하고 AI에게 이를 기존 구성 요소 라이브러리로 구현하도록 요청합니다. 디자이너는 AI에게 코딩된 화면이 디자인과 일치하는지 확인하고 차이점을 나열하도록 요청합니다. 팀은 AI에게 코드베이스 전체에 걸쳐 구성 요소의 토큰을 업데이트하도록 요청합니다. 그리고 점점 더 많은 디자이너들이 AI를 사용하여 캔버스에 직접 변형을 그린 다음 직접 수정하고 있습니다.

서버 연결

Claude Code는 claude mcp add 명령을 사용하거나 프로젝트의 .mcp.json 파일을 통해 서버를 추가하고 로컬 HTTP 서버는 물론 원격 HTTP 서버도 지원합니다. Cursor는 설정에서 MCP 서버를 관리하고 로컬(stdio) 및 원격 서버를 지원합니다. 원격 서버는 일반적으로 OAuth로 한 번 로그인하도록 요청합니다. 각 공급업체는 해당 서버에 대한 정확한 명령이나 URL을 문서화합니다.

주의할 점

MCP는 AI 도구에 실제 액세스를 제공하므로 통합처럼 취급하십시오.

• 권한: 캔버스나 저장소에 쓸 수 있는 에이전트도 실수를 할 수 있습니다. 버전 기록을 사용하고 변경 사항을 검토하세요.
• 개인 정보 보호: 설계 데이터가 어디로 가는지, 계획에서 이를 허용하는지 확인하세요.
• 비용: 일부 쓰기 기능은 베타 버전에서 무료이며 사용량에 따라 제공될 예정입니다.
• 품질: AI 출력은 명명된 구성 요소와 토큰을 사용하여 시스템이 잘 구조화된 경우에만 디자인 시스템을 따릅니다.