Inicio de UXMagic
  • Funciones
  • Bibliotecas
  • Comunidad
  • Precios
  • Afiliados
  • Recursos
Inicio de UXMagic
Inicio de UXMagic

Bibliotecas

Comunidad
Precios
Afiliados

Recursos

Síguenos en:
  • Síguenos en Slack
  • Síguenos en Twitter
  • Síguenos en LinkedIn
  • Síguenos en YouTube
  • Síguenos en Instagram
Centro de ayuda
  • 🚀Primeros pasos
  • ✨Generar diseños
  • 🎨Diseñar y editar
    • Editar una pantalla
    • Editar con el chat
    • Temas y guías de estilo
    • Fuentes y tipografía
    • Imágenes en tus diseños
    • Versiones e historial
    • Variantes responsive y por dispositivo
    • Bibliotecas de componentes y sistemas de diseño
  • 📦Exportar y entregar
  • 🌐Publicar un sitio en producción
  • 🤝Compartir y colaborar
  • 🔌Integraciones y desarrollo
  • 💳Planes, créditos y facturación
  • 🛠Solución de problemas

¿Sigues atascado?

Nuestro equipo responde desde dentro del producto.

Contactar con soporte →
  1. Centro de ayuda/
  2. Diseñar y editar/
  3. Variantes responsive y por dispositivo

Variantes responsive y por dispositivo

Crea versiones móvil y escritorio de una pantalla y mantenlas sincronizadas.

Última actualización: 27 de agosto de 2026

En esta página

  • Crear una variante
  • Coste
  • Mantener las variantes sincronizadas
  • El tema es compartido
  • Código exportado

Crear una variante#

Pídela, o usa el control de dispositivo de la pantalla:

Haz una versión móvil de la landing page.

La variante es una pantalla nueva en el lienzo, adaptada al ancho de destino; no es un redimensionado fluido. Las maquetaciones se reorganizan de verdad: las secciones de varias columnas se apilan, la navegación se pliega, la tipografía baja de escala.

Coste#

Convertir una pantalla a otro tamaño de dispositivo se cobra por pantalla a la misma tarifa que una regeneración, porque lo es. Convertir ocho pantallas cuesta ocho veces eso: conviene revisar antes tu saldo.

Mantener las variantes sincronizadas#

Las variantes son pantallas separadas, así que una edición posterior en la versión de escritorio no pasa automáticamente a la de móvil. Dos opciones:

  • Pide el cambio en ambas de forma explícita: «En la landing page de escritorio y en la de móvil, cambia el CTA a “Empieza gratis”».
  • O termina primero el diseño de escritorio y genera las variantes de una vez al final. Suele ser el orden de operaciones más barato.

El tema es compartido#

Ambas variantes usan el tema del proyecto, así que los cambios de color y tipografía se aplican a las dos automáticamente. Solo la maquetación es propia de cada variante.

Código exportado#

El código exportado refleja la pantalla que has exportado. Si necesitas una única implementación realmente responsive en lugar de dos maquetaciones fijas, exporta la pantalla de escritorio y adáptala, o exporta ambas y fusiónalas en el breakpoint. Consulta Exportar código.

¿Te ha resultado útil este artículo?

Artículos relacionados

Editar una pantalla

Las tres formas de cambiar un diseño —chat, modo edición y temas— y cuándo cada una es la herramienta adecuada.

Temas y guías de estilo

Cómo funciona el tema del proyecto, cómo cambiarlo sin riesgo y por qué los colores no deben editarse pantalla por pantalla.

Exportar código (HTML, React, Tailwind)

Exporta una sola pantalla o un proyecto entero como código de front end listo para producción.

← AnteriorVersiones e historialSiguiente →Bibliotecas de componentes y sistemas de diseño

En esta página

  • Crear una variante
  • Coste
  • Mantener las variantes sincronizadas
  • El tema es compartido
  • Código exportado

tu próxima idea
merece existir

deja de darle vueltas. solo escríbela. Mal, a medias, como sea. Nosotros la convertiremos en algo real.

Producto

  • Comunidad
  • Planes de precios
  • Programa de afiliados
  • UXMagic MCP
  • Claude MCP
  • Información para IA

Recursos

  • Centro de ayuda
  • Biblioteca de Figma
  • Biblioteca de React
  • Plantillas de apps móviles
  • Documentación
  • Tutoriales

Funciones

  • De prompt a UI
  • De imagen a UI
  • De boceto a UI
  • Clonar sitio web
  • Importar desde Figma
  • AI Wireframe Generator
  • AI Mockup Generator
  • AI Prototype Generator
  • AI Dashboard Generator
  • Todas las funciones

Comparar

  • vs UX Pilot
  • vs Relume
  • vs MagicPath
  • vs Magic Patterns
  • vs Banani
  • vs Galileo AI
  • vs v0
  • vs Lovable
  • vs Base44
  • Todos los competidores

Blogs

  • IA en el flujo de trabajo de diseño UX: lo que realmente funciona
  • Plantillas de prompts para dashboards SaaS
  • Prompts reales que usamos para generar flujos de producto
  • Prompt engineering para diseñadores UX
  • Las mejores herramientas de wireframing en 2026: 10 opciones gratuitas y de pago comparadas
  • Todos los blogs

Empresa y soporte

  • Empleo
  • Contáctanos
  • Política de privacidad
  • Términos de uso
  • Configuración de cookies
  • Síguenos en Slack
  • Síguenos en Twitter
  • Síguenos en LinkedIn
  • Síguenos en YouTube
  • Síguenos en Instagram

© 2026 UXMagic AI Technologies Inc.