Usa Craft De InVision Para Una Colaboración De Equipo Aerodinamizada

View all articles

¿Alguna vez has estado en una reunión remota para discutir los cambios en un diseño cuando — a mitad de camino — te das cuenta de que varios miembros de tu equipo están trabajando desde viejas versiones obsoletas de tu guía de estilo? La tipografía del título es diferente, los botones son de color incorrecto y el diseño más reciente cambió el icono de la cesta de un carrito de la compra. La conversación se descarrila y, en lugar de discutir el nuevo flujo de inicio de sesión, estás quemando minutos preciosos tratando de guiar a la gente al archivo correcto: app_screens_final-Final-FINAL-noreally-v4.sketch.

No podemos seguir viviendo así.

No podemos seguir viviendo así.

Colaborar en un equipo — especialmente un equipo remoto — presenta desafíos únicos. Poner múltiples diseñadores, desarrolladores, administradores y partes interesadas en la misma página y buscar la misma versión de un archivo de boceto es una lucha. Y si deseas hacer cambios en uno de los estilos de tipografía en tus diseños, es un desastre para asegurarte de que todos se actualicen simultáneamente.

Craft de InVision LABS es un potente conjunto de complementos para Sketch y Photoshop que agilizan el flujo de trabajo y la colaboración con los equipos de diseño y desarrollo. Craft facilita la creación y mantenimiento de una biblioteca común de activos y estilos, anota y marca los diseños en tiempo real, carga instantáneamente en InVision y sincroniza las actualizaciones en la nube.

I. Instala Craft para Sketch y Sincroniza con la Nube

Empecemos por instalar Craft. Mientras que Craft es un potente conjunto de plugins disponibles tanto para Adobe Photoshop como para Sketch, nos centraremos en usarlo con Sketch en esta pieza. En primer lugar, comprueba que su versión de Sketch está actualizada e instalada en la carpeta de Aplicaciones del Finder. Luego, ve a https://www.invisionapp.com/craft para descargar el Craft Plugin Manager.

Craft es un conjunto de potentes complementos para optimizar el flujo de trabajo de tu equipo.

Craft es un conjunto de potentes complementos para optimizar el flujo de trabajo de tu equipo.

Abre el archivo y sigue las instrucciones para instalar Craft Plugin Manager. Una vez hecho, el icono de Craft aparecerá entre los iconos de inicio rápido en el encabezado del sistema operativo. Haz clic en él y elige instalar cada complemento para la plataforma Sketch. Craft comprobará que tu versión de Sketch está actualizada y ofrecerá la opción de reiniciar rápidamente el programa una vez que haya activado los complementos deseados.

Craft Manager aparecerá en el encabezado del sistema operativo.

Craft Manager aparecerá en el encabezado del sistema operativo.

Uno de los principales atractivos de Craft es que los equipos pueden sincronizar estilos y assets compartidos sobre plataformas de nube populares como Dropbox, Google Drive y Box, asegurando que todos estén trabajando con la misma biblioteca.

Tu y su equipo necesitarán tener cuentas en InVisionApp. Configura la sincronización iniciando sesión en el sitio de InVision, navegando hasta tu perfil de usuario y abriendo la ficha de sincronización. Allí puedes seleccionar la plataforma de nube preferida utilizada por tu equipo para compartir archivos. Sigue las instrucciones y concede permiso para que InVision se sincronice en la nube de tu equipo.

Captura de Pantalla

Ahora que has instalado y configurado Craft con tu nube compartida, puedes comenzar a establecer estilos compartidos para tu equipo.

Abre un documento en Sketch y revisa el nuevo panel Craft que ha aparecido junto al lado del panel inspector. Aquí encontrarás los complementos instalados que ha activado en Craft Manager: Sync, Library, Data, Duplicate, Freehand y Stock. Para el propósito de esta pieza sobre la colaboración de equipo, nos preocupamos principalmente con Sync, Library y Freehand.

Los plugins de Craft aparecerán junto al lado del panel inspector.

Los plugins de Craft aparecerán junto al lado del panel inspector.

II. Construye una Biblioteca de Estilos y Recursos Compartidos para tu Equipo

Una de mis cosas favoritas de Craft es su biblioteca de plugins, que te permite generar una guía de estilo de tu diseño y compartir estilos y recursos con tu equipo. Cuando hay muchos miembros en el equipo trabajando en tus propios archivos, asegurarse de que los cambios se actualizan simultáneamente en el entorno de trabajo de todos puede ser un gran dolor de cabeza. La biblioteca hace que este proceso sea perfecto.

Guía De Estilo En Un Click

Crear una guía de estilo es uno de esos pasos necesarios en el proceso de diseño y desarrollo que muchos diseñadores posponen el mayor tiempo posible. Dependiendo de la complejidad de tu diseño, el número de objetos y estilos de texto, y la rapidez de los cambios de diseño, la tarea puede ser desalentadora. La característica de la guía de estilo de un solo click de Craft es que genera estilos de texto y colores de tu documento al presionar un botón e incluso lo guarda en su propia página de símbolos, eviscerando tus excusas.

Comienza haciendo click en el complemento Biblioteca y ve a la pestaña “Documento”. Allí, verás la opción para generar una página de guía de estilo de los que ya existen en tu documento.

Genera una guía de estilo en un click.

Genera una guía de estilo en un click.

Voilà—¡Craft ha generado una guía de estilo para ti en una simple acción, los ha añadido a los estilos de texto de tu documento y colores, e incluso ha creado una página en la que están organizados cuidadosamente para ser entregados a tus desarrolladores! ¡Qué momento para estar vivo!

Echa un vistazo rápido para ver si hay algo que te gustaría volver a etiquetar, y date un golpecito en la espalda por ahorrar horas de trabajo creando una guía de estilo de manera difícil. Cualquier cambio que tú o su equipo necesite hacer puede ser enviado e instantáneamente sincronizado con tu nube compartida.

Como por arte de magia, tienes una guía de estilo ordenada y legible y estilos de documento que se comparten en tu nube.

Like magic, you have a neat, legible style guide and document styles that are shared on your cloud.

Librería de Assets

Como diseñador, soy un gran defensor de mantener una biblioteca de patrones para los componentes reutilizables, además de una guía de estilo para acelerar el proceso de diseño, así como minimizar las inconsistencias. El plugin de Librería de Craft hace que sea sencillo añadir encabezados, pies de página, menús de navegación, iconos, botones y otros símbolos a una biblioteca de activos global. Haz un cambio en uno, envíalo a tu equipo, y todo el mundo estará trabajando desde el mismo conjunto de símbolos. ¡Para el que le importan los patrones, Craft es una revelación!

En el panel de plugins de la Biblioteca, cambia a la opción “Compartido”, donde encontrarás la opción de importar una biblioteca o crear una nueva. Después de haber creado al menos una biblioteca, verás una lista desplegable de categorías disponibles, así como la posibilidad de agregar una propia. Sugiero la creación de categorías separadas para los iconos y botones, así como uno para los encabezados / pies de página y uno para los assets reutilizados, como un avatar de usuario.

Una vez que tengas tu organización en su lugar, selecciona cualquier símbolo en tu documento, como un icono, y luego haz clic en el espacio [+] en el panel para agregarlo a tu biblioteca.

Organiza assets globales como encabezados, iconos y botones y, a luego, coloca actualizaciones en la biblioteca compartida.

Organiza assets globales como encabezados, iconos y botones y, a luego, coloca actualizaciones en la biblioteca compartida.

A medida que tu y tu equipo interactúen en tu diseño, probablemente realices cambios en estos recursos compartidos. Simplemente pulsa “enviar cambios” cuando hayas actualizado los activos y todos los vinculados en el equipo recibirán una notificación instantánea sobre la actualización con un mensaje para “extraer cambios”.

Craft te avisa cuando se actualizan los recursos de la biblioteca, por lo que cada miembro puede obtener cambios y mantenerse sincronizado.

