Figma AI solo funciona tan bien como las instrucciones que le des. Los prompts vagos producen diseños genéricos que tienes que reconstruir desde cero. Los prompts específicos — con tipo de pantalla, secciones, componentes, tamaño de marco y espaciado — producen rutinariamente resultados 70–85% listos para producción en una sola pasada. Estas 15 plantillas están estructuradas para el stack de AI de Figma 2026: el Design Agent, Figma Make, Skills, y las funciones gratuitas (auto layout, renombrar capas, reemplazar contenido) que no cuestan créditos.

Copia cualquier plantilla, cambia los marcadores entre corchetes por tu producto, y ejecútalo a través del Optimizador de Prompts gratuito si quieres restricciones más precisas. Para optimización de un clic dentro de ChatGPT, Claude y Gemini mientras redactas instrucciones de agente, TresPrompt añade estructura estilo ICCSSE a tu barra lateral.

Punto Clave

Todo prompt fuerte de Figma AI nombra cuatro cosas: qué pantalla estás construyendo, qué componentes publicados usar, el tamaño del marco y las reglas de espaciado. Añade restricciones negativas ("no uses marcos sin nombre", "nada de lorem ipsum") y el agente deja de adivinar. Skills codifica estos patrones para que no tengas que reescribirlos cada sesión.

Plantillas de Design Agent (Pantallas en Canvas)

1 Página de configuración móvil
Crear una página de configuración móvil (390×844) con: 1. Cuenta — avatar, nombre, email, botones de editar 2. Notificaciones — toggles para email, push, SMS 3. Apariencia — toggle modo oscuro, selector de tamaño de fuente 4. Seguridad — cambiar contraseña, toggle 2FA 5. Footer — botón destructivo de cerrar sesión, texto de versión de app Usar solo componentes publicados. Auto layout: 16px espaciado entre elementos, 32px entre secciones. Componente Section Header para etiquetas de grupo.
2 Dashboard general (escritorio)
Crear un dashboard de analíticas de escritorio (1440×900) con: - Nav superior: logo, búsqueda, menú de usuario - Barra lateral izquierda: 5 elementos de nav, estado activo en "Overview" - Principal: 4 tarjetas KPI en una fila, gráfico de líneas debajo, tabla de actividad reciente (5 filas) Usar variables del sistema de diseño para color y espaciado. Componente Card para KPIs. Componente Table para actividad. No usar etiquetas de datos de gráfico placeholder como "Series 1."
3 Flujo de onboarding (3 marcos)
Crear 3 pantallas de onboarding móvil (390×844), de izquierda a derecha: 1. Bienvenida — titular, subcopia, CTA primario "Empezar" 2. Permisos — lista notificaciones + ubicación con toggles 3. Éxito — área de ilustración con checkmark, CTA "Todo listo" Usar componentes Primary Button y Secondary Button. Indicador de progreso mostrando paso 1/3, 2/3, 3/3. Padding horizontal consistente de 24px en todos los marcos.
4 Estado vacío + estado de error
Crear dos marcos móviles (390×844): Marco A — Resultados de búsqueda vacíos: área de icono, titular "Sin resultados", copia de cuerpo, botón secundario "Limpiar filtros" Marco B — Error: icono de advertencia, "Algo salió mal", primario "Intentar de nuevo", terciario "Contactar soporte" Usar componentes publicados Empty State y Alert si están disponibles. Contenido centrado, ancho máximo 280px para bloque de texto.
5 Configuración accesible (agent + a11y)
Crear una página de configuración móvil (390×844) con requisitos de accesibilidad: - Elementos interactivos mínimo 44×44px targets táctiles - Contraste de texto mínimo 4.5:1 (usar colores de texto del sistema de diseño) - Jerarquía de encabezados H1 → H2, sin niveles saltados - Toggles incluyen etiquetas de texto visibles (no solo iconos) - Estados de error usan color Y texto (no solo color) Usar componentes publicados. Auto layout 16px / 32px espaciado.

📬 ¿Obteniendo valor de esto?

Una perspectiva accionable de AI por semana. Más un pack de prompts gratis cuando te suscribas.

Suscribirse gratis →

Plantillas de Figma Make (Prototipo / Código)

6 Landing de marketing (Make)
Construir un sitio de marketing de una sola página desde este marco de Figma: - Hero: titular, subtítulo, captura de email + CTA - 3 columnas de características con iconos - Fila de logos de prueba social - Footer con enlaces Coincidir espaciado y colores del marco seleccionado. Responsive móvil. Sin librerías externas a menos que se especifique en notas del marco.
7 Prototipo interactivo (Make)
Crear un prototipo clickeable desde marcos [listar nombres de marcos]: - Hacer clic en "Sign up" navega al marco de formulario de registro - Submit muestra estado de toast de éxito - "Back" regresa a la pantalla anterior Usar componentes del archivo. Preservar estados hover en botones primarios. No añadir nuevas pantallas que no estén en el archivo de diseño.

Plantillas de Skills (Instrucciones de Agente Reutilizables)

Guarda estas como archivos markdown de Skills para que el agente siga las convenciones del equipo cada vez.

