Sketch + InVision: prototipos con hover automático

Contenido del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0022:27

Sketch + InVision: prototipos con hover automático

Curso de Sketch 2015

Clase 9 de 19

Clase 9 / 19

Recursos

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.

Resumen

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

¿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.

Introducción a Sketch

Flujo de trabajo moderno con Sketch

Curso de Sketch para diseño web desde cero

Interface de Sketch: canvas infinito y artboards

Replicar el ícono de Tweetbot en Sketch

Crear íconos Material Design en Sketch

Diseñando para Web

Sketch con Illustrator: compatibilidad y plugins

Sketch, Prototipados y Optimización para Web

Preguntas antes de Clase

Sketch + InVision: prototipos con hover automático

Recursos gratuitos para acelerar diseño Sketch

Cómo crear tab bar iOS en Sketch e InVision

Símbolos en Sketch: cómo identificarlos y usarlos

[Extra] Creando prototipos con Marvel y Sketch

[Extra] Cómo pasar un archivo de Sketch a Zeplin

Presenta un proyecto de Sketch a tu Cliente

Sketch para interfaces: unidades, símbolos y exportación

Creación de portafolios responsivos en Sketch

Cómo hacer portafolios responsivos en Sketch

Proyecto: Sitio Responsive III

Crear grids para proyectos con mucho contenido

Sketch + InVision: prototipos con hover automático

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos