Sketch + InVision: prototipos con hover automático

Convierte un diseño estático en una experiencia interactiva. Con Sketch e InVision lograrás sincronización automática, hotspots precisos y overlays para estados de hover en una app de música para escritorio, sin exportaciones manuales y con colaboración en tiempo real. Ideal para mostrar intención de interacción a clientes, diseñadores y desarrolladores.

¿Qué lograrás con Sketch e InVision en este flujo?

Dominarás un flujo veloz: InVision Sync sube tu archivo de Sketch, detecta artboards y exporta pantallas en PNG con transparencia automáticamente. Cada cambio en el diseño se refleja casi al instante en el prototipo, permitiendo feedback continuo sin tareas repetitivas.

Además, practicarás habilidades esenciales: manejo de capas y objetos, uso de artboards, creación de íconos (Mac y Android, recapitulado), diseño de una interfaz de música, y prototipado de hover con transición screen as overlay y efecto fade in. Aprenderás trucos como paste here para pegar con precisión y gradientes de negro a negro con 0 % de opacidad para proteger el contraste sin “lavados” indeseados.

¿Qué beneficios clave ganarás?

• Menos fricción al no exportar manualmente pantallas.
• Sincronización constante en segundo plano.
• Estados interactivos claros con hotspots y overlays.
• Colaboración y comentarios en una URL pública.
• Ahorro de tiempo en ciclos de revisión.

¿Cómo sincronizar Sketch con InVision Sync paso a paso?

Primero, crea una cuenta gratuita en InVision y descarga InVision Sync. La app corre en el fondo y crea una carpeta InVision con tu usuario, donde vivirán tus proyectos.

¿Cómo crear el proyecto Desktop Web?

• Crea un proyecto llamado Music App Platzi.
• Selecciona el tipo: Desktop Web.
• Verás el tablero vacío listo para recibir pantallas.

¿Qué estructura de archivos crea InVision Sync?

• Carpeta del proyecto con subcarpetas: Assets y Screens.
• Dentro de Assets: fonts, images y source files.
• Copia tu archivo .sketch a source files.
• Observa cómo InVision Sync sube el archivo, detecta artboards y exporta automáticamente.

¿Cómo validar la sincronización en tiempo real?

• Cambia una imagen en Sketch.
• Espera unos segundos: el prototipo se actualiza sin guardar manualmente (Sketch guarda en automático).
• Comprueba que las pantallas aparecen y cambian en el dashboard del proyecto.

¿Cómo prototipar un hover con hotspots y overlay?

Crearás un estado hover del álbum que muestra controles al pasar el mouse.

¿Cómo preparar los controles y el gradiente en Sketch?

• Copia los elementos de control desde “Music app album controls”.
• Usa el truco paste here para pegarlos donde apunta el cursor.
• Crea un rectángulo protector: sin borde y relleno con gradiente de negro a negro, dejando uno de los extremos a 0 % de opacidad. Evita así un brillo blanco no deseado.
• Duplica el artboard arrastrando su nombre y manteniendo presionada la tecla Option.
• En el artboard base, elimina los controles para que sea el estado “sin interacción”.
• Agrupa, corta y pega los controles en el artboard duplicado: las posiciones se conservan al pegar, asegurando una transición limpia.
• Renombra el artboard duplicado a Hover.

¿Cómo configurar build mode, hotspots y screen as overlay?

• En InVision, ve a la pantalla base y activa build mode (tecla B).
• Crea un hotspot sobre el álbum.
• Elige la acción: screen as overlay y selecciona el artboard Hover.
• Configura opciones clave:
  • Trigger: hover (no clic) para mostrar el overlay al pasar el mouse.
  • Efecto: fade in para una entrada suave.
  • Cierre: activar “cerrar al dar clic fuera del overlay”.
  • Posición: ajusta fixed position of overlay según tu caso. Si ves desplazamientos raros por zoom o resolución, alterna esta opción hasta fijar la posición correcta.
• Abre preview mode y prueba el estado hover: al pasar el mouse, aparecen los controles sobre el álbum.

¿Cómo compartir y colaborar?

• Pulsa Share en la esquina inferior derecha.
• Copia la URL pública y compártela con equipo o clientes.
• Recibe comentarios mientras sigues iterando en Sketch: los cambios se reflejan en el prototipo de inmediato.

¿Probaste tu hover de álbum con screen as overlay? Comparte tu enlace público y cuéntanos qué ajustes de posición y efectos te funcionaron mejor.