MCP 문서 관리

메뉴

홈
문서 목록
관리자 로그인

문서 정보

최종 수정일:
2025-05-14 01:59
태그:
#MCP #커뮤니티 #서버 #디자인 #Figma #UI/UX

역링크

Talk To Figma

Talk To Figma

Talk To Figma는 LLM이 Figma와 상호작용하여 프로그래밍 방식으로 디자인을 읽고 수정할 수 있게 해주는 MCP 서버입니다. 이 서버는 Figma API와 통합되어 디자인 요소, 컴포넌트, 스타일 등의 정보를 검색하고 조작할 수 있는 기능을 제공합니다. 이를 통해 AI 기반 디자인 자동화, 코드 생성, 디자인 분석 등 다양한 작업이 가능해집니다.

특징

  • Figma API 통합: Figma의 공식 API를 활용한 안정적이고 강력한 통합
  • 디자인 요소 접근: 파일, 프레임, 컴포넌트, 스타일 등 Figma 디자인 요소에 대한 포괄적인 접근
  • 읽기 및 쓰기 작업: 디자인 요소 검색, 분석뿐만 아니라 생성 및 수정 기능 제공
  • 디자인-코드 변환: Figma 디자인을 기반으로 한 코드 구현 지원
  • 개발자 워크플로우 향상: AI 코딩 도구와의 원활한 통합으로 개발 효율성 향상

API

도구

파일 및 프로젝트 관리

  • list_files: 사용자의 Figma 파일 목록 검색
  • 입력: 프로젝트 ID(선택적)

  • 출력: 파일 목록 및 메타데이터

  • get_file: 특정 Figma 파일의 구조 및 내용 검색

  • 입력: 파일 키
  • 출력: 파일 구조, 페이지, 요소 정보

디자인 요소 조작

  • get_node: 특정 노드(요소)의 정보 검색
  • 입력: 파일 키, 노드 ID

  • 출력: 노드 구조 및 속성

  • create_frame: 새 프레임 생성

  • 입력: 파일 키, 프레임 속성(크기, 위치 등)

  • 출력: 생성된 프레임 ID 및 정보

  • update_node: 기존 노드 속성 업데이트

  • 입력: 파일 키, 노드 ID, 업데이트할 속성
  • 출력: 업데이트 성공 여부

스타일 및 컴포넌트

  • get_styles: 파일 내 스타일 정보 검색
  • 입력: 파일 키, 스타일 타입(색상, 텍스트 등)

  • 출력: 스타일 목록 및 속성

  • get_components: 파일 내 컴포넌트 정보 검색

  • 입력: 파일 키

  • 출력: 컴포넌트 목록 및 속성

  • create_variables: 디자인 변수(토큰) 생성

  • 입력: 파일 키, 변수 정보(이름, 타입, 값 등)

  • 출력: 생성된 변수 ID 및 정보

  • create_theme: 테마 생성 및 관리

  • 입력: 파일 키, 테마 이름, 모드 정보
  • 출력: 생성된 테마 정보

코드 관련

  • export_to_code: 디자인 요소를 코드로 변환
  • 입력: 파일 키, 노드 ID, 코드 형식(HTML/CSS, React 등)
  • 출력: 변환된 코드

사용 방법

설치

# npm을 통한 설치
npm install -g figma-mcp-server

# 또는 직접 저장소 클론
git clone https://github.com/author/figma-mcp-server
cd figma-mcp-server
npm install

Figma API 토큰 얻기

  1. Figma 계정에 로그인합니다
  2. 계정 설정 > 개인 접근 토큰으로 이동합니다
  3. 새 토큰 생성 버튼을 클릭합니다
  4. 토큰 이름을 입력하고 토큰을 생성합니다
  5. 생성된 토큰을 안전하게 저장합니다 (다시 확인할 수 없습니다)

구성

Claude Desktop 또는 다른 MCP 클라이언트에서 이 서버를 사용하려면 다음과 같이 설정 파일에 추가할 수 있습니다:

{
  "mcpServers": {
    "figma": {
      "command": "figma-mcp-server",
      "args": ["--api-key=YOUR_FIGMA_API_KEY"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

사용 예시

// Figma 파일 정보 가져오기
const fileInfo = await get_file("abcXYZ123");

// 컴포넌트 목록 가져오기
const components = await get_components("abcXYZ123");

// 특정 프레임의 코드 내보내기
const code = await export_to_code("abcXYZ123", "frameNodeId", "react");

Cursor, Windsurf 등과의 통합

Talk To Figma는 Cursor, Windsurf, Cline 등의 AI 코딩 도구와 특히 잘 통합됩니다. 이러한 도구는 디자인 데이터를 직접 액세스하여 디자인을 정확하게 코드로 변환할 수 있습니다. Figma 파일 링크를 공유하고 디자인 구현을 요청하면 AI 도구가 적절한 코드를 생성합니다.

연결된 구성 요소

  • Figma Context MCP - AI 코딩 도구에 Figma 디자인 데이터 제공에 특화된 MCP 서버
  • Framelink Figma MCP - Figma 파일 데이터에 접근하기 위한 또 다른 MCP 서버