본문으로 건너뛰기
cccskills
무료GitHub에 공개

figma

Figma manager: inspect designs, export assets, extract styles/components via MCP or REST API.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane스타 3(GitHub 3 + cccskills 0)
연동 도구Figma

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Figma Manager

Integra con Figma via MCP nativo o REST API.

Vía MCP

Tools: mcp__figma__authenticate, mcp__figma__complete_authentication Una vez autenticado, MCP expone operations. Revisá mcp__figma__* en contexto.

Vía REST API

curl "https://api.figma.com/v1/files/$FILE_KEY" \
  -H "X-Figma-Token: $FIGMA_TOKEN"

Obtener FILE_KEY del URL: https://www.figma.com/file/<FILE_KEY>/name?node-id=123-456 Node IDs en URL están con -, en API usar : (ej: 123:456).

Operaciones Clave

File tree completo

GET /v1/files/$FILE_KEY

Devuelve estructura completa (puede ser huge).

Nodos específicos

GET /v1/files/$FILE_KEY/nodes?ids=123:456,789:012

Mucho más eficiente que todo el file.

Exportar imágenes

GET /v1/files/$FILE_KEY/images?ids=123:456&format=svg&scale=1

Formats: png, jpg, svg, pdf Scale: 1-4 (para PNG)

Response tiene URLs temporales (expiran en ~1h). Descargar inmediatamente.

Styles globales

GET /v1/files/$FILE_KEY/styles

Colores, text styles, effects, grids publicados en el file.

Components publicados

GET /v1/files/$FILE_KEY/components
GET /v1/files/$FILE_KEY/component_sets

Variables (design tokens)

GET /v1/files/$FILE_KEY/variables/local

Figma Variables = design tokens nativos (primitives, aliases, modes).

Comandos

Inspect frame

/figma inspect <figma_url>

Flujo:

  1. Parsear URL → file_key + node_id
  2. GET nodos → estructura
  3. Extraer:
    • Dimensions (w × h)
    • Position (x, y)
    • Fills, strokes, effects
    • Text properties (font, size, weight, color, alignment)
    • Auto-layout rules
    • Children hierarchy
  4. Output estructurado

Export assets

/figma export <figma_url> [--format svg|png] [--scale 2]

Para bulk (todos los frames con prefix "icon/"):

  1. Buscar nodos matching pattern
  2. Bulk export
  3. Descargar a assets/icons/
  4. Nombrar kebab-case desde el node name

Extract tokens

/figma tokens <figma_url> [--output css|tailwind|json]

Ver /figma-tokens para detalle completo.

Component spec

/figma component <figma_url>

Genera spec completo del component:

  • Variants (property variants)
  • States (default, hover, active, disabled)
  • Tokens usados
  • Anatomy con measurements
  • Props/API sugeridos

Reglas

  • Rate limit: 2 req/s por token (strict)
  • Response size: archivos grandes pueden dar 30MB+ de JSON — usar /nodes?ids= selectivo
  • URLs exportadas expiran: descargar inmediatamente después del GET
  • Plugin API vs REST API: REST es read-only. Plugins (JavaScript en Figma) pueden modificar.
  • Tokens vs Styles: si el file usa Figma Variables, usar esos. Si no, fallback a Styles.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

ab-test-setup

무료

Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

accessibility

무료

Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

ad-creative

무료

Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

adaptive-music

무료

Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

agent-designer

무료

Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

agent-protocol

무료

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SebastianLuser/claude-code-arcane32026년 10월 27일 업데이트

SebastianLuser의 스킬 모두 보기

이 스킬의 문제 신고