figma

aydenden's avatarfrom aydenden

Figma 디자인 파일에서 정보를 가져옵니다. 파일 구조, 노드 정보, 스타일 정보를 조회할 때 사용합니다.

⭐1stars🔀1forks📁View on GitHub🕐Updated Dec 17, 2025
[Visual Content Workflows]

When & Why to Use This Skill

This Figma API skill empowers Claude to interact directly with Figma design files, enabling the seamless extraction of file structures, node properties, and design styles. By bridging the gap between design assets and AI, it facilitates automated design audits, real-time style inspection, and streamlined design-to-development handoffs, making it an essential tool for UI/UX designers and front-end developers.

Use Cases

  • Design-to-Code Automation: Extract CSS properties, dimensions, and layout hierarchies from specific Figma nodes to accelerate the creation of front-end components.
  • Design System Auditing: Programmatically scan design files to ensure all elements adhere to global styles (colors, typography, effects) and identify inconsistencies.
  • Automated Documentation: Generate technical specifications or design handoff documents by pulling live metadata and component information directly from Figma.
  • Design Token Extraction: Retrieve all color and text styles from a design file to automatically generate design tokens for use in codebases.
namefigma
descriptionFigma 디자인 파일에서 정보를 가져옵니다. 파일 구조, 노드 정보, 스타일 정보를 조회할 때 사용합니다.
allowed-toolsBash, Read, Write

Figma API Skill

Figma REST API를 사용하여 디자인 파일 정보를 가져오는 스킬입니다.

사전 준비

환경변수 FIGMA_TOKEN이 설정되어 있어야 합니다:

export FIGMA_TOKEN="your-personal-access-token"

Personal Access Token은 Figma 계정 설정에서 발급받을 수 있습니다: https://www.figma.com/developers/api#access-tokens

Instructions

1. 파일 정보 가져오기

Figma 파일의 전체 구조와 메타데이터를 가져옵니다.

bash .claude/skills/figma/scripts/get-file.sh <FILE_KEY>

파라미터:

  • FILE_KEY: Figma 파일 URL에서 추출한 파일 키
    • 예: https://www.figma.com/file/ABC123/Design → ABC123

응답 정보:

  • 파일 이름, 버전, 마지막 수정 시간
  • 전체 노드 트리 구조
  • 컴포넌트, 스타일 정보

2. 노드 정보 가져오기

특정 노드(프레임, 컴포넌트 등)의 상세 정보를 가져옵니다.

bash .claude/skills/figma/scripts/get-node.sh <FILE_KEY> <NODE_IDS>

파라미터:

  • FILE_KEY: Figma 파일 키
  • NODE_IDS: 쉼표로 구분된 노드 ID 목록
    • 예: 202:8,303:12

응답 정보:

  • 노드 타입, 위치, 크기
  • 스타일 속성 (색상, 타이포그래피 등)
  • 자식 노드 정보

3. 스타일 정보 가져오기

파일의 모든 스타일(색상, 텍스트, 효과 등) 정보를 가져옵니다.

bash .claude/skills/figma/scripts/get-styles.sh <FILE_KEY>

파라미터:

  • FILE_KEY: Figma 파일 키

응답 정보:

  • 색상 스타일 (fills, strokes)
  • 텍스트 스타일 (font, size, weight)
  • 효과 스타일 (shadows, blurs)

Examples

예제 1: 파일 구조 확인

# 디자인 시스템 파일의 전체 구조 확인
bash .claude/skills/figma/scripts/get-file.sh ABC123XYZ

예제 2: 버튼 컴포넌트 정보 추출

# 특정 버튼 컴포넌트의 속성 확인
bash .claude/skills/figma/scripts/get-node.sh ABC123XYZ "202:8,202:9"

예제 3: 디자인 토큰 추출

# 모든 색상/텍스트 스타일을 가져와서 디자인 토큰으로 변환
bash .claude/skills/figma/scripts/get-styles.sh ABC123XYZ

주의사항

  • API 요청은 rate limit이 적용됩니다 (분당 100 요청)
  • 큰 파일의 경우 응답 시간이 오래 걸릴 수 있습니다
  • 유효한 FIGMA_TOKEN이 필요합니다
  • jq 명령어가 설치되어 있어야 합니다 (JSON 포맷팅용)
    • macOS: brew install jq
    • Ubuntu/Debian: apt-get install jq