Craft Prototype: realizar prototipos dentro de Sketch

Diseños UI ágiles y optimizados con Craft Prototype

A principios del año pasado descubrimos Craft, un plugin de Invision para mejorar tu workflow dentro de Sketch y llevarlo a sus límites. El plugin es perfecto para diseños UI y te permite introducir contenido como fotos y textos desde webs, API’s o desde tus carpetas o bases de datos. También puedes duplicar los datos trabajados con el nuevo contenido personalizado fácilmente, compartir mapas conceptuales para trabajar colaborativamente e incluso sincronizar tus diseños con los prototipos con sólo un click. Una genial manera de optimizar el tiempo en el workflow de cualquier diseñador UI.

Al poco después de empezar a utilizarlo, apareció una noticia en Techcrunch donde se explicaba que Invision estaba creando una extensión de su plugin para prototipar directamente en Sketch, y que se iba a integrar en Craft. Automáticamente, desde Movetia nos pusimos manos a la obra para conseguir una invitación y formar parte de la beta. A las pocas semanas recibimos un correo con nuestros ansiados códigos de activación para ser los primeros en utilizarlo.

A principios de mes, Invision sacó una nueva actualización, finalmente con el sistema de prototipado incluido dentro de Sketch. Ahí van nuestras sensaciones y un breve resumen de Craft Prototype:

Sketch + Prototype = El combo definitivo

La combinación de los dos softwares hace que prototipar sea intuitivo y fácil para cualquier para diseñador UI, convirtiéndose así en uno de los mejores packs del mercado para conseguir testear flujos e ideas rápidamente con un comportamiento High Fidelity, tanto con diseños finales como con wireframes.

El hecho de no tener que salir de tu programa habitual de trabajo incrementa mucho la facilidad de realizar cambios que se vean reflejados en los entregables para cliente, manteniendo la misma versión en todos sitios de manera transparente y unificada; minimiza el trabajo repetitivo y las erratas de modificaciones no aplicadas, dejando de esta manera más tiempo para conceptualizar mejores soluciones y ejecutar diseños más únicos.

Estos son algunos puntos a destacar:

Intuitividad y velocidad
Su principal ventaja es la manera de crear vínculos entre las pantallas. Simplemente, con solo seleccionar una capa o grupo de capas y pulsar “C”, la interfaz cambia para que puedas enlazar el punto A con la pantalla B. A continuación, seleccionamos la acción a realizar por parte del usuario y la transición de movimiento, et voilá.

Mapa global (árbol de navegación)
Crearlo directamente donde tienes el flujo de tus pantallas, bien organizados con lógica, te permite ver cómo queda el flujo una vez tienes todos los enlaces creados. Además, te enlaza los elementos que accionan (Triggers) con su destino, lo cual es muy útil sobretodo en fases de conceptualización. Para alguien ajeno al proyecto, puede ser muy revelador.

Sincronización con el prototipo de la web
Una vez finalizas, puedes visualizarlo como un prototipo creado en la web con Invision. El mismo plugin tiene la opción de sincronizar los lienzos con el sistema, así que no podría ser más fácil que crear el prototipo (si todavía no lo tienes creado) y pulsar un botón para subir todas las pantallas. Puedes ver y compartir el proto en segundos, o seguir trabajándolo desde la web.

Craft Prototype: hemos echado de menos poder trabajar detalles

Sin embargo, no todo son maravillas en Craft Prototype. Hemos echado en falta algunas cosas, aunque nuestra primera impresión desde la versión Beta ha sido muy positiva. Aún así, casi todo lo que nos falta se puede solucionar desde la web: tan solo pulir detalles para conseguir un prototipo excelente.

Poca claridad en las transiciones
A la hora de seleccionar las transiciones, no queda claro que tipo de animación estás seleccionando. ¿Unos gifs en el selector?

Temporizadores
En algunos flujos de Craft Prototype, echamos de menos poder seleccionar un tiempo para cambiar entre pantallas automáticamente. No se puede enlazar artboards, así que en un futuro esperamos que tengan esta funcionalidad

Fixed footer/fixed Header
A pesar de estar en la Beta, no hemos visto incluida la funcionalidad de dejar elementos fijos en los extremos de la pantalla. Se puede hacer desde la web, pero nos hubiese gustado más.

Creación de hotspots cuando tienes símbolos
Tener un diseño organizado con símbolos dentro de Sketch genera una manera de trabajar más coherente gráficamente y unificada. Al trabajar así, hay un impedimento a la hora de seleccionar capas, dado que forman parte de un símbolo. Lo cual significa que tienes que crear nuevas capas transparentes que funcionen como Hotspots para realizar el prototipo, haciendo que el flujo de trabajo pierda su agilidad.

¿Qué pasa con otras páginas?
La naturaleza de algunos proyectos hace que se deba organizar por páginas. En este caso, el plugin no nos serviría para eso, pero siempre podemos realizar los enlaces.

Extra: modo “morrofino”

Labels Editables
Sabemos que es complicado, pero ya pudimos ver el funcionamiento en la Beta de la extensión. Y sabemos que es posible hacerlo. De hecho, deben seguir trabajando en ello para conseguir poder crear campos que se puedan editar y crear así prototipo de Super-High Fidelity.

Desde Movetia somos fans de Sketch y seguiremos intentando agilizar más nuestro proceso de trabajo y esperando nuevas actualizaciones de esta gran herramienta en concreto. Nos sumamos al cambio hacia el futuro del prototipado, utilizando las mejores herramientas que nos permitan ser más eficientes, más versátiles y más brillantes para seguir construyendo la confianza que tienen nuestros clientes en nosotros y seguir con nuestro espíritu de mejora constante.

Podéis echar un ojo al prototipo realizado con Craft Prototype.

¡Un saludo!

Iban Curdu
UI/UX Designer en Movetia

Originalmente publicado en movetia.com

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.