MCP
MCP 플러그인은 AI 어시스턴트와 연동해 프레이머 프로젝트를 자연어 명령으로 수정하고, React 코드로 내보내는 혁신적인 도구입니다.
MCP (Model Context Protocol)를 사용해 Framer 프로젝트를 AI 어시스턴트와 연결하세요. Claude, Cursor, 기타 MCP 호환 툴이 보안 연결을 통해 Framer 디자인과 직접 상호작용할 수 있습니다.
활용 예시
Claude에게 SEO 리서치를 기반으로 랜딩 페이지 카피를 다시 작성해 달라고 요청
커스텀 코드 컴포넌트를 생성해 캔버스에 바로 삽입
단일 명령으로 프로젝트 전체 색상 스타일 업데이트
Framer 컴포넌트를 프로덕션 준비된 React 코드로 내보내기
AI 생성 콘텐츠로 디자인 업데이트 자동화
작동 방식
이 플러그인은 Framer 프로젝트와 MCP 호환 AI 어시스턴트 사이에 WebSocket 기반의 보안 터널을 생성합니다. 이때 Framer 사용자 ID가 고유 식별자로 사용되며, 모든 프로젝트에서 동일한 연결 URL을 사용할 수 있어 한 번만 설정하면 됩니다.
AI 어시스턴트(Claude 등)에서 요청을 보내면, Cloudflare Worker를 통해 프레이머 플러그인에 전달되고, 플러그인의 Framer Plugin API가 해당 명령을 실행합니다. 응답은 같은 보안 채널을 통해 다시 전송됩니다. MCP URL은 사용자의 Framer ID와 선택적 세션 비밀 키를 포함하며, 모든 프로젝트에서 동일하게 사용됩니다.
제공 기능
Project Structure: 페이지, 컴포넌트, 코드 파일의 XML 구조 반환
Node Selection: 선택한 요소를 읽고 수정
XML Updates: 노드 속성, 텍스트, 구조 수정
Color Styles: 색상 스타일 생성, 수정, 적용
Text Styles: 타이포그래피 스타일 관리 (속성 포함)
Font Search: 프레이머 폰트 라이브러리에서 폰트 검색 및 적용
Node Operations: 요소 복제, 삭제, 특정 노드로 줌
React Export: Framer 컴포넌트를 React 코드로 변환 (
unframer CLI사용, React Export 플러그인과 동일한 구독 공유)Code Files: TypeScript/React 코드 컴포넌트 생성, 읽기, 수정
Component Insertion: 컴포넌트를 정확한 위치에 삽입
AI 어시스턴트 연결 방법
Claude 데스크톱 앱
메뉴 > 설정(Settings) 열기
Developer 탭에서 설정 파일 편집
플러그인에서 제공된 MCP 서버 URL 추가
앱 재시작 후 연결 활성화
Cursor IDE
명령 팔레트 열기 (Cmd/Ctrl + Shift + P)
“Cursor Settings”에서 MCP 옵션 선택
설정 파일(~/.cursor/mcp.json)에 서버 URL 추가
MCP 서버 새로고침
에이전트 모드에서 MCP 도구 사용
Claude Code CLI
Claude Code CLI 설치
claude mcp add "framer-mcp" <mcp-url>실행모든 세션에서 서버 사용 가능
기술 세부사항
이 시스템은 세 가지 요소로 구성됩니다:
Framer 플러그인: Framer 내부에서 실행되며 API 호출 처리 및 WebSocket 연결 유지
MCP 서버: Cloudflare Worker에서 MCP 프로토콜 실행
WebSocket 터널: 사용자 ID 기반 양방향 연결
한 사용자 계정에는 하나의 플러그인만 연결할 수 있고, 여러 MCP 클라이언트가 동시에 접속할 수 있습니다. 모든 요청은 5초 제한과 자동 재연결 기능을 지원하며, 실행 전 검증됩니다.
보안 관련 사항
세션 시크릿이 포함된 MCP URL은 절대 공유하지 마세요.
연결은 Framer 사용자 계정에 귀속됩니다.
모든 작업은 MCP 클라이언트에서 명시적 승인이 필요합니다.
플러그인은 현재 열려 있는 프로젝트에만 접근합니다.
활용 예시
랜딩 페이지 최적화: Claude가 키워드를 조사해 제목과 메타 설명을 SEO 최적화 콘텐츠로 업데이트
디자인 시스템 업데이트: Claude에게 색상 팔레트를 생성하게 하고 전체 컴포넌트에 적용
컴포넌트 개발: Claude Code로 React 컴포넌트를 작성해 Framer 프로젝트에 바로 삽입
콘텐츠 마이그레이션: 기존 컴포넌트를 React 코드로 내보내 프로덕션 앱에 통합
자동화 테스트: 접근성 기준을 충족하지 않는 텍스트 스타일을 확인하고 수정프레이머 캔버스 공간 절약 팁
캔버스 공간 절약하기
MCP는 항상 열려 있어야 하지만, 오른쪽 하단의 축소 버튼을 눌러 창을 최소화하면 화면 공간을 절약할 수 있습니다.
프로그래밍 방식 사용 예
MCP는 도구를 통해 Framer를 프로그램적으로 제어할 수도 있습니다. 예를 들어 SEO 키워드 리서치 결과를 기반으로 블로그 포스트를 자동 추가하는 에이전트를 만들 수 있습니다.
Explore More Plugins