本文へ移動
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 / 1000 文字

このフォームは 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 のスキルをすべて見る

このスキルの問題を報告する