Instalación de plugins: Antes de los comandos de configuración o actualización, sigue las reglas de instalación de plugins cuando esta skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.
Primero, mantén esta skill actualizada — confirma con el usuario antes de ejecutar:
npx hyperframes skills update figma. Un no-op rápido cuando todo está actualizado; de lo contrario, actualiza esta skill junto con las skills del dominio central de las que depende antes de usarlas.
Figma → HyperFrames
Lleva el trabajo de Figma del usuario a una composición. Dividido por capacidad (especificación de diseño §2):
| Fase | Qué | Transporte | Superficie |
|---|---|---|---|
| 1 | Activos estáticos | REST | hyperframes figma asset |
| 2 | Tokens/estilos de marca | REST | hyperframes figma tokens |
| 3 | Componentes → HTML | REST | hyperframes figma component |
| 4 | Movimiento → GSAP | conector cuando esté disponible | usa su contexto de movimiento |
| 5 | Shaders | conector / exportación manual | úsalo o una exportación nativa |
REST se usa siempre que sea posible (utilizable a gran escala, sin cabeza). Un conector de Figma compatible es opcional para datos de movimiento y shaders; sin uno, pide una exportación nativa. Cada ruta congela los activos localmente para que los renders sigan siendo deterministas. Las reconstrucciones de storyboard combinan las exportaciones de activos de la Fase 1 (REST) con el ensamblaje de la línea de tiempo dirigido por el agente — no se necesita conector. Los activos congelados existentes, los registros de manifiesto y los enlaces no se ven afectados por los cambios de ruta — la división solo cambia qué credencial usa la siguiente importación.
Autenticación — dos credenciales, con alcance
Verificación previa — antes de la primera llamada CLI, comprueba que exista un token: variable de entorno del shell ([ -n "$FIGMA_TOKEN" ]) o el .env del proyecto (la CLI lo carga automáticamente — una entrada en .env cuenta como configurada). Si no hay ninguno, NO ejecutes el comando para obtener el error — guía al usuario a través de la configuración única primero, luego detente y espera:
- figma.com/settings → Seguridad → Tokens de acceso personal → Generar nuevo token.
- Alcances: solo lectura es todo lo que esta integración necesita (nunca escribe en Figma): Contenido del archivo: Solo lectura + Metadatos del archivo: Solo lectura. Añade Contenido de la biblioteca: Solo lectura si vas a ejecutar
tokensen un plan que no sea Enterprise — el fallback de estilos publicados accede a/v1/files/:key/styles, que da 403 sin este alcance (un alcance que el texto de configuración anterior omitía). Opcionalmente Variables: Solo lectura para variables de marca — solo Enterprise; sin él,tokensse degrada automáticamente a estilos publicados (esperado, no es un error — dímelo). Un 403 ahora nombra el alcance exacto que falta; los 429 se reintentan automáticamente (límite por minuto, respetaRetry-After). - Pide al usuario que establezca
FIGMA_TOKENen su perfil de shell o en el.envdel proyecto; nunca le pidas que pegue el token en la conversación.
Durante la incorporación, también establece las expectativas de una vez: cada importación aterriza como un archivo congelado local con procedencia registrada — los renders nunca llaman a Figma, volver a ejecutar un comando reimporta solo lo que cambió en Figma, y un token funciona para activos, tokens de marca y componentes en todos los archivos que la cuenta de Figma del usuario pueda ver.
- Fases 4–5 (movimiento/shaders): un conector de Figma compatible, con autorización separada del token. Si no está disponible o no está autenticado, pide al usuario que lo conecte o que proporcione una exportación nativa, luego detente.
- Di exactamente qué credencial necesita una fase que falla — nunca presentes la división como rota.
BAD_TOKEN(401) en medio del flujo → el token ha expirado/revocado; vuelve a emitirlo.FORBIDDEN(403) → el mensaje nombra el alcance exacto que falta (por ejemplo,library_content:readpara el fallback de estilos) — agrégalo, o el archivo no es visible para la cuenta.REQUIRES_ENTERPRISE(403 en variables) → no es un fallo: el fallback de estilos ya se ejecutó.RATE_LIMITED(429) → el cliente ya reintentó con backoff (esto se aplica a TODA lectura — activos, tokens, estilos, árboles de nodos, versiones — el reintento vive en la ruta de solicitud compartida; se respetaRetry-After, con un límite de 60s); si aún así aparece, espera un minuto o importa menos nodos por llamada.
Conciencia de límite de tasa (especificación §2.1): las cuotas del conector varían según el plan de Figma — agrupa las solicitudes de fotogramas principales, omite las capturas de pantalla de verificación a menos que se solicite, y almacena en caché las respuestas sin procesar para que la re-derivación nunca gaste una segunda llamada. REST es por minuto (10+/min, buckets por endpoint) — funciona bien a gran escala, retrocede en 429.
Enrutamiento
Analiza el enlace de Figma del usuario con parseFigmaRef (URL, fileKey:nodeId, fileKey solo). Luego según la intención:
- "usa esta capa / logotipo / imagen" → Activo (CLI)
- "toma mi marca / colores / tokens" → Tokens (CLI)
- "construye una escena desde este fotograma" → Componente (CLI)
- "importa esta animación / movimiento" → Movimiento (conector cuando esté disponible, abajo)
- una sección de storyboard / tira de fotogramas de escena → Storyboard (abajo)
- relleno/efecto de shader → Shaders (abajo)
Narra cada paso para el usuario — antes de cada comando, di qué vas a extraer de Figma; después, di dónde aterrizó el artefacto (la ruta congelada / sidecar / directorio del componente), qué cambió en la composición y la siguiente acción inmediata (vista previa, añadir variables impresas, reimportar para vincular enlaces). El usuario nunca debería tener que preguntar "¿funcionó?" o "¿y ahora qué?".
Activos (Fase 1 — CLI)
hyperframes figma asset '<url-o-fileKey:nodeId>' [más referencias…] [--format svg|png|jpg|pdf] [--scale 2] [--description "..."] [--entity "..."]
Renderiza a través de REST, sanitiza SVG, congela bajo .media/images/, añade el manifiesto con procedencia, regenera .media/index.md (el inventario de uso de medios compartidos), imprime un fragmento <img>. Idempotente por fileKey:nodeId:format:scale:version. Prefiere SVG para vectores/logotipos (escalable, animable), PNG --scale 2 para fidelidad rasterizada. Pasa siempre --description "<qué es>" (se convierte en la fila del índice + <img alt>); añade --entity "<nombre>" para marcas con nombre para que el uso de medios resolve --entity las encuentre más tarde (las coincidencias de entidad funcionan en imagen/icono).
Agrupa muchos nodos en UNA solicitud — pasa varias referencias (separadas por espacio o por coma) del MISMO archivo: hyperframes figma asset 'KEY:1-2' 'KEY:3-4' 'KEY:5-6'. Todas se renderizan en una sola llamada /v1/images, que es la propia respuesta de Figma al límite de tasa por minuto — prefierela sobre N comandos separados al extraer todos los activos de un fotograma completo. --description/--entity se aplican a cada nodo del lote, así que agrupa nodos que compartan un propósito. Los 429 también se reintentan automáticamente con backoff.
Tokens (Fase 2 — CLI)
hyperframes figma tokens <fileKey>
Importa variables como entradas de variables de marca de la composición + sidecar figma-tokens.json + registros del índice de enlaces (.media/figma-bindings.jsonl). Las variables están restringidas a Enterprise aguas arriba: en otros planes, el comando se degrada a metadatos de estilo publicado (los valores se resuelven en el momento de la importación del componente). Añade las entradas impresas al data-composition-variables de la composición.
Importa los tokens antes que los componentes cuando se quieran ambos — eso permite que los colores de los componentes se vinculen a las variables de marca en lugar de duplicar valores.
Ruta de variables no Enterprise (probada en campo): Las variables REST están restringidas a Enterprise, pero un conector compatible puede proporcionar definiciones de variables. Cuando tokens informe REQUIRES_ENTERPRISE y el conector esté disponible, recupera las variables de la escena principal una vez, almacena en caché la respuesta sin procesar en .media/figma-cache/, y úsala para construir el índice de enlaces. El boundVariables del árbol de nodos REST proporciona VariableID por propiedad; únelos por nodo y propiedad, luego escribe filas de .media/figma-bindings.jsonl ({kind:"binding", figmaId, sourceFileKey, compositionVariableId: "figma:<nombre>", version}) más las entradas de variables de composición. Todo lo que sigue (resolución de var() en componentes, actualización, variables CSS en tiempo de ejecución) es la maquinaria ya enviada. Etiquétalo para el usuario: "tokens a través del conector de Figma — los planes Enterprise obtienen esto directamente de hyperframes figma tokens".
El tiempo de ejecución define cada variable de composición declarada como una propiedad personalizada CSS (raíz del documento + hosts de subcomposición), por lo que var(--slug, literal) importada llena el recolor cuando el valor predeterminado de la variable cambia — actualizar un valor en data-composition-variables renombra cada componente importado sin reimportar nada. hyperframes render --variables '<json>' las anula en tiempo de render.
Componentes (Fase 3 — CLI)
hyperframes figma component '<url-o-fileKey:nodeId>'
Árbol de nodos → HTML editable en la geometría exacta de Figma, empaquetado como un elemento de registro bajo compositions/components/<nombre>/. Los vectores/operaciones booleanas se rasterizan automáticamente mediante la exportación de la Fase 1. Pase de enlace (especificación §7.1, solo ID exacto — nunca coincidencia de valor):
- Autocomprobación de fidelidad estática (obligatoria para contenido principal): después de importar, renderiza el fragmento y compáralo con los píxeles propios de Figma —
figma asset <mismo nodo> --format pnges la verdad fundamental. El texto es el eje de desviación conocido: un cuadro de texto de Figma más corto que su altura de línea tiene límites recortados verticalmente (el mapeador emitetext-box-trimpara estos; la desviación medida sin él era de ~6px en una fuente de 70px). Si la comparación muestra una desviación que el mapeador no cubre, repórtala — no ajustes manualmente el fragmento en silencio. - Relleno vinculado a un token importado →
var(--slug, #literal)— la actualización de marca se propaga. - Vinculado a un token desconocido → literal + bandera
data-figma-unresolved. El comando te lo dice; ofrece al usuario: ejecutatokensen el archivo de origen (o biblioteca), luego reimporta el componente para vincularlos. Pregunta una vez por biblioteca desconocida qué archivo es — nunca adivines, nunca coincidas por hexadecimal.
Movimiento (Fase 4 — asistido por conector)
Baliza de uso: Las fases asistidas por conector no tienen punto de contacto CLI, así que dispara la baliza de skill al inicio y al final (anónimo, con consentimiento, nunca falla): npx hyperframes events --skill=figma-motion cuando comiences, npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error cuando termines. Lo mismo para shaders (figma-shaders) y storyboards (figma-storyboard).
No existe equivalente REST. Cuando haya un conector compatible disponible, úsalo y entrega su salida a los ayudantes puros en @hyperframes/core/figma; de lo contrario, pide una exportación nativa:
- Recupera el contexto de movimiento del fotograma principal en una sola solicitud recursiva, no una solicitud por elemento. Guarda el JSON sin procesar junto al proyecto (
.media/figma-cache/) para que la retraducción sea gratuita. - Normaliza en
MotionDocs conmotionContextToDocs(rawResponse, { selectorFor, repeat })de@hyperframes/core/figma— nunca transcribas números de fotogramas clave manualmente. El ayudante codifica las reglas de decodificación probadas en campo mecánicamente: analiza los fragmentos de motion.dev (la codificación confiable — los fragmentos CSS estiran las duraciones y pueden discrepar; se ignoran), elimina los fotogramas clave finales de bucle wrap (segmentos de submilisegundo en tiempos ≈0.9999→1 son el reinicio instantáneo del bucle, no movimiento creado — el wrap se realiza mediante el reinicio derepeat), y preserva los eases bezier textualmente.selectorFordebe devolver los ids de la importación del componente de la Fase 3 — no derives selectores de nombres de nodo. 2b. Valida contra la verdad fundamental antes de darlo por terminado — obligatorio: exporta el fotograma raíz del cohorte a través del conector disponible y ejecutanode <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y— compara deltas de energía de movimiento (la fidelidad de importación estática se cancela) y falla por debajo de 15dB de PSNR de movimiento mínimo (calibrado: fiel ≈ 20+, divergente ≈ 5). Mide--cropdesde los bordes reales de la tarjeta del render, no adivines. FALLO significa volver a revisar la traducción, no el umbral. motionToGsap(doc)→emitTimelineScript(spec)→ inyecta como un<script>después de las etiquetas CDN de GSAP + CustomEase. Pausado, finito, registrado enwindow.__timelinescon una clave literal.- Pista intraducible (impulsada por shader, propiedad no soportada, máscaras complejas) → exporta a través del conector, congela el MP4, luego incrusta como
<video class="clip">. Excepción: pistas impulsadas por shader — la ruta de exportación de Figma aplana los shaders al color base (ver Shaders abajo), por lo que un horneado allí pierde silenciosamente el shader; pide al usuario una exportación nativa de Figma en su lugar. Siempre di qué ruta usaste y por qué. Los eases con nombre fuera del conjunto mapeado retroceden a lineal — la tabla de mapeo vive enmotionEase.ts; señala el retroceso al usuario cuando ocurra. - Ejecuta
npx hyperframes checkantes de darlo por terminado.
Shaders (Fase 5 — principalmente manual)
La ruta de render del conector de Figma no ejecuta shaders (se aplanan al color base), y el código fuente del shader solo es accesible para estilos publicados en biblioteca (plan Full de pago). Ruta predeterminada: pide al usuario que exporte el fotograma del shader de forma nativa en Figma (PNG o MP4 de movimiento), luego impórtalo como un activo de la Fase 1 / clip. No intentes la captura de píxeles del conector de un shader — producirá silenciosamente algo incorrecto.
Storyboards (una SECCIÓN de fotogramas de escena → animación)
La regla cardinal: los fotogramas del storyboard son FOTOGRAMAS CLAVE, no diapositivas. Dos fotogramas que contienen el mismo elemento describen el estado de ese elemento a través del tiempo — anima el ELEMENTO entre los estados; nunca reproduzcas los fotogramas como una secuencia de imágenes fijas. Un logotipo dibujado en cuatro fotogramas consecutivos con una y descendente es UN elemento que se eleva a través de cuatro fotogramas clave. Reproducir fotogramas de storyboard uno tras otro es el modo de fallo; reconstruir las líneas de tiempo de los elementos que implican es el trabajo.
Los archivos de storyboard siguen una gramática que puedes analizar mecánicamente — no mires a ojo, decodifica:
- Unidades de escena: dentro de la SECCIÓN, cada nodo del tamaño de un fotograma es una escena — tanto los FRAME con nombre como los RECTÁNGULO sueltos a pantalla completa (los diseñadores pegan imágenes fijas directamente en la sección). Filtra por tamaño (≈ relación de aspecto de la composición, por ejemplo >1400×900), no por tipo de nodo o nombre.
- Orden = posición x (orden de filas si la tira se envuelve). Ordena las escenas por
absoluteBoundingBox.x. - Diferencia de adyacentes: compara los elementos hermanos de la escena A con los de la escena B (por ID de nodo). Los elementos que aparecen solo en B son nuevos (animación de entrada); los que aparecen solo en A se han ido (animación de salida). Los elementos en ambas escenas con la misma propiedad han cambiado de valor → fotograma clave de esa propiedad. Los elementos en ambas con todas las propiedades iguales son estáticos (sin fotograma clave para esa escena; se heredan).4. Ensamblaje de la línea de tiempo: comienza con la primera escena como el estado inicial. Para cada transición de escena (A→B), emite un fotograma clave de GSAP para cada propiedad cambiada en los elementos compartidos, más animaciones de entrada para los elementos de B y animaciones de salida para los elementos de A. La duración de la transición es la configuración de "tiempo por escena" de la composición (por defecto 2 s; pregúntale al usuario si no está seguro). La función de temporización de la transición es
power2.outa menos que el storyboard especifique lo contrario cerca de la sección (por ejemplo, "ease-in-out 0.5" →power1.inOutcon la mitad de duración).
Resumen de comandos de la Skill
| Comando | Fase | Qué hace |
|---|---|---|
hyperframes figma asset | 1 | Renderiza activos estáticos (SVG, PNG, JPG, PDF) desde referencias de Figma y los congela localmente |
hyperframes figma tokens | 2 | Importa variables de marca y tokens de estilo como variables de composición |
hyperframes figma component | 3 | Convierte nodos de Figma en componentes HTML editables |
hyperframes events --skill=figma-motion | 4 | Dispara baliza de skill para fases asistidas por conector (movimiento) |
hyperframes events --skill=figma-shaders | 5 | Dispara baliza de skill para fases asistidas por conector (shaders) |
hyperframes events --skill=figma-storyboard | Storyboard | Dispara baliza de skill para fase de storyboard |