En los propios términos del Skill
Importa contenido de Figma en composiciones de HyperFrames a través de cinco fases: assets estáticos, tokens de marca, componentes como HTML, líneas de tiempo de movimiento y shaders. Usa la REST API siempre que es posible (assets, tokens, componentes) con un connector opcional para datos de movimiento y shaders. Cada importación congela los artifacts localmente con procedencia registrada, de modo que los renders nunca llaman a Figma y se mantienen deterministas.
La reconstrucción de storyboard trata los frames como keyframes que describen el estado de un elemento a lo largo del tiempo, no como diapositivas. Admite el enlace de token a componente, de modo que la actualización de una variable de marca vuelve a colorear cada componente importado. Es consciente de los límites de tasa (rate-limit) con reintento automático. Funciona en cualquier archivo de Figma al que el token configurado pueda acceder.
Qué produce
- Assets de imagen congelados en .media/images/ con procedencia en el manifiesto y fragmento img
- Entradas de tokens de marca, el sidecar figma-tokens.json y registros de binding-index en .media/figma-bindings.jsonl
- Paquetes de componentes HTML editables en compositions/components/<name>/
- Scripts de línea de tiempo de GSAP inyectados después de las etiquetas CDN, en pausa y finitos, registrados en window.__timelines
Cómo funciona
- 01Analizar la Referencia de Figma
Usa parseFigmaRef para extraer fileKey y nodeId de la URL del usuario, de la cadena fileKey:nodeId, o de un fileKey suelto.
- 02Enrutar por Intención a la Fase Correcta
Compara la solicitud del usuario con una de cinco fases: exportación de assets, importación de tokens, reconstrucción de componentes, líneas de tiempo de movimiento o manejo de shaders.
- 03Obtener vía REST o Connector
REST se usa para assets, tokens y componentes. El movimiento y los shaders requieren un connector compatible o una exportación manual.
- 04Congelar Artifacts Localmente con Procedencia
Cada importación escribe un archivo local, agrega el manifiesto con los metadatos de origen y regenera el inventario compartido de uso de medios.
- 05Reconstruir Movimiento y Storyboards a partir de Datos de Estado
Los frames de storyboard se convierten en líneas de tiempo de elementos mediante la comparación de frames adyacentes. El contexto de movimiento se normaliza en MotionDocs, y luego en scripts de GSAP.
- 06Verificar contra la Verdad de Referencia
Compara el render con la propia exportación de píxeles de Figma para la fidelidad estática. La reconstrucción de movimiento debe superar un mínimo de 15dB de motion-PSNR.