Sketch y Zeplin: ayudando a los diseñadores y a los desarrolladores a colaborar

La colaboración entre diseñadores y desarrolladores es esencial para el éxito de un proyecto web, y es un indicativo del éxito de un equipo. Si bien compartir el mismo espacio de trabajo es invaluable, contar con una fuente de información en línea que ayude con esta colaboración es increíblemente útil. En este artículo, vamos a analizar a Zeplin y cómo funciona en combinación con Sketch para integrar a los equipos.

Un breve comentario sobre Sketch

Hace aproximadamente seis meses, cuando cambié de trabajo, me animaron a probar Sketch. Lo estupendo de este software es que se enfoca específicamente en el diseño de interfaces e íconos; desde mesas de trabajo con tamaños específicos para web, móviles e íconos, hasta funciones que ayudan a mejorar el proceso de diseño, Sketch es una herramienta imprescindible para los diseñadores.

Asimismo, la curva de aprendizaje si eres un usuario intermedio de Photoshop o Illustrator es prácticamente nula.

Aquí hay algunos ejemplos que te ofrecen una perspectiva general de lo que puedes hacer con sketch:

1. Crear páginas para organizar tu contenido (por ejemplo: diseños para móviles, diseños para escritorio) y mesas de trabajo, dentro de estas páginas, para crear una maqueta de tu producto (por ejemplo: para crear paso a paso el «viaje del cliente»).
2. Utilizar el Inspector para encontrar todos los detalles acerca de un objeto específico (tamaño, posicionamiento, colores, estilos de fuentes, opacidad y mucho más).
3. Usar la función Export para exportar mesas de trabajo u objetos individuales a formatos de archivo específicos (PNG, JPG, PDF, etc.).

«Soy un desarrollador, ¡nunca he usado Sketch!»

En años recientes, los diseñadores han aprendido a colaborar entre ellos usando herramientas como InVision, pero esta plataforma aún carece de funciones que permitan una entrega rápida del diseño al equipo de desarrollo.

No deberíamos pedir a los desarrolladores que sea expertos en las mismas herramientas que los diseñadores usan para crear las maquetas de los productos. Ahora bien, tampoco deberíamos exigir a los diseñadores que se alejen de lo que mejor saben hacer: ¡diseñar! Crear un «documento de especificaciones» cada vez que se entrega un diseño dista mucho de ser «ágil», y puede significar una gran pérdida de tiempo entre la entrega de los diseños y tener que iterar si es necesario.

Zeplin

Aquí es donde Zeplin entra en escena.

Zeplin es una herramienta de colaboración para diseñadores de interfaces de usuario (UI) y desarrolladores front-end. Va más allá del flujo de trabajo de diseño y ayuda a los equipos con la entrega de este.

Permite a los diseñadores subir sus wireframes o sus diseños visuales directamente desde Sketch y añadirlos a las carpetas de proyectos en Zeplin. ¿Qué es lo mejor? Las anotaciones se agregarán automáticamente a los diseños (tamaños, colores, márgenes e incluso sugerencias de CSS para ciertos elementos) lo que te dejará con un repositorio en línea al que todo el equipo puede contribuir.

«Zeplin funciona muy bien como "única fuente de la verdad", cuando se utiliza como tal.

Además, como está disponible como una aplicación autónoma y como una aplicación web, puedes acceder a ella prácticamente desde cualquier lugar. Hace que sea fácil revisar los diseños y elementos como el espacio, los tamaños, los colores, etc.» – Daniel Setas Pontes, desarrollador de Javascript @NOW TV, Sky

Exportando diseños de Sketch a Zeplin

Zeplin funciona como un plugin dentro de Sketch, así que subir diseños es un trabajo de un solo clic.

He aquí como se inicia un proyecto:

1. Descarga Zeplin (solo para Mac) e instálalo. Los desarrolladores no necesitarán estar ejecutando OS X, pues únicamente deberán entrar a la herramienta basada en la web para conseguir acceso al contenido.
2. Crea los proyectos.
3. Selecciona la plataforma para la que hayas diseñado.
4. Etiqueta el proyecto (asegúrate de elegir un nombre que sea familiar para todo el equipo).

Dentro de Sketch, selecciona los objetos individuales y hazlos exportables. Esto le permitirá después a tu equipo de desarrollo exportar cada elemento desde dentro de Zeplin. He aquí como funciona:

1. A continuación, selecciona las mesas de trabajo (artboards) que quieras subir a Zeplin.
2. Ve a Plugins > Zeplin > Export Selected Artboards (Exportar mesas de trabajo seleccionadas).
3. Selecciona el proyecto en el que deseas subir tus diseños y haz clic en Import (Importar).

Trabajando con Zeplin

Una vez dentro de Zeplin, puedes navegar entre los proyectos y explorar fácilmente todos los componentes dentro de ellos. Averiguar las especificaciones de ciertos elementos también es intuitivo; selecciona el elemento que quieras, y toda la información relevante aparecerá en la columna de la derecha.

Desarrolladores: así es como funciona, una vez que hayas abierto la herramienta basada en la web y que hayas iniciado sesión:

1. Selecciona el objeto que quieras inspeccionar.
2. Mira en la columna de la derecha para obtener información detallada como estilos de fuentes, colores, etc. (la información se desplegará según el objeto que selecciones).
3. Copia el CSS sugerido.

Si el equipo de diseño permitió elementos exportables al importar los diseños a Zeplin, el equipo de desarrollo debería poder exportar los recursos individuales. Los recursos estarán disponibles para su descarga en formato SVG y en tres tamaños distintos de PNG.

1. Aquí puedes añadir notas y comentarios a los diseños.
2. Aquí puedes copiar y compartir el enlace del proyecto, quizá incluso integrarte con el canal de Slack del equipo para recibir notificaciones ¡o invitar a los miembros del equipo a colaborar!

Por qué tu equipo debería realizar el cambio

Trabajar con Zeplin tiene muchas ventajas, aquí hay algunos ejemplos:

• Evitar la creación de un documento de especificaciones; algo que no es ni ágil ni fácil de actualizar.
• Crear diseños anotados instantáneos con toda la información relevante para los desarrolladores y otros diseñadores.
• Puedes crear diseños exportables, de modo que los desarrolladores logren un acceso rápido a los recursos individuales.
• Crear todos los proyectos que quieras, y luego subirlos y actualizarlos con solo unos cuantos clics.
• Crear guías de estilo que ayuden al equipo de diseño a ser consistentes.
• Aprovechar la integración con Slack, notificando instantáneamente a tu equipo cada vez que exista una actualización.

¡Pruébalo!

Trabajar con Sketch y Zeplin es una excelente forma para que los diseñadores colaboren en armonía con los desarrolladores. A mi equipo le encanta trabajar de esta manera. ¡Me gustaría escuchar tus opiniones y experiencias al trabajar con estas herramientas!

Enlaces útiles

• Plugins de Sketch
• Tutoriales de Sketch en Envato Tuts +
• Plantillas de Sketch para sitios web en Envato Market
• @zeplin_io en Twitter
  
• zeplin.io