lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

herramienta intermedio claude-codecodexclifigma

Figma CLI: extrae contexto de diseño y revisa comentarios pendientes

Prepara contexto compacto de un frame y revisa comentarios entre archivos para coordinar diseño y desarrollo desde la terminal.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.


Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: prepara el acceso

Comprueba Node.js ≥22.20.0, npm/npx y Go ≥1.26.10. El instalador de Printing Press compila la CLI y después llama a skills, cuyo mínimo de Node es más alto. Aplica la línea de PATH que imprima el instalador si su directorio de binarios no está disponible (~/.local/bin en Unix). Configura en tu entorno FIGMA_API_TOKEN para un token personal o FIGMA_OAUTH2 para OAuth, según las operaciones que usarás. Verifica que esa cuenta puede leer los archivos de prueba.

Paso 2: instala la CLI

Ejecuta el comando de instalación del README:

npx -y @mvanhorn/printing-press-library install figma

Paso 3: prueba el flujo documentado

Ejecuta los comandos en este orden. Sustituye abc123 por la clave de tu archivo y 1234-5678 por el identificador del frame de prueba. Compara los nodos devueltos con ese frame en Figma antes de auditar los comentarios.

figma-pp-cli doctor
figma-pp-cli files get-file abc123
figma-pp-cli sync files components comments
figma-pp-cli frame extract abc123 --ids 1234-5678 --depth 4 --json
figma-pp-cli comments-audit --older-than 14d --group-by file,author

Comprobación

Comprueba que cada comando termina correctamente y que la salida corresponde a la cuenta, fuente o datos que seleccionaste. Una lista vacía no demuestra que el dato no exista: comprueba primero el alcance de la consulta y, si usas una copia local, su sincronización.

Si algo falla

Si un endpoint devuelve 403, comprueba los permisos concedidos, plan y tipo de token. Si un frame produce demasiado contexto, reduce la profundidad o limita los nodos según el README. Consulta el README de esta CLI para las opciones específicas de tu sistema y versión. No compartas credenciales en la salida de diagnóstico.

ver en .md ¿Prefieres el recurso entero?

Qué es

Figma CLI da acceso a la API REST de Figma y añade extracción de frames y análisis sobre datos sincronizados. Está orientada a agentes que necesitan inspeccionar un diseño antes de escribir código. Forma parte de Printing Press Library y tiene código y documentación propios dentro del catálogo.

Para qué te sirve

  • Cuando necesitas entregar a tu agente la estructura de un frame concreto.
  • Cuando quieres encontrar comentarios sin resolver entre varios archivos de diseño.

Cómo funciona

La sincronización copia archivos, componentes y comentarios a SQLite. La extracción reduce la estructura del frame según sus nodos y profundidad. Otras operaciones comparan tokens entre versiones o revisan comentarios pendientes.

Antes de empezar

Necesitas un token personal o acceso OAuth a Figma y permisos sobre los archivos consultados. Determinados endpoints dependen del plan y del tipo de autenticación. La instalación recomendada con Node y npx incorpora el binario y su skill para agentes; las alternativas están en el README de esta herramienta. La carpeta contiene una licencia Apache-2.0; GitHub no detecta una licencia global para el catálogo.

Límites y alternativas

El contexto extraído no garantiza una implementación visual idéntica. Los límites de API y los permisos restringen los datos accesibles. El editor de Figma sigue siendo la vía para revisar el resultado visual y editar el diseño.

Recursos