Zeplin

Last updated 6 months ago

Con Zeplin conseguimos estrechar el gap entre diseño y desarrollo.

Para garantizar que lo que está en Zeplin es el diseño final, únicamente subimos los archivos que están en la rama Master del proyecto en Abstract.

1. Crear un proyecto nuevo en Zeplin

Los proyectos en Zeplin se crean de acuerdo a la siguiente nomenclatura para mantener la consistencia entre los nombres de los proyectos en las distintas herramientas.

[id proyecto][Nombre del proyecto][Plataforma]
  • El campo de plataforma es opcional. Nos sirve para concretar si los artboards que contiene dicho proyecto son de web o de app iOS o Android .

Por ejemplo, si crearamos un nuevo proyecto en Zeplin para exportar el diseño de Playtomic Web:

  • id proyecto → 19

  • Nombre del proyecto → Playtomic

  • Plataforma → Web

19_Playtomic_Web

✏️ Para conocer más sobre como nos organizamos y cual nomenclatura de archivos que seguimos puedes encontrarlo en 1. Cómo nos organizamos.

2. Preparar Sketch para subir a Zeplin

Marcar elementos necesarios como exportables para desarrollo. Estamos hablando de los assets del proyecto como los iconos o las imágenes.

3. Exportar los Artboards o Frames

La forma de exportar las vistas dependerá de si trabajamos con Sketch o con Figma.

Sketch

Si estamos trabajando con Sketch, al descargarnos Zeplin se nos ha descargado un plugin de Sketch, el cual utilizaremos para realizar la exportación.

Figma

Para exportar los Frames desde Figma debemos activar Zeplin dentro de Figma y posteriormente utilizar el comando Option+E con los frames que queramos exportar seleccionados. Este comando activará la activación a Zeplin de forma automática.