커서를 사용하여 Figma 디자인을 읽고 수정할 수 있는 MCP 서비스입니다.

일반 소개

커서 피그마와 대화하기 MCP 는 오픈소스 프로젝트인 모델 컨텍스트 프로토콜 (MCP) 프로토콜은 AI 프로그래밍 도구 Cursor를 디자인 소프트웨어 Figma에 연결합니다. 개발자 Sonny Lazuardi가 만들었으며, GitHub에서 호스팅되고, 출시일은 2025년 3월 17일입니다. 이 도구의 핵심 기능은 Cursor가 Figma 디자인 파일을 읽고 코드를 생성하거나 디자인 콘텐츠를 직접 수정할 수 있도록 하는 것입니다. 이 도구는 타입스크립트로 작성되었으며 실시간 통신을 위해 웹소켓 기술을 통합했습니다. 디자인을 코드로 빠르게 변환하거나 AI로 디자인 파일을 조작하는 등 이 무료 도구는 개발자의 효율성을 높이는 데 도움이 됩니다. 누구나 코드를 다운로드하여 개발에 참여할 수 있습니다.

bolt.new 며칠 전에 출시된 새로운 기능입니다:클릭 한 번으로 Figma 설계를 풀 스택 애플리케이션으로 변환하기

기능 목록

• 커서와 피그마 연결양방향 통신은 MCP 프로토콜과 웹소켓을 통해 이루어집니다.
• 디자인 정보 읽기: Figma 파일, 선택한 콘텐츠 또는 노드별 세부 정보에 대한 문서 개요를 가져옵니다.
• 디자인 요소 만들기: 피그마에 사각형, 프레임 또는 텍스트 노드를 추가합니다.
• 스타일 및 레이아웃 수정하기색상, 테두리, 둥근 모서리를 조정하거나 노드를 이동, 크기 조정, 삭제할 수 있습니다.
• 코드 생성피그마 디자인을 사용 가능한 코드로 전환하여 수동 작성 시간을 단축합니다.
• 컴포넌트 관리 지원: 로컬 또는 팀 컴포넌트를 읽어 컴포넌트 인스턴스를 생성합니다.
• 내보내기 기능디자인 노드를 PNG, JPG, SVG 또는 PDF 형식으로 내보냅니다.
• 오픈 소스 및 무료이 코드는 공개적으로 사용 가능하며 개발자는 자유롭게 수정하거나 최적화할 수 있습니다.

도움말 사용

설치 프로세스

커서 토크 투 피그마 MCP를 사용하려면 몇 가지 부품을 설치하고 구성해야 합니다. 자세한 단계는 다음과 같습니다:

1. 환경 준비하기

• 설치 번Bun은 JavaScript를 빠르게 실행하는 도구입니다. 설치되어 있지 않은 경우 터미널을 열고 입력하세요:

curl -fsSL https://bun.sh/install | bash

• 커서 설치공식 웹사이트(cursor.ai)에서 커서 AI 프로그래밍 도구를 다운로드하여 설치합니다.
• 피그마 토큰 받기피그마에 로그인하고 계정 설정에서 개인 액세스 토큰을 생성한 후 저장합니다.

2. 프로젝트 다운로드

• 터미널에서 다음 명령을 실행하여 프로젝트 코드를 다운로드합니다:

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

• 프로젝트 카탈로그로 이동합니다:

cd cursor-talk-to-figma-mcp

3. 종속성 설치 및 설정

• 프로젝트 디렉토리에서 실행합니다:

bun setup

• 이렇게 하면 모든 종속성(TypeScript 및 웹소켓 라이브러리 포함)이 설치되고 Cursor에서 MCP 서버가 자동으로 구성됩니다.

4. 웹소켓 서버를 시작합니다.

• 터미널에 입력합니다:

bun start

• 또는 수동으로 실행하세요:

bun run src/socket.ts

• 그러면 Figma 플러그인을 MCP에 연결하기 위한 웹소켓 서버가 시작됩니다.

5. Figma 플러그인을 설치합니다.

• Figma 데스크톱 애플리케이션을 엽니다.
• 상단 메뉴 "플러그인" > "개발" > "새 플러그인"을 클릭합니다.
• "기존 플러그인 연결"을 선택한 다음 src/cursor_mcp_plugin/manifest.json 문서화.
• 확인이 완료되면 플러그인이 Figma의 개발 플러그인 목록에 표시됩니다.

6. 커서 MCP 서버 구성(수동 모드)

• 다음과 같은 경우 bun setup 자동화되지 않으며 수동으로 구성할 수 있습니다.
• 쇼(티켓) ~/.cursor/mcp.json 파일에 다음을 추가합니다:

