🤘🏻 ¿Buscas libros de diseño UI/UX, tipografía, research...? Haz clic aquí para ver mis favoritos :)

Zeplin: 5 secretos que no conoces

Escrito por Cris Busquets. Publicado en Diseño UI

Zeplin: 5 secretos que no conocías

Hace años que uso Zeplin y hasta ahora simplemente lo he usado así:

  • Hago un diseño en Sketch, definiendo qué partes son assets exportables
  • Lo subo a Zeplin, en el proyecto que toca
  • Invito l@s desarrollador@s al proyecto y ellos trabajan con lo que hay allí

Y ya.

El tema es que, a raíz de un hilo en la Comunidad de Slack de uiFromMars (únete aquí), me he parado a investigar y… resulta que Zeplin tiene bastantes secretos.

Te los cuento a continuación. Me juego una mano a que hay alguno que no conocías 😉

Diseños “pixel-perfect”

Ya sé que el concepto de pixel-perfect como tal está un poco “desfasado”, pero Zeplin tiene una funcionalidad para comparar diseño con lo desarrollado que es maravillosa.

Es este pequeño icono de abajo a la izquierda. Es tan poco identificativo que, o le haces clic por error, o ni te planteas qué hace…

Diseños pixel-perfect en Zeplin

Te aparecerá una pequeña pantalla translúcida que podrás colocar encima del navegador que utilices para ver cómo de igual (o diferente) es el diseño de la implementación 😉

Demo diseños pixel-perfect en Zeplin

Prototipos con Zeplin

Que sí, que puedes hacer prototipos con Zeplin. Cuando en Sketch enlazas un botón con otra pantalla mediante Link, este también aparece en Zeplin:

Cómo hacer prototipos en Zeplin

De este modo l@s desarrollador@s podrán ver también qué hace cada elemento clicable, sea un icono, un botón o un enlace de texto. Es casi como un user journey que puedes tener en la misma plataforma sin que exista la necesidad de ir abriendo documentos y programas distintos.

Extensiones de Zeplin

Quizás es que a veces vivo en un mundo paralelo, pero no me había dado cuenta de que en Zeplin puedes añadir extensiones.

Casi todas ellas son para añadir funcionalidades en el código. Como ya sabes, Zeplin te muestra por defecto el CSS del elemento que tienes seleccionado:

Extensiones en Zeplin

Usando estas extensiones, podrás además generar HTML, SCSS, SASS, Less o Stylus, exportarlo en un JSON, contar los caracteres del texto, exportar todos los textos del diseño a la vez (en lugar de copiar y pegar), etc.

Ordena usando secciones

Cuando en un diseño hay varias iteraciones o se trata de un proyecto que se va avanzando a lo largo de meses, llega un momento en el que todas las pantallas se acumulan.

Con Zeplin puedes organizarlas en secciones (Sections) y ponerles los nombres que necesites para comprender a qué hacen referencia.

La ventaja es que además se pueden cerrar, de modo que no tienes (tú o quien desarrolla) la pantalla llena de diseños distintos compitiendo por tu atención.

Cómo hacer secciones en Zeplin

Para hacer Sections solo necesitas seleccionar con el ratón las pantallas que quieras agrupar y hacer clic con el botón derecho del ratón. En el menú que se despliega, simplemente selecciona «New section from selection«. Después podrás ponerle el nombre que quieras, abrirla y cerrarla y añadir más pantallas.

Invita muchos usuarios a la vez

Si te pasa como a mí, seguramente siempre compartes los diseños con las mismas personas: desarrollador@s, product owner y, en ocasiones, SEO o marketing.

Zeplin tiene una forma de evitar que tengas que escribir siempre los mismos 7 nombres uno por uno, y es añadiéndoles tags para agruparlos.

Eso sí, para poder hacerlo necesitas tener el plan de pago Organization 🙁

Cómo añadir tags a usuarios en Zeplin

¿Tienes alguna más?

Por ahora no he encontrado otras funcionalidades que desconocía de Zeplin (es lo que tiene ir “a salto de mata”).

¿Conoces alguna más que no haya nombrado? 🙂


Deja tu opinión

  1. Genial el primer tip! Pff una pasada me solucionará la vida jaaja.
    ¡Muchas gracias!

  2. Dani Llorente

    Muchas gracias muy buenos. Estoy con Mariaucris el primero es muy bueno para hacer QA. Otro que descubrí hace tiempo es poder subir todos los estilos de text, colores y símbolos. Si subes sólo lás páginas no se te ordena y agrupan perdiendo así los nombre y la organización que tengas en el documento.

    Un abrazo.

Deja tu comentario

Tu email no será publicado. Los campos con asterisco son obligatorios.

Únete a +1,400 diseñador@s y recibe los mejores contenidos para crecer.


No te enviaré spam. Recibirás un correo semanal y descuentos promocionales. Podrás darte de baja cuando quieras.