figma-use

Descripción general de la skill figma-use

Para qué sirve figma-use

figma-use es la skill obligatoria para llamar a use_figma de forma segura y correcta en flujos de trabajo de la Figma Plugin API. Está pensada para agentes que necesitan escribir, actualizar, inspeccionar o estructurar archivos de Figma con JavaScript en lugar de hacerlo manualmente. Si tu tarea incluye editar nodos, vincular variables, ajustar auto layout, crear componentes o leer programáticamente la estructura de un archivo, esta skill es el punto de entrada adecuado.

Quién debería instalarla

Instala la skill figma-use si necesitas operaciones fiables con archivos de Figma en ejecuciones de agentes, especialmente para trabajos de Design Implementation en los que una guía solo con prompts resulta demasiado vaga. Es más útil cuando el resultado depende del contexto del archivo, de componentes existentes o de restricciones específicas de Figma que los prompts de programación genéricos suelen pasar por alto.

Por qué importa en la práctica

El valor principal de figma-use no es solo el acceso a la API; es la protección que aporta sobre cuándo llamar a use_figma y qué contexto cargar primero. Eso reduce llamadas fallidas, requisitos previos omitidos e iteraciones desperdiciadas. Resulta especialmente útil cuando necesitas una ejecución predecible sobre archivos reales de Figma, donde el orden de las operaciones y el estado del archivo pueden cambiar el resultado.

Cómo usar la skill figma-use

Instálala y cárgala primero

Usa la ruta de instalación que te proporcione tu gestor de skills y asegúrate de que el agente cargue figma-use antes de cualquier llamada a la herramienta use_figma. La regla del propio repositorio es explícita: pasa skillNames: "figma-use" al invocar use_figma. Si la tarea es una página completa o una pantalla de varias secciones, carga también figma-generate-design para combinar las reglas de la API con el flujo de trabajo de construcción de pantallas.

Empieza por los archivos correctos

Para usar figma-use, lee primero references/plugin-api-standalone.index.md para entender la superficie de la API y después consulta references/common-patterns.md, references/gotchas.md y references/validation-and-recovery.md antes de escribir código. Si vas a trabajar con componentes, variables o estilos, pasa después a la documentación del patrón correspondiente en lugar de recorrer el repositorio entero.

Convierte una petición vaga en un prompt utilizable

Una buena entrada para figma-use debe nombrar el área del archivo objetivo, los tipos de objeto y el cambio esperado. Por ejemplo: “En el frame seleccionado, crea un layout horizontal de 3 tarjetas usando componentes locales existentes, mantén el espaciado coherente con la página actual y devuelve los IDs de los nodos creados.” Eso es mejor que “hazlo más bonito”, porque la skill necesita una estructura accionable, no una dirección subjetiva.

Flujo de trabajo que mejora la calidad del resultado

Un buen flujo de trabajo con figma-use es: inspeccionar el archivo o los nodos seleccionados, confirmar los componentes y estilos disponibles, hacer el cambio más pequeño y seguro, y luego validar el resultado. Para Design Implementation, prioriza el ensamblaje incremental frente a la generación en un solo paso. Lee agents/openai.yaml para el contexto de la herramienta y usa la carpeta references como fuente de verdad sobre el comportamiento de la API y los casos de fallo más comunes.

Preguntas frecuentes sobre la skill figma-use

¿figma-use es solo para escribir código?

No. La skill figma-use sirve para cualquier operación de Figma que requiera la Plugin API en JavaScript, incluidas lecturas únicas como la inspección programática de archivos o el descubrimiento de estructura. Si la tarea depende del estado real del documento, entra en esta categoría.

¿Cuándo no debería usarla?

No uses figma-use para consejos estáticos simples, críticas de diseño generales o tareas que puedan resolverse sin tocar el archivo. Si en realidad no vas a llamar a use_figma, la skill aporta poco valor y puede ralentizar el flujo de trabajo.

¿Es apta para principiantes?

Sí, si sigues el orden del repositorio y mantienes las solicitudes específicas. A los principiantes normalmente les cuesta cuando piden un diseño final sin indicar el frame de destino, las decisiones sobre componentes existentes o las restricciones. La skill se usa mejor cuando partes del estado actual del archivo y de un objetivo concreto y acotado.

¿En qué se diferencia de un prompt normal?

Un prompt normal puede describir la intención; figma-use ayuda a ejecutar esa intención según las reglas reales de la API de Figma. Eso importa en Design Implementation porque muchas acciones de Figma dependen de los tipos de nodo, del contexto de página o de los métodos admitidos por la Plugin API. La skill reduce la improvisación al anclar el flujo de trabajo en patrones y gotchas documentados.

Cómo mejorar la skill figma-use

Aporta mejor contexto del archivo

La mejora más importante viene de nombrar lo que ya existe: frame seleccionado, nombre de la página, biblioteca de componentes, colección de variables o conjunto de estilos locales. Si omites eso, el agente tiene que adivinar si debe crear nuevos activos o reutilizar los existentes. Para usar figma-use, el contexto suele importar más que la verbosidad.

Especifica estructura, no solo estética

Las peticiones como “hazlo más limpio” son débiles. Las mejores entradas se parecen a esto: “Convierte la sección de marketing seleccionada en un frame responsive de 12 columnas, reutiliza los estilos de texto locales y mantiene el CTA alineado con el componente de botón existente.” Esto ayuda a figma-use a elegir la ruta correcta de la API y evita resultados que se ven pulidos pero no encajan con el sistema del archivo.

Vigila los fallos más comunes

Los problemas más habituales son llamar a use_figma sin cargar la skill, saltarse el índice de referencia de la API e intentar hacer demasiado en una sola pasada. Otro error frecuente es no revisar los gotchas relacionados con la colocación de nodos, las propiedades de componentes o los modos de variables. Si el resultado no cuadra, revisa las referencias que coincidan con la operación fallida antes de volver a intentarlo.

Itera con correcciones concretas

Después del primer resultado, mejora indicando qué hay que conservar, qué hay que sustituir y qué no debe tocarse. Por ejemplo: “Mantén las instancias de componentes actuales, reduce el espaciado vertical en 8px y cambia solo el estilo del texto de la etiqueta secundaria.” Este tipo de corrección hace que figma-use rinda mejor en la segunda pasada que pedir un rediseño desde cero.