Creación de prototipos en Sketch 49: aprenda cómo funciona y qué puede hacer

Sketch 49 trae a casa una de las características más esperadas y deseadas: la capacidad de crear y compartir prototipos interactivos rápidos de forma nativa.

A lo largo de los años, la increíble comunidad de desarrolladores externos de Sketch ha convertido a Sketch en un juego de herramientas de diseño increíblemente extensible. Como resultado, podemos disfrutar de docenas de excelentes productos complementarios y complementos de prototipos como Protowire, Craft, Mirr, Principle, Framer, Flinto, Flow, Marvel, Atomic, Kite, Origami, CanvasFlip, Proto y ProtoPie, solo por nombrar un pocos.

"¿Traería prototipos a Sketch?" Fue quizás la pregunta más frecuente en los foros y durante las reuniones de diseño. Hoy, Sketch respondió a estas preguntas con un gran y audaz "Sí".
Los prototipos nativos finalmente están aquí.

Mantener las cosas simples ha sido un tema constante para Sketch y un diferenciador importante entre otras herramientas de diseño y Sketch. Vivimos en la era de la sobrecarga de información y eso viene con una creciente lista de expectativas y requisitos para diseñadores, desarrolladores y personas de productos. La evolución del diseño de interacción, la presión de enviar rápido y a prueba de fallas, así como el deseo de reutilizar componentes realmente está impulsando la idea de hacer más con menos o usar una herramienta para muchos propósitos importantes.

Hay herramientas dedicadas de creación de prototipos de interacción con capacidades de animación avanzadas, características de línea de tiempo y fotogramas clave y funciones de facilitación. ¡La creación de prototipos dentro de Sketch es simple pero impresionante! Todavía no encontrarás funciones de animación avanzadas. Esto es algo a tener en cuenta cuando explora esta primera versión.

Entonces, ¿qué se ve en la creación de prototipos dentro de Sketch?

Hay una guía útil para comenzar que puede encontrar en Sketch> File> New from Template> Prototyping Tutorial. Veremos brevemente esta guía y las características de creación de prototipos.

Nuevos iconos y atajos de prototipos

Cuando abre la última versión de Sketch, puede notar estos íconos.

Presione W para agregar un enlace a una capa o grupoPresione H para insertar una capa de punto de accesoControl + F ocultará / mostrará prototiposCommand + P abrirá Vista previa

De forma similar a las capas Symbol, las capas Link y Hotspot se designan con un icono de carpeta personalizada en la Lista de capas a la izquierda.

Mostrar botón con punto de acceso en la lista de capas

El inspector y animaciones

Al seleccionar una capa, se mostrará una nueva sección de creación de prototipos en el Inspector. Aquí podrá crear y eliminar objetivos táctiles. Además, podrá seleccionar entre algunas transiciones básicas de Artboard en este momento:

❇ Sin animación
← Animar mesa de trabajo desde la derecha
↑ Artboard animado desde arriba
→ Animar mesa de trabajo desde la izquierda
↓ Animar la mesa de trabajo desde abajo

Enlaces y puntos de acceso

Para crear un prototipo, necesitará la última versión de Sketch junto con varias Artboards en su documento. Luego puede conectar Capas o Símbolos (que es muy poderoso cuando considera Símbolos Anidados) a diferentes Mesas de Trabajo con Enlaces y Capas de Puntos de Acceso. Eche un vistazo al siguiente ejemplo en el que conectamos la miniatura del avance a la mesa de trabajo del jugador con la mesa de trabajo animada desde arriba.

Crear enlaces y zonas interactivasPresione H para insertar una capa de punto de acceso

Hotspot es un tipo de capa que le permite dibujar una forma, un objetivo táctil, sobre una parte de su diseño y vincularlo a una mesa de trabajo. Más importante aún, las capas de puntos de acceso pueden pertenecer a símbolos dentro de los cuales su destino puede ser anulado. Puede ver cómo se puede personalizar cada punto de acceso con anulaciones en el siguiente ejemplo. También puede convertir un enlace a un punto de acceso seleccionando la capa y haciendo clic en el icono Crear punto de acceso en el Inspector.

Capas de puntos de acceso dentro del símbolo

Avance

Cuando previsualiza su prototipo, también puede observar un pequeño icono de bandera. Este es un marcador de punto de inicio y le permite seleccionar la mesa de trabajo desde donde desea iniciar su prototipo. Es especialmente útil para documentos con muchas mesas de trabajo. Entonces, para establecer un Punto de inicio, primero debe obtener una Vista previa de la mesa de trabajo y hacer clic en el icono de la bandera.

Vista previa del prototipo

Long Views, también conocidas como Artboards de desplazamiento

Más que a menudo necesitamos mostrar contenido como noticias o detalles largos de transacciones. En este caso, simplemente podemos crear una mesa de trabajo más larga para mostrar una vista que se desplazará. Al obtener una vista previa de su prototipo, las mesas de trabajo más largas se desplazan automáticamente según la configuración predeterminada de la mesa de trabajo.

Vista de desplazamiento en Vista previa de croquis

Comentarios y colaboración sobre el prototipo

Prototipo en Sketch Cloud

Una vez que haya definido un Punto de inicio y haya limpiado su prototipo, puede compartirlo en Sketch Cloud. Con Sketch Cloud puede revisar y comentar rápidamente diseños y prototipos. Sus colegas y amigos podrán hacer esto con un enlace único.

Además, si está demostrando su prototipo a un público reducido, puede usar Sketch Mirror para obtener una vista previa de su prototipo en el dispositivo para el que fue diseñado. Sketch Mirror es una aplicación equivalente de iOS que le permite previsualizar sus diseños casi en tiempo real en un iPhone o iPad. Cuando inicies Mirror en iOS, verás una notificación de conexión en la esquina superior derecha o en la ventana de Sketch. Haz clic en eso para conectarte.

Sketch Mirror, una aplicación equivalente de iOS, para previsualizar diseños y prototipos a través de Wi-Fi y cable USB Lightning.

La versión 49 también trae Bibliotecas Compartidas en Sketch Cloud y mucho más. Mira todo lo nuevo en esta publicación de blog.

Design + Sketch y Sketch App Sources están dedicados a ofrecerte lo mejor de Sketch. Descubra más de 3000 recursos de diseñadores y desarrolladores de todo el mundo. Cuando cree su próximo diseño o prototipo de Sketch, considere compartirlo con la comunidad.