Skip to content
cccskills
FreePublished on GitHub

figma

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

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3 stars(GitHub 3 + cccskills 0)
Works withFigma

Run score Not tested

See how to install

Files included (1)

  • SKILL.md3.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

ab-test-setup

Free

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

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

accessibility

Free

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.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

ad-creative

Free

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

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

adaptive-music

Free

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.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

agent-designer

Free

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

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

agent-protocol

Free

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

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

See all skills by SebastianLuser

Report a problem with this skill