8 Skill: /settings-page
Al crear pantallas de configuración: - Usar siempre patrón Section Header + lista agrupada - Incluir footer con versión de app (estilo caption) y cerrar sesión destructivo - Móvil por defecto 390×844 a menos que el usuario especifique escritorio - Usar componente Toggle para configuraciones booleanas, nunca checkboxes personalizados - Espaciado: 16px dentro de grupos, 32px entre grupos, 24px padding de pantalla
9 Skill: /data-table
Al crear tablas: - Usar componentes Table/Header y Table/Row - Incluir columna de icono de ordenar solo si el usuario lo pide - Altura de fila 48px mínimo para toque - Truncar texto largo con ellipsis, nunca envolver más de 2 líneas en celdas - Estado vacío debajo de tabla si hay cero filas

Funciones Gratuitas (Cero Créditos)

10 Reemplazar Contenido (lote)
Reemplazar todo lorem ipsum en el marco seleccionado con copia realista de [B2B SaaS / e-commerce / salud]. Nombres: diversos, plausibles. Direcciones: formato US. Nombres de producto: ficticios pero profesionales. Mantener conteos de caracteres similares a placeholders para que el layout no se rompa.
11 Renombrar capas (prep handoff)
Renombrar todas las capas en esta página usando patrón: [Sección]/[Componente]/[Estado] Ejemplo: Settings/NotificationRow/Default No renombrar marcos de fondo bloqueados. Saltar capas ocultas.

Prompts MCP + Handoff de Código (Claude Code / Cursor)

12 React desde marco de Figma
Leer el marco de Figma seleccionado via MCP. Generar un componente React usando [Tailwind / nuestra librería Shadcn]: - Coincidir espaciado y colores de tokens de diseño en el archivo - Usar HTML semántico (nav, main, section) - Incluir breakpoints responsive en 768px y 1024px - Exportar como SettingsPage.tsx con props tipados para datos de usuario No hardcodear valores hex — usar nombres de token de variables de Figma.

Plantillas de Exploración y Comparación

13 Tres direcciones de layout
Generar 3 enfoques de layout diferentes para [tipo de pantalla] en escritorio 1440×900: A — navegación sidebar B — navegación tabs superior C — hub basado en tarjetas Mismo contenido en los tres. Usar componentes publicados. Colocar marcos lado a lado con gap de 80px. Etiquetar cada marco "Dirección A/B/C" en texto caption pequeño.
14 Prompt de auditoría de sistema de diseño
Revisar la página seleccionada y listar: - Componentes que no son de la librería publicada (marcar como "detached") - Colores que no usan variables - Texto que no usa estilos de texto - Gaps de auto layout que no son 4/8/16/24/32 Salida como checklist en notas del marco. No auto-arreglar — solo reportar.
15 Pasada de refinamiento (segundo prompt)
En el marco generado, aplicar solo estas correcciones: 1. Aumentar espaciado vertical entre secciones a 32px 2. Cambiar botón primario a variante Button/Primary/Large 3. Añadir texto de ayuda bajo campo de email: "Nunca compartiremos tu email" 4. Alinear todos los iconos a 24×24 en filas de lista No reestructurar el layout. No añadir nuevas secciones.

Cómo Encadenar Plantillas

Flujo de trabajo de producción: Plantilla 13 (explorar) → elegir dirección → Plantilla 1 o 2 (pantalla completa) → Plantilla 15 (refinar) → Plantilla 11 (renombrar) → Plantilla 12 (MCP a código). Cada paso usa un prompt enfocado en lugar de una instrucción gigante que confunde al agente.

Para el ecosistema completo de Figma AI (Agent, Make, MCP, Skills, Sites), ve nuestra guía completa 2026. Para configuración paso a paso del agente, ve cómo usar el Design Agent. Para presupuesto de créditos, ve créditos de Figma AI explicados.

Preguntas Frecuentes

¿Funcionan estas en el plan gratuito de Figma?

Las plantillas 10–11 (Reemplazar Contenido, renombrar) funcionan en planes gratuitos. Design Agent y Make requieren planes pagos y acceso beta. MCP funciona con cualquier plan que pueda habilitar Dev Mode / MCP para tu asiento.

¿Debo pegar toda la plantilla o acortarla?

Comienza con la plantilla completa. Una vez que veas qué líneas ignora el agente, acorta. Los prompts más cortos funcionan solo después de que sepas qué restricciones necesita realmente tu sistema de diseño.

¿Puedo usar el mismo prompt para Make y el Design Agent?

No — Make espera lenguaje de construir/prototipo y consume créditos de manera diferente. Usa plantillas de Design Agent para capas de canvas y plantillas de Make para salida interactiva. Mezclarlas produce resultados confusos.

¿Cómo guardo prompts como Skills?

Copia las plantillas 8–9 en archivos markdown de Skill en la librería de Skills de tu equipo. Invoca con /nombre-skill en el panel del agente. Actualiza Skills cuando cambien los nombres de tus componentes — ve nuestra guía de Skills.

Divulgación: Algunos enlaces en este artículo son enlaces de afiliado. Solo recomendamos herramientas que hemos probado personalmente y usamos regularmente. Ve nuestra política de divulgación completa.