19 de septiembre de 2020

Cómo entrego los diseños a los desarrolladores con Sketch y Zeplin

Entregar diseños de interfaz a los desarrolladores no es una tarea fácil. Muchos diseñadores intentan crear guías manualmente para mostrar los tamaños de las fuentes, los colores, los componentes, el espacio, los márgenes, etc. Esto lleva mucho trabajo, y mantenerlo actualizado es una pesadilla.

Varias aplicaciones sirven para hacer este trabajo de forma más ordenada y eficiente: Invision, Avocado y Zeplin, por nombrar algunas. En este post, explicaré cómo uso Zeplin para manejar esta importante tarea.

Tabla de contenido

• ¿Por qué Zeplin?
• Conectando Zeplin y Sketch
  • Crear un proyecto Zeplin
  • Instalar el plugin de Sketch
• ¿Qué esperan los desarrolladores del diseñador?
• Cinco cosas que no pueden faltar en tu archivo de Sketch
  • Paleta de colores consistente
  • Usar estilos de texto
  • Espacio consistente
  • Usar símbolos
  • Hacer que los activos sean exportables
• Configurar el proyecto en Zeplin
  • Exportar desde Sketch
  • Añadir y organizar el contenido en Zeplin
    • Paleta de colores
    • Catálogo de estilos de texto
    • Espaciado y diseño
    • Componentes
• Compartir
• Conclusión
• Preguntas

¿Por qué Zeplin?

1. Generar automáticamente guías de estilo
2. Puedes organizar tus componentes en secciones y grupos
3. Sincroniza directamente con Sketch a través de un plugin oficial
4. Descarga activos, imágenes en 1x, 2x y 3x también SVG optimizado
5. Buen código CSS con variables y unidades relativas
6. Webapp disponible
7. Se puede compartir con todo el equipo
8. Tiene una versión gratuita

Conectando Zeplin y Sketch

Después de crear tu cuenta en Zeplin, el siguiente paso es crear un proyecto.

Crear un proyecto en Zeplin

Puedes hacerlo desde la aplicación Mac o Windows:

Instalación del plugin de Sketch

Una vez instalado Zeplin, el plugin de Sketch debería instalarse automáticamente, pero si tienes algún problema descarga el plugin y haz doble clic. Una vez hecho esto, deberías tenerlo disponible en el menú de plugins en Sketch:

¿Qué esperan los desarrolladores del diseñador?

1. Tipo de letra: familia, tamaño, peso, espacio entre caracteres e interlineado
2. Espacios: márgenes, relleno y distancia entre elementos
3. Colores
4. Símbolos o componentes
5. Activos: imágenes, fotos, etc.

Zeplin te da todo esto y además genera muy buen código CSS para ello.

Cinco cosas que no pueden faltar en tu archivo Sketch

Para demostrar cómo usar Zeplin hice un pequeño diseño en Sketch, que puedes descargar aquí.

Paleta de colores consistente

Zeplin crea automáticamente una lista de colores de todos los colores utilizados en el documento de Sketch, por lo que es muy importante ser coherente con el uso de los colores.

Crea tu paleta de colores, añádelos al documento y escoge siempre colores de esa paleta.

Usar estilos de texto

Te permite almacenar un conjunto de estilos y reutilizarlos en diferentes capas de texto dentro de tus diseños, manteniendo así la consistencia en tu UI, más información sobre su uso en la documentación de Sketch.

Puedes usar cualquier nombre en tus Estilos de Texto Yo los separo por donde los uso, por ejemplo:

• Form / Label

• Button / Primary / Label o Button / Secondary / Label

• Typography / H1

• Typography / Body

Espacio consistente

Uso 8px como espacio base. Esto significa que los márgenes y paddings entre los elementos de la UI se basan en múltiplos de 8 (8, 16, 24, 32, 40, 48, etc.).

El uso de un número par como el 8 en el espacio y el tamaño de los elementos en tu diseño hace que el escalado para una amplia variedad de dispositivos sea mucho más cómodo y consistente. Si quieres saber más sobre esta técnica, te recomiendo este post: Cómo crear diseños más fuertes con la cuadrícula de 8pt.

Usar símbolos

Los símbolos en Sketch son una forma de guardar y reutilizar elementos comunes en tus diseños. Los símbolos son la herramienta más potente de Sketch. Para más información sobre los símbolos consulta la documentación de Sketch.

