Figma

Figma MCP 서버는 Model Context Protocol을 통해 Claude와 같은 AI 어시스턴트가 Figma의 디자인 파일 및 프로젝트와 상호작용할 수 있도록 해주는 통합 인터페이스입니다. 이를 통해 디자인 정보를 추출하고, 분석하며, 코드로 변환하는 과정을 자동화할 수 있습니다.

특징

• 디자인 파일 접근: Figma 파일, 프레임, 컴포넌트에 직접 접근 가능
• 레이아웃 정보 추출: UI 요소의 위치, 크기, 스타일 정보 추출
• 디자인 분석: 컬러 팔레트, 타이포그래피, 디자인 시스템 분석
• 코드 생성 지원: 디자인을 HTML, CSS, React 등의 코드로 변환 지원
• 컨텍스트 최적화: 관련성 높은 정보만 필터링하여 LLM에 제공
• 타입 안전성: TypeScript로 구현되어 견고하고 유지보수 가능한 코드베이스 제공
• 오류 처리 및 검증: 강력한 오류 처리 및 요청 검증으로 안정적인 운영 보장
• 배치 작업: 디자인 요소의 효율적인 처리를 위한 배치 작업 지원

API

리소스

• Files: Figma 파일 정보(페이지, 레이어, 컴포넌트 등)
• Projects: Figma 프로젝트 정보
• Comments: 파일에 대한 댓글 및 피드백
• Variables: 디자인 토큰 및 변수
• Themes: 테마 및 모드 설정

도구

list-files

사용자의 Figma 파일 목록을 조회합니다. - 입력: - 없음 또는 필터링 옵션

get-file

특정 Figma 파일의 콘텐츠를 조회합니다. - 입력: - fileKey: 파일 키 - options: - branch: 브랜치(선택) - version: 버전(선택) - depth: 조회 깊이(선택)

get-file-nodes

특정 Figma 파일의 노드 정보를 조회합니다. - 입력: - fileKey: 파일 키 - nodeIds: 조회할 노드 ID 배열

get-design-context

디자인 컨텍스트를 추출하여 코딩 에이전트가 사용할 수 있는 형태로 변환합니다. - 입력: - fileKey: 파일 키 - nodeId: 노드 ID(선택) - format: 출력 형식(JSON, HTML, React 등, 선택) - simplify: 정보 단순화 여부(선택)

create-variables

디자인 토큰(변수)을 생성합니다. - 입력: - fileKey: 파일 키 - variables: 변수 배열 - name: 변수 이름 - type: 변수 타입(COLOR, FLOAT, STRING) - value: 변수 값 - scope: 변수 범위(LOCAL, ALL_FRAMES)

create-theme

테마를 생성합니다. - 입력: - fileKey: 파일 키 - name: 테마 이름 - modes: 모드 배열 - name: 모드 이름 - variables: 변수 ID와 값 매핑 배열

add-comment

파일에 댓글을 추가합니다. - 입력: - fileKey: 파일 키 - message: 댓글 내용 - position: 위치 정보(선택) - parent: 부모 댓글 ID(선택)

사용 방법

설치 및 구성

1. Figma API 액세스 토큰 생성
2. Figma.com에서 사용자 이름 클릭 → 설정 → 보안
3. Personal Access Tokens 섹션에서 토큰 생성
4. 'File content' 및 'Comments' 스코프 권한 부여
5. NPM을 통한 Figma MCP 서버 설치

   npm install -g figma-mcp

6. Claude Desktop 구성 파일에 Figma MCP 서버 추가

   {
     "mcpServers": {
       "figma": {
         "command": "npx",
         "args": ["figma-mcp"],
         "env": {
           "FIGMA_ACCESS_TOKEN": "your_access_token_here"
         }
       }
     }
   }

7. 또는 직접 서버 실행 및 통합

   import { startServer } from 'figma-mcp-server';
   const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);

사용 예시

1. Figma 파일 URL을 AI 어시스턴트와 공유
2. 해당 디자인을 코드로 구현해달라고 요청
3. AI가 Figma MCP 서버를 통해 디자인 정보를 가져와 코드 생성

주의사항

• Figma API는 현재 일부 기능에 제한이 있을 수 있음
• 복잡한 디자인의 경우 컨텍스트 최적화가 필요할 수 있음
• 서버 사용 시 항상 최신 버전으로 업데이트 필요

연결된 구성 요소

• GitHub
• Jira
• Everything