Advertisement
  1. Web Design
  2. Sketch

Guía de herramientas de prototipado en Sketch

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Itzel Alvarez (you can also view the original English article)

A principios de este año se lanzó Sketch 49, y junto con él, algunas características de prototipado muy esperadas. En el tutorial de hoy veremos todo lo que necesitas saber sobre prototipado en Sketch, desde atajos que debes saber, hasta obtener retroalimentación y poder colaborar con tu equipo en diseños y prototipos.

Nuevos iconos de prototipado

Junto con el lanzamiento de las características de prototipado llegaron cuatro nuevos iconos en la barra de herramientas de Sketch. Quizá el más importante es el de Hotspot, que al seleccionarlo te permite crear un hotspot interactivo en la mesa de trabajo. El siguiente es Enlace a una Mesa de trabajo (Link to an Artboard), que te permite crear enlaces y conectar un hotspot a una mesa de trabajo de destino u objetivo. El icono de Mostrar prototipo (Show Prototyping) te permite alternar el UI amarillo/naranja de un prototipado en Sketch. Esto sirve de mucho si estás diseñando y no quieres ver todos los enlaces y hotspots en la app. Por último tenemos el icono Previsualización (Preview), que activa una ventana de previsualización que puedes abrir para usar tu prototipo sin salir de Sketch. Revisaremos esto de manera mucho más detallada más adelante.

Atajos

Desde luego, Sketch implementó atajos de teclado para las nuevas características de prototipado. En lo personal, amo usar atajos, ¡espero que también te parezcan útiles!

  • Presiona H para insertar un Hotspot
  • Presiona W para añadir un enlace
  • Presiona Control + F para alternar ocultar/mostrar el UI amarillo/naranja de prototipado
  • Presiona Command + P para abrir la previsualización
  • También puedes copiar y pegar hotspots (con enlaces, si es que los tienen) entre mesas de trabajo, de la misma manera en que lo harías con cualquier otro elemento de diseño.

Hotspots, enlaces y la pestaña de Inspector

Para comprender mejor cómo trabajan los hotspots y los enlaces, echémosle un vistazo a sus propiedades en la Pestaña de Inspector (Inspector Tab). Si haces clic en cualquier elemento, notarás una pequeña pestaña para el Prototipado con un símbolo de más (+) a su derecha (exactamente lo mismo que con Relleno [Fill], Bordes [Borders] y Sombras [Shadows]). Si haces clic en +, el elemento se convertirá en un hotspot y de manera automática también te dejará añadir un enlace para ese hotspot. Si haces clic lejos del elemento, perderás el hotspot. Pero si añades un enlace, entonces tendrás acceso a las propiedades de prototipado para ese hotspot.

Las propiedades de prototipado son relativamente fáciles, ya que el prototipado en Sketch aún no se ha vuelto muy complicado ni extenso.

En primer lugar está el Objetivo (Target) desplegable. Aquí es donde van los enlaces de hotspot y donde te llevará el hotspot al tocarlo. Lo predeterminado es lo que ya seleccionaste, pero en este punto puedes:

  • cambiarlo a otra mesa de trabajo (se organizan por páginas)
  • eliminar el hotspot por completo al seleccionar Ninguno (None)
  • elegir la Mesa de Trabajo Anterior (Previous Artboard) esto significa que en el flujo del prototipo te llevará de vuelta a la mesa de trabajo de la que vienes. Esto es fantástico para los botones de "regresar" (back).

Lo último que debes saber sobre las propiedades en el Inspector es Animaciones (Animations). Esto determina la transición que sucede cuando se da clic en el hotspot. Aquí hay varias opciones:

  • Sin Animación
  • Animar mesa de trabajo desde la derecha
  • Animar mesa de trabajo desde la parte superior
  • Animar mesa de trabajo desde la izquierda
  • Animar mesa de trabajo desde la parte inferior

Trabajar con hotspots y símbolos

Los hotspots pueden ser creados de dos maneras. Puedes crear un rectángulo de manera manual en una mesa de trabajo, de la misma manera en que dibujarías manualmente un rectángulo o una capa de texto. Otra opción es que puedes seleccionar una capa o elemento específico. Cualquier elemento de diseño puedo convertirse en un hotspot, ¡incluso los símbolos!

Hotspot in sketch prototypingHotspot in sketch prototypingHotspot in sketch prototyping
Un hotspot en acción

Cuando se trata específicamente de símbolos, un hotspot puede ser colocado dentro de un símbolo, en lugar de usar una copia de símbolo como hotspot. Si tienes un hotspot dentro de un símbolo, se repetirá en cada copia de símbolo, pero puedes redefinirlo justo como con cualquier otra propiedad de símbolo, como cambiar una imagen, un icono o texto. También puedes redefinir un hotspot por completo al eliminarlo de un símbolo de forma efectiva. Esta es una manera de reutilizar símbolos por un largo tiempo sin preocuparte de hotspots innecesarios.

Iconos en la lista de capas

Un detalle genial que Sketch incluyó en el prototipado es un icono en la lista de Capas (Layers). Este es el mismo concepto que aplican con Símbolos (Symbols) y Partes Exportables (Exportable Slices). La presencia de un icono de hotspot en medio de las capas hace que la experiencia de prototipado sea un poco más comprensible.

