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