Zeplin Sketch Plugin: el puente de flujo de trabajo entre el diseño y la ingeniería

Zeplin es una poderosa herramienta de colaboración que cierra la brecha entre diseñadores y desarrolladores al crear un espacio conectado para los equipos de productos.

¿Por qué Zeplin?

Una pieza crucial de cualquier rompecabezas de desarrollo de productos es el lugar donde el diseño se encuentra con el desarrollo. Cuando un diseño está listo para pasar a la fase de desarrollo (la "transferencia"), los ingenieros necesitan una forma de entenderlo y traducirlo en código.

Zeplin facilita la transferencia tomando diseños de Sketch, Adobe XD, Figma y Photoshop y exportándolos a un formato que puede generar fácilmente fragmentos de código, guías de estilo, especificaciones y recursos.

Di adiós a los días de "líneas rojas". Zeplin se enfoca únicamente en mejorar la colaboración entre los diseñadores de productos y los equipos de desarrollo y es utilizado por los principales equipos de productos en Airbnb, Dropbox, Pinterest, Microsoft y muchos otros.

Con Zeplin no hay necesidad de escribir manualmente tamaños o márgenes, escribir la copia, exportar iconos. Es simplemente increíble y ahorra mucho tiempo para concentrarse en las exploraciones de diseño. – Alex Potrivaev, diseñador de productos @Intercom

En uno de nuestros artículos anteriores, el diseñador de Toptal, Micah Bowers, habló sobre la importancia de tener un sistema de lenguaje de diseño estandarizado para comunicarse de manera eficiente en varias funciones de los equipos de productos que trabajan en productos digitales.

Mediante el control de versiones de los activos de diseño, la creación de bibliotecas de componentes y la generación de guías de estilo de vida, un proyecto transferido a Zeplin puede servir como la "única fuente de información" para los equipos de productos.

Básicamente, consideramos que Zeplin es nuestra fuente de información para colaborar con Ingeniería. Si no está en Zeplin, no es oficial. – Jason Stoff, diseñador sénior, productos digitales @Starbucks

Limitaciones de Zeplin

Si bien Zeplin tiene muchas funciones útiles, no es perfecto. Zeplin ofrece un plan gratuito, pero bajo ese plan, está limitado a un proyecto. Al diseñar tanto para iOS como para Android, se requerirán dos proyectos separados. En ese momento, se necesitaría un plan pago.

Una vez que se comprende el flujo de trabajo con Zeplin y Sketch (o las otras aplicaciones mencionadas anteriormente), el flujo de trabajo se vuelve fácil. Sin embargo, Zeplin tiene una pequeña curva de aprendizaje que requiere algo de tiempo y atención. Para ver una descripción general y obtener más información sobre cómo usarlo, vea el video de demostración de Zeplin a continuación:

Trabajar con Sketch y Zeplin: pasos y consejos

1. Comience con Zeplin.

• Cree una cuenta de Zeplin si aún no tiene una. Puedes registrarte gratis: https://app.zeplin.io/register
• Descargue la aplicación de escritorio de Zeplin para Mac o Windows.
• Descarga el complemento de Zeplin para Sketch.

2. Prepare su archivo Sketch.

• Ahora que tenemos Sketch y Zeplin listos para usar, configuraremos nuestro archivo Sketch para exportarlo sin problemas a Zeplin.
• En Sketch, organice sus activos y capas usando convenciones de nomenclatura consistentes. Si colabora con otros diseñadores, determine convenciones que funcionen para todos en su equipo. Según el tipo de proyecto que sea (p. ej., iOS, Android o web), Zeplin ajustará automáticamente la convención de nomenclatura de los recursos, lo que hará que exportarlos sea un proceso de un solo paso.
• Cree símbolos para elementos y activos comunes dentro de Sketch. Esto le permitirá configurar componentes en Zeplin.
• Guarde colores en su paleta de "Colores de documento" y fuentes como "Estilos de texto" en su archivo de Sketch. Estos aparecerán en su guía de estilo generada por Zeplin.

3. Haga que los activos sean exportables en Sketch.

• Este es un paso muy importante. Una vez que sus activos estén agrupados en símbolos, abra la página Símbolos en su archivo de Sketch.
• Haga clic en un grupo dentro de un símbolo, como "ic-menu" (el icono de la carpeta)
• Con el grupo resaltado, ubique la acción "Hacer exportable" en la parte inferior derecha de su "Inspector" en Sketch y haga clic en esta opción. Ahora debería aparecer un icono de sector junto al nombre de su grupo.
• Este paso permitirá a los ingenieros exportar activos directamente desde Zeplin.

4. Cree un nuevo proyecto en Zeplin.

• Seleccione el tipo de proyecto que está construyendo. Tenga en cuenta que debe tener proyectos separados para iOS y Android, incluso si los diseños son idénticos. Esto se debe a que Zeplin generará un código diferente según el tipo de proyecto.
• Seleccione la resolución del proyecto que coincida con sus mesas de trabajo de Sketch (p. ej., 1x, 320 px).

