Las Habilidades de Figma son instrucciones basadas en markdown que guían cómo se comporta el Agente de Diseño de IA en tu contexto específico. Piensa en ellas como prompts personalizados reutilizables: las escribes una vez y codifican las convenciones de tu equipo, reglas de componentes y estándares de calidad para que el agente los siga automáticamente cada vez.
Cualquiera puede escribir una habilidad. No se requiere código. No desarrollo de plugins. No integración de API. Solo texto markdown que describe qué debe hacer el agente y cómo debe hacerlo. Las habilidades son la diferencia entre un agente que genera interfaz genérica y un agente que genera la interfaz de TU equipo.
Punto Clave
Las habilidades transforman el Agente de Diseño de una IA genérica en la IA de TU equipo. Sin habilidades, el agente usa convenciones predeterminadas y adivina tus preferencias. Con habilidades, sigue automáticamente tu sistema de espaciado, reglas de nomenclatura de componentes, requisitos de accesibilidad y directrices de marca. 30 minutos escribiendo 3-4 habilidades te ahorra horas de corrección durante semanas de uso del agente.
¿Qué Compone una Habilidad de Figma?
| Elemento de la Habilidad | Qué Hace | Ejemplo |
|---|---|---|
| Nombre (con /) | Cómo la invocas | /crear-pagina-configuracion |
| Propósito | Qué hace la habilidad (una oración) | "Generar una página de configuración siguiendo nuestras convenciones de equipo" |
| Pasos | Instrucciones ordenadas que sigue el agente | "1. Usar Encabezado de Sección para cada grupo..." |
| Convenciones | Reglas que el agente debe seguir | "Siempre usar cuadrícula de 8px, nunca usar posicionamiento absoluto" |
| Componentes | Qué componentes publicados usar | "Usar Toggle/Switch para configuraciones booleanas" |
| Variables | Qué tokens de diseño aplicar | "Usar color-surface-primary para fondos" |
| Qué No Hacer | Qué debe evitar el agente | "Nunca usar más de 3 niveles de encabezado por página" |
Figma se lanzó con 9 habilidades de ejemplo que cubren: construcción de bibliotecas de componentes, generación de nuevos diseños a partir de briefs, producción de especificaciones de accesibilidad, coordinación de flujos de trabajo multi-agente y sincronización de tokens de diseño con código. Explóralas en figma.com/community/skills. La habilidad fundamental, /use-figma, le da al agente una comprensión compartida de cómo funciona Figma estructuralmente. Los equipos personalizan desde ahí.
Escribiendo Tu Primera Habilidad (Con Ejemplo)
Comienza con tu tarea de diseño más repetida. Si creas diseños de formularios semanalmente, escribe una habilidad /diseño-formulario. Aquí tienes un ejemplo completo del mundo real:
Esta habilidad le dice al agente exactamente cómo tu equipo construye formularios. Sin ella, el agente usa las convenciones predeterminadas de Figma. Con ella, cada formulario que genera el agente sigue tus estándares específicos: consistente entre miembros del equipo, consistente entre proyectos.
📬 ¿Te está resultando útil esto?
Una idea práctica sobre IA por semana. Más un paquete gratuito de prompts al suscribirte.
Suscríbete gratis →Cómo se Comparan las Habilidades con Otras Instrucciones Personalizadas de IA
Las habilidades son conceptualmente similares a los sistemas de instrucciones personalizadas en otras herramientas de IA:
| Herramienta | Instrucciones Personalizadas | Creadas Por | ¿Compartidas? |
|---|---|---|---|
| Habilidades de Figma | Archivos markdown que guían al Agente de Diseño | Manualmente por el equipo | Sí (biblioteca de la Comunidad) |
| Instrucciones Personalizadas de ChatGPT | Texto que da forma a todas las respuestas de ChatGPT | Manualmente por el usuario | No (solo personal) |
| Claude Code CLAUDE.md | Instrucciones a nivel de proyecto para agente de codificación | Manualmente por el equipo | Sí (vía repositorio) |
| Habilidades de Hermes Agent | Patrones de tareas reutilizables generados automáticamente | Automáticamente del uso | Sí (biblioteca de habilidades) |
La distinción clave: Hermes Agent crea habilidades automáticamente a partir de tareas completadas, aprendiendo mientras trabajas. Figma requiere creación manual de habilidades: le enseñas explícitamente. El enfoque de Hermes escala con el uso; el enfoque de Figma te da más control pero requiere inversión inicial. Ambos producen mejor salida de IA que usar las herramientas sin instrucciones personalizadas.
El principio subyacente es el mismo en todos estos sistemas: la IA funciona mejor con contexto explícito sobre tus preferencias, convenciones y estándares. Ya sea que escribas una Habilidad de Figma, Instrucciones Personalizadas de ChatGPT o un archivo CLAUDE.md de Claude, el marco ICCSSE produce mejores instrucciones. El Optimizador de Prompts gratuito aplica esta estructura automáticamente: pega tu borrador de habilidad, obtén una versión más clara de vuelta.
4 Habilidades Esenciales que Todo Equipo de Diseño Necesita
1. /diseño-formulario — Estandariza el diseño de formularios en todo el equipo. (Ejemplo arriba.)
2. /diseño-pagina — Define las convenciones de estructura de tu página: ubicación del encabezado, ancho de la barra lateral, ancho máximo del contenido, estructura del pie de página, patrones de navegación, puntos de quiebre responsivos.
3. /variante-componente — Le dice al agente cómo crear nuevas variantes de componentes que coincidan con tu sistema existente: convenciones de nomenclatura, definiciones de estados (predeterminado, hover, activo, deshabilitado, error), escala de tamaños (sm, md, lg) y requisitos de documentación.
4. /verificacion-accesibilidad — Define tus estándares de accesibilidad: nivel WCAG (AA vs AAA), tamaños mínimos de objetivos táctiles, ratios de contraste, reglas de jerarquía de encabezados, etiquetas ARIA requeridas y formato de anotación para lectores de pantalla. Ve nuestra guía de especificaciones de accesibilidad para más detalles.
📬 ¿Quieres más contenido como este?
Una idea práctica sobre IA por semana. Más un paquete gratuito de prompts al suscribirte.
Suscríbete gratis →Preguntas Frecuentes
¿Cuántas habilidades debería crear?
Comienza con 3-4 que cubran tus tareas de diseño más comunes: una habilidad de formularios, una habilidad de diseño de página, una habilidad de variante de componentes y una habilidad de verificación de accesibilidad. Estas cubren el 80% del trabajo de diseño diario. Agrega más habilidades a medida que identifiques patrones repetidos que el agente maneja de manera inconsistente.
¿Pueden las habilidades llamar a otras habilidades?
Sí: las habilidades pueden referenciar otras habilidades, creando flujos de trabajo encadenados. Una habilidad /nueva-funcionalidad podría invocar /diseño-formulario para secciones de entrada, luego /verificacion-accesibilidad para revisión de cumplimiento. Esto permite flujos de trabajo complejos de múltiples pasos desde una sola invocación.
¿Las habilidades consumen créditos?
La habilidad en sí (las instrucciones markdown) no consume créditos. Las acciones del agente que la habilidad desencadena (generar diseños, editar componentes) consumen créditos a la tasa normal. Una habilidad bien escrita puede ahorrar créditos al producir mejor salida en el primer intento: menos iteraciones significa menos regeneraciones que consuman créditos.
¿Puedo compartir habilidades con la comunidad de Figma?
Sí: la biblioteca de habilidades de la comunidad de Figma te permite publicar y explorar habilidades. Esto significa que puedes usar habilidades escritas por otros equipos de diseño para patrones comunes (diseños de dashboard, flujos de onboarding, páginas de configuración) sin escribirlas desde cero.
¿Dónde se almacenan las habilidades?
Las habilidades están asociadas con tu organización de Figma o cuenta personal. Las habilidades a nivel de equipo son accesibles para todos los miembros del equipo; las habilidades personales solo son accesibles para ti. Almacena tus habilidades más importantes a nivel de equipo para que todos los diseñadores se beneficien de las mismas convenciones.
Divulgación: Algunos enlaces en este artículo son enlaces de afiliados. Solo recomendamos herramientas que hemos probado personalmente y usamos regularmente. Ve nuestra política de divulgación completa.