Hacer que los activos sean exportables

Al hacer esto, permitirá a los desarrolladores descargar los activos de Zeplin e incluso en diferentes resoluciones como 1x, 2x y 3x:

Entonces, en Zeplin, el desarrollador podrá no sólo inspeccionar la imagen sino también descargar los archivos png o jpg para 1x, 2x y 3x y también el código HTML para la imagen responsiva:

Configuración del proyecto en Zeplin

Exportar desde Sketch

Una vez que exportes todas las mesas de trabajo y páginas desde Sketch:

Plugins > Zeplin > Export All > Artboards from all pages

y luego ve a tu página de Símbolos, selecciónalos todos y

Plugins > Zeplin > Export Selected

Con esto, te aseguras de exportar absolutamente todo el documento de Sketch a Zeplin.

Añadir y organizar el contenido en Zeplin

Si abres tu proyecto en Zeplin, verás que hay un indicador en la pestaña "Styleguide", que significa que Zeplin ha encontrado colores y estilos de texto para añadir a tu proyecto.

Paleta de colores

Con un solo clic, añades todos los colores que Zeplin encontró en tu documento:

Y no sólo añade los colores, sino que genera el código CSS necesario, por lo que el desarrollador sólo tiene que copiar y pegar el código en su proyecto:

También puede cambiar los nombres y el orden de los colores si lo desea.

Catálogo de estilos de texto

Al igual que con los colores, Zeplin detecta los Estilos de Texto que tiene tu documento de Sketch y te propone añadirlos con un solo clic:

Al igual que con los colores, genera el código CSS para que los desarrolladores sólo tengan que copiar y pegar:

Por defecto utiliza los nombres que vienen de Sketch pero puedes cambiarlos si lo deseas.

Espacio y diseño

En esta sección puedes crear "fichas" con los espacios que utilizas en tu diseño. Como mi diseño utiliza espacios de múltiplos de 8px debo crear: 8, 16, 24, 32 y así sucesivamente y me aseguro de marcar la casilla para usar medidas rem:

Usar medidas relativas (rems) no sólo genera el código CSS con esas medidas sino que cuando el desarrollador está inspeccionando el diseño, puede ver el nombre de las variables CSS generadas, lo que le permitirá desarrollar la página y los componentes responsivos y accesibles:

Componentes

En esta sección, el desarrollador podrá ver todos los Símbolos que creó en su diseño en Sketch que le sirve de guía para los componentes reutilizables que el desarrollador necesita crear y como extra el código CSS con las variables de color y espacio:

Por defecto, están todos agrupados en la misma sección, pero puedes agruparlos por sección, seleccionar varios componentes y luego: Click derecho> Nueva sección a partir de la selección.

También puedes organizarlo por grupos, selecciona varios componentes en una sección Click derecho> Nuevo grupo a partir de la selección

Y también puedes arrastrar y soltar componentes, grupos y secciones para organizarlos mejor. Al hacer esto, Sketch actualizará automáticamente todos los componentes, y los organizará en Secciones y Grupos.

Compartir

Todo está listo para enviar a su desarrollador o equipo de desarrollo. En el tablero del proyecto de Zeplin, se hace clic en el botón "Compartir":

En la ventana emergente, puedes invitar a los desarrolladores por correo electrónico (el correo con el que se registraron en Zeplin) o enviarles el enlace tanto para la web como para la app. Ambos enlaces son privados, y sólo los usuarios invitados al proyecto tienen acceso a ellos.

Por último, Zeplin tiene el concepto de "Escena " que es una página pública donde puedes compartir tu diseño con todo el mundo, esto es 100% público, pero sólo lo activas si lo deseas, aquí está el enlace de este proyecto: https://scene.zeplin.io/project/5f663baa271b6a1b54aba890

Conclusión

Como pudiste ver, Sketch y Zeplin te permiten pasar de manera ordenada y siempre sincronizada los diseños a los desarrolladores, incluyendo colores y fuentes, tamaños, espacios, etc.

Zeplin puede hacer mucho más. Por ejemplo, un desarrollador puede enlazar el código de sus componentes, su repositorio, snippets, e incluso StoryBook con el proyecto Zeplin. En el próximo post, haré ese proceso.