{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

• 상호 호환성 /path/to/ 프로젝트의 실제 경로입니다.

주요 기능 사용 방법

설치가 완료되면 아래 단계를 따르세요:

스타터 키트

1. 웹소켓 서버 실행::
   • 터미널에 다음을 입력합니다. bun start를 클릭하고 서버가 실행 중인지 확인합니다.
2. Figma 플러그인 시작하기::
   • Figma에서 캔버스를 마우스 오른쪽 버튼으로 클릭하고 '플러그인' > '개발' > 방금 설치한 플러그인 실행을 선택합니다.
   • 플러그인이 시작되면 다음을 입력합니다. join_channel 커뮤니케이션 채널에 참여하세요.
3. 커서 연결::
   • 커서를 열고 MCP 서버가 구성되고 실행 중인지 확인합니다.

디자인 정보 읽기

• Figma에서 디자인 파일을 열고 조작할 섹션을 선택합니다.
• 예를 들어 커서의 '작성기' 모드에서 명령을 입력합니다:
  • "현재 문서 정보 가져오기": 다음과 같이 get_document_info.
  • "보기 선택": 전화 get_selection.
• 커서는 MCP를 통해 레이아웃, 스타일 등과 같은 디자인 데이터를 반환합니다.

디자인 생성 및 수정

• 커서에 구체적인 지침을 입력합니다:
  • 직사각형을 만듭니다:create_rectangle를 클릭하고 위치와 크기를 지정합니다.
  • 텍스트를 추가합니다:create_text를 클릭하고 콘텐츠와 글꼴을 설정합니다.
  • 색상을 수정합니다:set_fill_colorRGBA 값을 입력합니다.
• 변경 사항은 실시간으로 Figma 파일에 반영됩니다.

코드 생성

• 커서에 Figma 파일에 대한 링크를 붙여넣습니다(예 https://www.figma.com/file/xxx/yyy).
• "이 디자인 생성"이라는 명령을 입력합니다. React 코드."
• 커서가 디자인을 읽고 해당 코드를 출력합니다.

디자인 내보내기

• 커서로 입력합니다:export_node_as_image다음 표에서는 형식(PNG, JPG 등)을 선택하는 방법을 설명합니다.
• 내보낸 파일은 로컬에 저장됩니다.

취급 시 주의사항

• 연결 순서웹소켓을 먼저 시작한 다음 플러그인을 실행하고 마지막으로 커서를 사용하여 명령을 전송합니다.
• 오류 처리명령이 실패하면 터미널 로그를 확인하여 네트워크 및 권한이 정상인지 확인하세요.
• 성능 팁대용량 파일을 다룰 때는 먼저 get_document_info 개요를 보고 특정 노드를 조작할 수 있습니다.

이 도구의 강점은 디자인과 코딩을 원활하게 해준다는 점입니다. AI로 직접 Figma를 조작하거나 코드를 빠르게 생성할 수 있으므로 반복적인 작업을 많이 하지 않아도 됩니다.

애플리케이션 시나리오

1. 신속한 프로토타이핑
   시나리오 설명: 제품 관리자는 디자인 아이디어를 검증해야 합니다. 커서를 사용하여 Figma에서 요소를 만든 다음 코드를 내보내 인터랙티브한 프로토타입을 빠르게 생성할 수 있습니다.
2. 설계와 개발의 동기화
   시나리오 설명: 디자이너가 피그마 파일을 조정한 후 개발자는 커서를 통해 최신 디자인을 읽고 실시간으로 코드를 업데이트하여 통신 비용을 절감합니다.
3. 자동 스타일 조정
   시나리오 설명: 팀에서 디자인 색상이나 레이아웃을 일괄적으로 수정해야 합니다. 개발자는 커서를 사용하여 명령을 입력하여 조정을 자동화할 수 있습니다.

QA

1. 이 도구에 대한 비용을 지불해야 하나요?
   답변: 필요 없습니다. 이 프로젝트는 무료로 사용할 수 있는 오픈 소스 프로젝트이며, 코드는 GitHub에서 공개적으로 사용할 수 있습니다.
2. 출력에 지원되는 프로그래밍 언어는 무엇인가요?
   답변: 커서의 기능에 따라 다르지만, 현재 커서 생성 로직에 따라 React, HTML, CSS 및 기타 일반적인 프런트엔드 코드를 지원합니다.
3. 동시에 두 개 이상의 Figma 파일로 작업할 수 있나요?
   답변: 예, 하지만 각 파일마다 다른 채널을 추가해야 합니다( join_channel), 명령이 올바른 파일을 가리키는지 확인합니다.