Craft te avisa cuando se actualizan los recursos de la biblioteca, por lo que cada miembro puede obtener cambios y mantenerse sincronizado.

III. Utiliza Sync y Freehand para Compartir Diseños y Obtener Comentarios

Instantáneamente Sincroniza Lienzos a InVision

Atrás han quedado los días de ciclos interminables de documentos PDF por correo electrónico — InVision hace que sea fácil de crear prototipos clickables y compartirlos con todo el equipo. El flujo de trabajo estándar para InVision es exportar archivos de imagen desde su diseño y cargarlos en un prototipo en el sitio. El complemento Sync en la suite Craft elimina la mayoría de estos pasos.

Con Sync, puedes agregar y actualizar las mesas de trabajo directamente a un prototipo en la cuenta de tu equipo. Simplemente navega a la función Sync en el panel Craft y selecciona el destino de tu pantalla. Desde aquí, incluso puedes iniciar un nuevo prototipo y compartirlo con tu equipo para obtener comentarios.

Sync hace todo increíblemente más facil en cuanto a mantener tus prototipos de InVision actualizados se refiere.

Sync hace todo increíblemente más facil en cuanto a mantener tus prototipos de InVision actualizados se refiere.

Comparte tus prototipos a través de una invitación o un enlace, y es tan sencillo para tus compañeros de equipo hacer click a través de tu prototipo y agregar comentarios. Los desarrolladores pueden explorar los detalles del diseño con el modo de inspección, lo que ahorra horas de trabajo de especificaciones y la necesidad de actualizar los archivos a medida que cambia el diseño.

El modo inspección hace que sea fácil para tus compañeros de equipo ver los estilos en tus diseños e incluso tomar el código CSS.

El modo inspección hace que sea fácil para tus compañeros de equipo ver los estilos en tus diseños e incluso tomar el código CSS.

Invita a tu Equipo a Comentar, Anotar y Dibujar en tus Diseños

Craft aborda otro punto de dolor para los equipos colaborativos remotos que no tienen el lujo de reunirse en la misma habitación con una pizarra. Con Freehand, los diseñadores pueden capturar partes o todo su documento de diseño y sincronizarse instantáneamente con un proyecto compartido en InVision, donde todos en el equipo pueden anotar, comentar e incluso dibujar.

En tu documento, navega hasta el panel Freehand y elige crear un proyecto Freehand a partir de tu documento o de las mesas de trabajo seleccionadas.

Crea un espacio Freehand para colaboración de forma libre.

Crea un espacio Freehand para colaboración de forma libre.

Después de que el complemento genere un espacio a mano alzada, puedes compartir el vínculo con cualquier persona y comenzar a colaborar. Las herramientas son bastante sencillas, y Freehand lleva cuenta de quién dice qué, lo que hace que sea fácil de trabajar juntos sin problemas. A medida que actualizas tus diseños, puedes utilizar el panel para actualizar el espacio a mano alzada de forma instantánea. Ahora, nadie está confundido acerca de cuál de los quince iconos exactamente el jefe está hablando.

Es casi como estar ahí.

Es casi como estar ahí.

IV. Características Extras para tu Propio Flujo de Trabajo

Mientras que estaba muy entusiasmado con el potencial de Craft para la colaboración en equipo, vi que la suite viene con otros complementos que son muy convincentes para simplificar el flujo de trabajo de diseño individual.

Agrega Rápidamente Contenido Ficticio Desde la Web

Sólo se necesitan unos cuantos ejemplos de “espera, ¿qué significa ese texto del lorem ipsum?” Durante las reuniones antes de conceder que necesitas utilizar contenido real en tus mockups finales. Pero, ¿quién quiere tener que recurrir a Internet para fotos, titulares, publicaciones y otros contenidos ficticios para poner en sus diseños y mockups? Después del tercer o cuarto nombre, puede ser difícil crear falsos usuarios con tu propia imaginación.