5. Exporte las mesas de trabajo de Sketch a Zeplin.

• Desde Sketch, resalte todas las mesas de trabajo que le gustaría exportar a Zeplin.
• Vaya a Complementos > Zeplin > Exportar seleccionados… o presione ⌃⌘E en su teclado.
• A continuación, exportaremos símbolos desde Sketch. Abra la página Símbolos en Sketch y resalte todas las mesas de trabajo. Exportar a Zeplin.

6. Organizar el proyecto en Zeplin.

• Ahora que sus mesas de trabajo de Sketch están en Zeplin, organicemos las ilustraciones en secciones.
• Desde la vista Panel de control de su proyecto, seleccione pantallas similares para agruparlas en categorías. Una vez resaltado, haga clic con el botón derecho y seleccione "Nueva sección a partir de la selección". Repita esto hasta que su archivo Zeplin esté organizado correctamente.

7. Utilice componentes en Zeplin.

Quizás una de las características más útiles de Zeplin es la capacidad de organizar activos en bibliotecas de componentes. Esto es importante cuando los diseños de un proyecto son desarrollados para múltiples plataformas por diferentes miembros del equipo. La unificación del diseño es esencial, como lo describe la diseñadora de Airbnb Karri Saarinen en Building a Visual Language:

Un sistema de diseño unificado es esencial para construir mejor y más rápido; mejor porque nuestros usuarios entienden más fácilmente una experiencia cohesiva, y más rápido porque nos da un lenguaje común con el que trabajar.

• Seleccione la pestaña "Guía de estilo" en la parte superior central de Zeplin (junto a "Panel de control").
• Una vez en la pestaña "Guía de estilo", seleccione la pestaña secundaria, "Componentes". Aquí, verá todos sus símbolos exportados desde Sketch.
• Organícelos en secciones como "Iconos", "Imágenes", "Elementos comunes", etc. Puede obtener más información sobre la pestaña Componentes de la guía de estilo de su proyecto en Zeplin aquí.

8. Exportar guías de estilo de Zeplin.

• Desde la vista del Tablero de su proyecto Zeplin, ubique el botón "Compartir" en la esquina superior derecha de la aplicación.
• Seleccione "Compartir", luego busque "Escena" en la parte inferior del menú. Seleccione "Habilitar" y luego "Abrir". Esto generará una guía de estilo dinámica para su proyecto. Comparta la URL con su equipo.

9. Anote sus diseños en Zeplin.

• Agregar notas a los diseños es fácil con Zeplin. Desde la vista detallada de una pantalla, seleccione el icono de agregar nota y fije su nota a un componente.
• Puede agregar una nota manteniendo presionada la tecla Cmd ( Ctrl para usuarios de Windows y Linux) y haciendo clic en cualquier parte de la pantalla.
• Incluso puedes mencionar a otros compañeros de equipo con “@” y ellos recibirán una notificación.

10. Colabora, comparte y usa el control de versiones.

• Ahora que su archivo Zeplin está listo para compartir con su equipo, invite a los usuarios a través de su dirección de correo electrónico o envíeles la URL del proyecto.
• Continúe actualizando su archivo Zeplin exportando mesas de trabajo desde Sketch.
• Zeplin controlará automáticamente la versión de sus archivos y podrá continuar colaborando con los miembros del equipo utilizando esta "fuente de la verdad" dinámica.

Conclusión

Crear un flujo de trabajo dinámico, organizado y colaborativo entre los equipos de diseño y desarrollo es esencial para crear excelentes productos digitales. Tener un puente de flujo de trabajo como Zeplin permite a los diseñadores anotar pantallas y facilita la fase de transferencia a menudo temida con especificaciones completas y precisas.

La flexibilidad para actualizar activos dinámicamente desde una fuente central, como un símbolo en Sketch exportado a un componente en Zeplin, crea una gran flexibilidad. Luego, los ingenieros pueden exportar fácilmente activos a código nativo, ahorrando tiempo y tedio.

Si bien la UX bien pensada y los diseños estéticamente hermosos son la raíz de un producto exitoso, el proceso de poner ese diseño en manos de los usuarios es fundamental.

Los diseñadores que deseen ser eficientes y confiar en una sola "fuente de la verdad" deben considerar el flujo de trabajo de Sketch to Zeplin descrito anteriormente. El poder detrás de la sólida relación de software entre estas dos herramientas de diseño ayudará a los diseñadores y equipos de desarrollo a llegar a la meta con mayor facilidad y satisfacción.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Adobe XD vs. Sketch: ¿Qué herramienta UX es adecuada para usted?
• Cómo crear un marco de diseño efectivo (incluye un marco de interfaz de usuario de Sketch gratuito)
• Cosas que quizás no sepas sobre la tipografía en Sketch
• Familiarizarse con el desarrollo del complemento Sketch
• Creación de ilustraciones alucinantes con Sketch y Looper en muy poco tiempo