Figma Use

figma-use es la skill que debes instalar antes de cada llamada a use_figma para que JavaScript se ejecute con seguridad en el contexto de un archivo de Figma. Sirve para trabajo de implementación de diseño, como crear y editar nodos, conectar variables y estilos, construir componentes y variantes, e inspeccionar la estructura del archivo de forma programática. El repositorio incluye guías de uso, casos problemáticos y patrones para reducir errores comunes de automatización en Figma.

figma-generate-design ayuda a convertir páginas codificadas, modales, drawers, sidebars, panels y otras vistas de varias secciones en Figma usando el sistema de diseño publicado. Localiza componentes, variables, estilos y assets de librería desde Code Connect y fuentes relacionadas, y luego arma la pantalla sección por sección para Design Implementation en lugar de redibujar todo manualmente. Usa la guía de figma-generate-design cuando necesites fidelidad al código y a los tokens.

figma-create-new-file crea un nuevo archivo en blanco de Figma o FigJam en borradores, con valores predeterminados para el tipo de editor y el nombre del archivo. Este skill figma-create-new-file ayuda en la implementación de diseño, el prototipado rápido y a empezar con un lienzo nuevo antes de usar use_figma. También resuelve planKey mediante whoami cuando es necesario.

figma-implement-design convierte pantallas de Figma en código listo para producción dentro de tu repositorio, con el objetivo de lograr una alta fidelidad visual en el layout, los estados, los tokens y el comportamiento responsive. Úsalo para implementar Figma en código, no para editar Figma, mapear code connect ni generar nuevos diseños. Incluye guía de instalación, notas de uso y reglas de alcance para flujos de trabajo de implementación de diseño.

figma-generate-library ayuda a convertir una base de código en una biblioteca de sistema de diseño en Figma con tokens, variables, componentes, theming y documentación. Usa la skill figma-generate-library cuando necesites un flujo de trabajo por fases para tareas de Design Systems, incluyendo instalación, configuración, descubrimiento, creación, validación y reconciliación con el código.

figma-generate-design ayuda a convertir una pantalla real, una página o un diseño de varias secciones en Figma, reutilizando el sistema de diseño publicado en lugar de formas genéricas. Es ideal para igualar páginas de producto o código con alta paridad, estructura editable y consistencia basada en tokens. Úsalo para actualizaciones de diseño UI de página completa, no para mockups aproximados.