Data es un encantador plugin en la suite de Craft que hace que el sustituir contenido una brisa de aire fresca. Selecciona una forma en tu diseño y navega hasta el complemento de datos donde puedes colocar fotos de tus propias carpetas o agregar imágenes aleatorias al instante de Unsplash de cualquier categoría. Incluso puedes crear tus propias consultas personalizadas para usar una y otra vez.

De forma instantánea, toma contenido ficticio y ponlo en tus diseños sin dejar Sketch.

De forma instantánea, toma contenido ficticio y ponlo en tus diseños sin dejar Sketch.

Añadir texto como las titulares y contenido para el cuerpo es tan fácil — sólo tienes que seleccionar el cuadro de texto deseado y elegir entre las muchas categorías en la pestaña “Tipo”. Mi equipo disfruta especialmente usando titulares de la categoría “Motivación” como contenido de prueba.

Tu vida tendrá mucho más significado con Craft.

Tu vida tendrá mucho más significado con Craft.

Los datos también te permiten agregar contenido de cualquier sitio web, en caso de que necesites algo menos aleatorio. El proceso es esencialmente el mismo, y puedes tener tus diseños llenos de datos relevantes y reales en poco tiempo.

Genera Columnas y Filas de Contenido con Espaciado Parejo

Otra razón por la que necesitas Craft en tu vida es que hace de la duplicación de objetos y grupos de objetos en filas y columnas perfectamente ordenadas y uniformemente espaciadas algo increíblemente rápido. Olvídate del tedioso copiar + pegar. Sólo tienes que seleccionar un objeto o grupo y, a continuación, especificar el número de columnas y filas, así como el espaciado.

Especifica el número de columnas y filas, así como el espaciado.

Especifica el número de columnas y filas, así como el espaciado.

Estoy especialmente encantado por la forma en que se integra con el complemento de datos — duplicar el contenido ficticio generado por los datos te dará bits de contenido frescos y generados en un santiamén. ¿Necesitas una enorme cuadrícula llena de fotos de usuario? Considéralo hecho. ¿Debes establever una lista de contenido para una página de artículos con fotos, titulares y vista previa? No hay problema.

Después de poner algún contenido ficticio de Data, haz una lista completa al instante.

Después de poner algún contenido ficticio de Data, haz una lista completa al instante.

Agregua Archivos Directamente Desde iStock y Getty Images

¿Has pasado la etapa de contenido de relleno y necesitas una imagen para el hero de alta calidad para el mockup? La última adición a Craft Suite es el complemento Stock, que te permite vincular tu diseño en Sketch directamente a tu cuenta con iStock o Getty Images. Busca imágenes relevantes dentro del panel y agrégalas a tu diseño con un solo click. ¡Una interrupción menos en el flujo de trabajo de diseño!

Pon imágenes de alta resolución de tu cuenta en tu diseño sin tener que abrir un navegador.

Pon imágenes de alta resolución de tu cuenta en tu diseño sin tener que abrir un navegador.

Conclusión

Los equipos de diseño están siempre buscando maneras de mejorar su flujo de trabajo colaborativo y mantener a todos en sincronía. Sketch e InVision cambiaron el paisaje para los diseñadores de interacción. Craft mejora el potencial de estas herramientas para tu equipo, racionalizando y conectando el proceso de todos sin importar la distancia. Con el conjunto de complementos Craft para Sketch, puedes ahorrar horas de trabajo de diseño.

About the author

Bree Chapin, United States
member since April 26, 2016
Bree is a multi-skilled soup-to-nuts designer with 10+ years of interaction design and five years with a strong focus on UX and product development for web and mobile. She's had the great fortune to work on projects across a wide range of domains and on teams of all sizes, from developing IoT startup MVPs to designing features on long-established finance industry tools. [click to continue...]
Hiring? Meet the Top 10 Freelance InVision Experts for Hire in November 2017

Comments

comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Bree Chapin
Designer
Bree is a multi-skilled soup-to-nuts designer with 10+ years of interaction design and five years with a strong focus on UX and product development for web and mobile. She's had the great fortune to work on projects across a wide range of domains and on teams of all sizes, from developing IoT startup MVPs to designing features on long-established finance industry tools.