Desplazar mesas de trabajo

Esta característica es muy útil, ¡en especial para páginas muy largas de diseños móviles! Sketch activa el desplazamiento de forma automática para mesas de trabajo más largas. En el ejemplo a continuación verás el visor de artículos para el UI de simulación que estoy usando para esta guía. No tienes que preocuparte por configurar nada para que las páginas se desplacen.

Establecer un "punto de partida"

Un Punto de Partida (Start Point) es la mesa de trabajo estándar en donde tu prototipo comienza. Por defecto no hay ninguna, lo que significa que si eliges previsualizar tu prototipo, se abrirá en la mesa de trabajo seleccionada al momento de la previsualización.

Definir un punto de partida es más útil cuando estás listo para compartirlo con alguien. Para seleccionar uno, navega hasta la mesa de trabajo de inicio y ábrela en Previsualización (Preview). En la parte superior de la ventana de previsualización, selecciona el pequeño icono de Bandera (Flag). A partir de ese momento, cada vez que previsualices el prototipo, comenzará desde esa mesa de trabajo de punto de inicio.

Deselecciona el icono de la bandera (que se vea gris otra vez), esto eliminará el punto de partida; sin embargo, puedes tener más de un punto de partida. ¡Seleccionar el icono de bandera en otra mesa de trabajo no deseleccionará otras!

"Es probable que quieras definir un punto de partida desde el inicio de un deslizamiento, pero también puedes definir múltiples puntos de partida —una característica que será muy útil cuando estés creando prototipos complejos que contienen muchas mesas de trabajo, o si solo quieres que otros vean una sección en particular de tu prototipo." — Sketch docs

Previsualizar y compartir tus prototipos

Actualmente puedes previsualizar tu prototipo en Sketch con la ayuda de la característica Previsualización (Preview). Ya hemos hablado de esto en una ocasión. Una ventana aparecerá sobre tu aplicación de Sketch, y puedes hacer clic alrededor para asegurarte de que todo está configurado de manera correcta.

Hay otra manera de previsualizar tu prototipo. Si estás trabajando específicamente en diseños para móviles, puedes usarlo en Sketch Mirror. En tu iPhone o iPad puedes conectar tu dispositivo a Sketch. Entonces puedes previsualizar el prototipo de manera más nativa y en el escenario adecuado. Los hotspots estarán ahí de forma automática, y puedes interactuar con ellos.

  • Sketch Mirror en 60 segundos

Exportar y colaborar

Compartir tus prototipos con otras personas no es fácil en Sketch Mirror ni en la ventana de previsualización. Si quieres enviarlos a tu equipo, o hacer una prueba rápida de funcionalidad, debes hacerlo mediante Sketch Cloud. Cualquier persona que tenga un enlace puede ver y usar un prototipo mediante Sketch Cloud. No puedes exportar un prototipo como lo harías con cualquier otro diseño o elemento desde la misma aplicación.

Subes el prototipo por defecto cuando subes el documento actual a Sketch Cloud. Solo se exporta con el documento.

Si tienes definido un punto de partida, el prototipo será colocado debajo de su propia sección de prototipo en documentos de Sketch Cloud. Este es el único paso extra que necesitas para asegurarte de que acceder a tu prototipo sea fácil a través de Sketch Cloud. Cuando hagas clic en tu prototipo, este comenzará en el punto de partida y será interactivo, ¡todo listo!

Comparte el enlace del prototipo para que quien lo tenga pueda acceder y usarlo.

Comments on Sketch Cloud prototypeComments on Sketch Cloud prototypeComments on Sketch Cloud prototype

Para ayudar en la colaboración, puedes pedir que las personas dejen comentarios sobre tu prototipo (si tienes activados los comentarios en Sketch Cloud). Podrán dejarte comentarios en mesas de trabajo individuales dentro del prototipo.

Plantilla de prototipado

Para obtener más ayuda, revisa la plantilla prediseñada de prototipado de Sketch.

La encuentras en Archivo > Nuevo desde Plantilla > Plantilla de Prototipado (File > New from Template > Prototyping Template) y tiene muchas notas que explican las características.

Conclusión

La nueva característica de prototipado en Sketch es básica (por ejemplo, solo tiene cuatro propiedades de animación). Sin embargo, debería hacer que el prototipado rápido sea más fácil. Ya no tienes que exportar tus diseños y luego importarlos a una herramienta externa como UXPin o incluso Marvel.

Creo que ayuda a mejorar el flujo de trabajo para diseñadores que no necesitan nada sofisticado o potente. Debería adaptarse sin problema alguno en sus flujos de trabajo, en especial si ya están usando Sketch Cloud. Si necesitas elaborar algo de manera rápida para mostrar el flujo del usuario de tus diseños, esto en definitiva servirá. También ayudará a tu equipo a realizar un flujo inicial o una prueba de funcionalidad. En este punto, no creo que sea tan revolucionario, pero en definitiva usaré el prototipado de Sketch para compartir diseños de UI con clientes en futuros proyectos.

¿Ya usaste la función de prototipado en Sketch? ¿Qué opinas de ella? ¿Cómo se adapta a tu flujo de trabajo? ¡Comparte con nosotros un enlace de un prototipo que exportaste a Sketch Cloud para que podamos verlo!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.