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? 🙂


Más artículos que te interesarán:

Introducción a Framer: Primeros pasos

Design Tokens: qué son, ventajas y cómo diseñarlos e implementarlos

9 trucos para mejorar tu workflow y ahorrar tiempo con Figma


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.

  3. Alex Prieto

    Hola Cris,
    antes de nada darte las gracias por el currazo y o mucho que aportas!
    Tengo una duda acerca del plan «Organization» de Zeplin, y espero que me podáis echar una mano. Os cuento; como muchxs de vosotrxos actualmente uso la versión «free» de Zeplin, teniendo más de un proyecto usando más de una dirección de correo electrónico (mal, lo se..) y tengo intención de contratar el plan de «Organización». La pregunta es, ¿es viable exportar todos esos proyectos a la versión de pago, aunque provengan de distintos emails y no perder nada?

    Mil gracias

    1. Cris Busquets

      ¡Hola Alex! Gracias por tu comentario 🙂

      Así a bote pronto lo único que se me ocurre es:
      1/ Hacer la actualización a Organization con el correo que más vayas a usar
      2/ Ir al resto de proyectos de otras cuentas y compartirlo con el e-mail usado en 1/. Después dale permisos de «admin» o de propietario del proyecto.

      Creo que así debería funcionar… en Holaluz nos pasó algo similar al fusionar distintos correos y propietarios y lo hicimos así. La otra opción es eliminar las otras cuentas y si todavía tienes los proyectos en Sketch o el programa que uses, los vuelvas a subir con la cuenta de 1/.

Contesta a Mariaucris Pirela Cancelar respuesta

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

Únete a 2.586 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.