Device Morph Stage

Instalación#

Device Morph Stage se entrega como componente de Framer. Recibes una Component URL, no un archivo de código.

1. Completa tu compra. La pantalla de confirmación y el correo del recibo incluyen la Component URL.
2. Abre el proyecto de Framer donde quieras usarlo.
3. Pega la Component URL en el lienzo. Framer agrega Device Morph Stage al proyecto.
4. Coloca el componente en una página y continúa con los primeros pasos.

Conserva el recibo: es la forma de recuperar la Component URL si más adelante necesitas instalar el componente en otro proyecto.

Primeros pasos#

1. Agrega Device Morph Stage a tu página y asígnale un ancho y un alto visibles. Empieza con unos 960 × 680 px en escritorio y 390 × 460 px en móvil.
2. Abre Phone, Tablet y Desktop para elegir qué dispositivos tienen Enabled activado. Configura Initial Device.
3. Elige Image o Video para cada dispositivo habilitado y sube tu contenido.
4. Elige un Theme y ajusta Hardware.
5. En Motion, elige Spring, Smooth o None.
6. Abre Framer Preview para probar el selector, la navegación con teclado y los gestos de deslizamiento.

Contenido por dispositivo#

La demo actual usa Warm, comienza en Phone, habilita los tres dispositivos, coloca el selector en Bottom y utiliza Spring. Swipe está activado. Las pantallas del espacio de trabajo son contenido integrado de demostración, no capturas subidas que puedas editar. Usa los controles siguientes para reemplazarlas.

Cada dispositivo tiene ajustes de contenido independientes. Puedes combinar imágenes y videos entre dispositivos.

Si no hay contenido, el componente muestra una demo integrada de un espacio de trabajo. Borra la imagen o quita el archivo de video mientras Video está seleccionado para volver a la demo. Es una ilustración; sus textos y tarjetas no tienen controles de edición individuales.

Dispositivos#

Activa o desactiva Enabled dentro de cada grupo de dispositivo. Los dispositivos desactivados desaparecen del selector y de la secuencia de deslizamiento.

Initial Device establece la vista inicial. Si ese dispositivo está desactivado, el componente selecciona otro habilitado cercano. Si desactivas el dispositivo actual, también selecciona una alternativa válida. Si desactivas todos, se mantiene una demo de Phone como alternativa.

Con un solo dispositivo habilitado, la presentación permanece en él. En este modo, el selector se oculta de forma predeterminada.

Selector#

Configura Selector en Yes o No para mostrarlo u ocultarlo. Position lo coloca en Top o Bottom. Cambia el Label de cada dispositivo dentro de su grupo.

Hide if Single oculta el selector cuando solo hay un dispositivo habilitado. Desactívalo para conservar su botón. Las etiquetas largas se acortan visualmente para mantener la distribución; conviene usar etiquetas breves.

Gestos de deslizamiento#

Con Swipe activado, desliza hacia la izquierda sobre el dispositivo para avanzar al siguiente habilitado, o hacia la derecha para volver. La secuencia se detiene en los extremos y omite los dispositivos desactivados. También puedes arrastrar con el mouse.

Los gestos verticales siguen disponibles para desplazar la página. El deslizamiento no comienza sobre los botones del selector ni sobre los controles nativos de video. Con un solo dispositivo no hay otro al que cambiar.

Temas#

• Warm: fondo crema, marco oscuro y acento azul.
• Dark: escenario oscuro, marco en tono titanio y una demo oscura coordinada.
• Custom: muestra Custom Colors con Background, Frame, Text y Accent.

Los temas cambian el escenario y el marco; no modifican los colores de las capturas o videos que subas. Custom Background cambia el fondo; Frame, el marco del dispositivo; Text, la interfaz que lo rodea; y Accent, el botón seleccionado y los acentos de la demo. La demo integrada conserva su tipografía y superficies legibles, con el acento elegido.

Marco y detalles físicos#

El grupo Hardware del panel de Framer reúne los controles del marco del dispositivo.

Bezel cambia el grosor del marco. El componente lo adapta al dispositivo seleccionado y al espacio disponible.

Camera ofrece Auto, None, Pill y Notch. Auto elige el detalle de cámara adecuado para cada dispositivo. Pill y Notch afectan a Phone; Tablet y Desktop conservan un detalle de cámara pequeño acorde con su forma. None lo elimina.

Shadow y Reflection tienen un interruptor y un control Intensity cada uno. Los valores moderados suelen funcionar mejor con capturas de productos.

Animación#

El control Motion del panel de Framer define cómo cambia el componente entre dispositivos.

• Spring: transformación entre dispositivos con un movimiento físico moderado.
• Smooth: transición suavizada sin el efecto de resorte.
• None: cambio inmediato.

Las preferencias de movimiento reducido se respetan automáticamente: la geometría cambia de inmediato, con un breve fundido del contenido.

Video#

El grupo Playback aparece cuando un dispositivo habilitado usa Video. Sus ajustes se aplican a los videos de todos los dispositivos.

Los videos inactivos se pausan. También se pausan en Canvas y cuando el componente queda fuera de vista. Se reproducen dentro de la página en navegadores móviles compatibles. Los controles nativos y los códecs admitidos dependen del navegador.

Adaptación a distintos tamaños#

Phone, Tablet y Desktop se adaptan automáticamente al ancho y alto disponibles del componente. Los anchos pequeños utilizan un selector compacto y una presentación compacta de laptop para Desktop. Generalmente no necesitas versiones móviles separadas del componente.

Usa un ancho flexible y deja suficiente altura. Unos 460 px son un buen punto de partida en móvil; unos 680 px funcionan bien en diseños más amplios. Los contenedores muy bajos dejan menos espacio para el dispositivo. Las capturas se escalan o recortan según Fit; su interfaz interna no reorganiza el contenido.

Usos recomendados#

• Páginas de presentación de SaaS y aplicaciones
• Casos de estudio en portafolios
• Secciones de características
• Anuncios de productos multiplataforma

Buenas prácticas#

• Usa capturas con una jerarquía visual similar entre dispositivos.
• Mantén el contenido esencial cerca del centro y lejos del área de la cámara.
• Prepara el contenido con una forma cercana a la pantalla prevista: Phone vertical, Tablet horizontal y Desktop más ancho.
• Usa etiquetas breves en el selector y colores discretos en el marco.
• Evita un Bezel excesivo y archivos de video demasiado pesados.
• Prueba todos los dispositivos habilitados en los puntos de adaptación reales de tu página.

Accesibilidad#

El selector admite Tab, Shift+Tab, Enter, Space y las flechas izquierda/derecha, con un indicador de foco visible y estado de selección. Home y End seleccionan el primer y último dispositivo habilitados.

Agrega descripciones útiles del contenido, conserva un buen contraste y mantén el selector disponible cuando haga falta una alternativa de teclado al deslizamiento. Se respetan las preferencias de movimiento reducido. Los detalles decorativos del marco se excluyen de los anuncios de asistencia.

Solución de problemas#

El video no se reproduce automáticamente#

Comprueba que el dispositivo use Video, que hayas subido un archivo reproducible y que Autoplay esté activado. Mantén Muted activado y prueba en Preview. Canvas pausa los videos de forma intencional. Si el navegador bloquea la reproducción, usa el botón de reproducción o activa Controls.

El contenido aparece recortado#

Cover llena la pantalla y recorta los bordes que no coinciden. Elige Contain para mostrar la imagen o el video completos, o prepara contenido con una proporción más cercana a la pantalla.

El selector solo muestra uno o dos dispositivos#

Revisa Enabled en cada grupo. Los dispositivos desactivados se omiten. Si solo hay uno habilitado, desactiva Hide if Single para mostrar su botón.

Initial Device cambia automáticamente#

El dispositivo solicitado está desactivado. Habilítalo o selecciona otro en Initial Device.

Deslizar no cambia el dispositivo#

Activa Swipe y al menos dos dispositivos. Inicia el gesto horizontal sobre el área del dispositivo, lejos de los controles de video. Deslizar más allá del primer o último dispositivo no tiene efecto.

Los colores personalizados tienen poco contraste#

Elige un Text que contraste con Background. El botón seleccionado usa texto blanco, así que elige un Accent suficientemente oscuro. Warm y Dark son buenos puntos de partida.

Preguntas frecuentes#

¿Puedo usar contenido distinto en cada dispositivo?#

Sí. Cada dispositivo tiene ajustes independientes de imagen, video, descripción y Fit.

¿Puedo usar solo Phone y Desktop?#

Sí. Desactiva Tablet; el selector y el deslizamiento lo omitirán.

¿Puedo ocultar el selector?#

Sí. Configura Selector en No. Considera la accesibilidad si los visitantes todavía necesitan cambiar entre dispositivos.

¿Puedo usar video?#

Sí, incluso un video distinto por dispositivo. La reproducción comienza sin sonido de forma predeterminada.

¿Funciona en móvil?#

Sí. Se adapta a contenedores estrechos y admite deslizamiento. Prueba tu contenido en los anchos que utiliza tu página.

¿Puedo desactivar las animaciones?#

Sí. Elige Motion: None. Las preferencias de movimiento reducido también simplifican la animación automáticamente.

¿Puedo personalizar el marco del dispositivo?#

Sí: color del marco, Bezel, Camera, Shadow y Reflection. Las tres formas de dispositivo y sus orientaciones están predefinidas.

¿Requiere bibliotecas externas o archivos adicionales?#

No necesitas instalar nada adicional en Framer. El componente está contenido en un solo archivo de código y usa el entorno compatible de Framer.

Limitaciones#

• Dispositivos predefinidos. Phone tiene geometría vertical; Tablet es horizontal; Desktop se presenta como una laptop. No hay un editor libre de dispositivos ni un control de orientación.
• Demo ilustrativa. El espacio de trabajo integrado es una referencia visual. Sus tarjetas y textos no tienen controles de edición individuales.
• Contenido multimedia, no un sitio en vivo. Las capturas y videos se escalan o recortan; su interfaz interna no reorganiza el contenido. Los detalles de cámara pueden cubrir contenido cerca del borde superior.
• Contraste personalizado. Tu paleta determina el contraste. El botón seleccionado usa texto blanco, así que elige un Accent suficientemente oscuro.
• Deslizamiento limitado. La secuencia se detiene en el primer y último dispositivo habilitados. Ocultar el selector también elimina los controles de selección de dispositivo con teclado.
• Video en el navegador. La reproducción automática con sonido, los códecs y los controles nativos dependen del navegador. Los videos se pausan en Canvas, cuando están inactivos o cuando quedan fuera de vista.
• Altura del contenedor. Deja suficiente altura para la presentación. Los contenedores muy bajos reducen el espacio disponible.
• Etiquetas de accesibilidad en inglés. El campo Description de cada dispositivo puedes escribirlo en el idioma que quieras, pero las etiquetas de accesibilidad propias del componente —el selector de dispositivo y la descripción de la demo integrada— están en inglés y no se pueden editar en la v1.

Versión#

Esta guía cubre Device Morph Stage v1.0. Consulta el registro de cambios de este componente para ver sus versiones, o visita soporte si necesitas ayuda.

Registro de cambios#

v1.0#

Versión inicial de Device Morph Stage.

• Phone, Tablet y Desktop dentro de un único marco de dispositivo que se transforma.
• Distribuciones adaptables, con una presentación compacta de Desktop en móvil.
• Ajustes independientes de imagen y video por dispositivo.
• Temas, personalización del marco y tres opciones de animación.
• Navegación con teclado, descripciones del contenido y compatibilidad con movimiento reducido.