Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cómo pueden colaborar diseñadores y desarrolladores usando Sketch y Zeplin

Length:LongLanguages:

Spanish (Español) translation by Joaquin Revuelta (you can also view the original English article)

La colaboración entre diseñadores y desarrolladores es crucial para el éxito de un proyecto web, y es una forma de medir también la capacidad de triunfo del equipo. Mientras que compartir el mismo espacio de trabajo no tiene precio, tener un verdadera fuente en línea que ayude en esta cooperación es increíblemente útil. En este artículo vamos a echarle un vistazo a Zeplin y la forma en que trabaja en combinación con Sketch para unir a los equipos de trabajo.

Unas palabras sobre Sketch

Hace unos seis meses, cuando cambié de trabajo, me animaron a que probase Sketch. Lo grande de este software es que está enfocado de forma específica en la interfaz y el diseño de iconos; desde áreas de trabajo con dimensiones específicas para la web, los móviles e iconos, hasta detalles que te ayudan a mejorar el proceso de diseño: Sketch es un must para los diseñadores.

Además, la curva de aprendizaje, si eres un usuario intermedio de Photoshop o Illustrator, es prácticamente nula.

Aquí tienes algunos ejemplos que te darán una idea de lo que puedes hacer con Sketch.

  1. Crear páginas para organizar tus contenidos (por ejemplo: diseños para móviles, diseños para escritorio) y galerías de elementos dentro de esas páginas para bocetar tu producto (por ejemplo: crear una visita guiada paso a paso para el usuario).
  2. Usa el Inspector para encontrar todos los detalles sobre un objeto determinado (tamaño, posición, colores, estilo de fuente, opacidad y mucho más),
  3. Usa la característica Exportar para exportar tu grupo de elementos u objetos individuales a formatos de fichero específicos (PNG, JPG, PDF y demás estándares),

"Soy un desarrollador, ¡nunca he usado Sketch!"

De manera reciente los diseñadores han aprendido a colaborar entre ellos usando herramientas como InVision, pero esta plataforma todavía carece de ciertas características que permitan la entrega rápida de diseños al equipo de desarrolladores.

No deberíamos pedir a los desarrolladores que sean expertos en las mismas herramientas que los diseñadores usan para hacer los bocetos de los productos. Dicho esto, tampoco deberíamos exigir a los diseñadores que se aparten de lo que saben hacer mejor: ¡diseñar! Redactar un "documento de especificaciones" cada vez que entregan un diseño está muy lejos de ser "ágil", y puede conllevar un montón de tiempo desperdiciado entre que se entregan los diseños y se realizan las iteraciones necesarias.

Zeplin

Aquí es donde Zeplin entra en escena.

Zeplin es una herramienta colaborativa para los diseñadores de Interfaz de Usuario y los desarrolladores frontend. Va más allá del flujo de trabajo del diseño y ayuda a los equipos precisamente con las entregas de este mismo.

Permite a los diseñadores subir sus bocetos o sus diseños visuales directamente desde Sketch y añadirlos a la carpeta del proyecto en Zeplin. ¿Lo mejor de ello? Las anotaciones se añadirán automáticamente a los diseños (tamaños, colores, márgenes e incluso sugerencias para la CSS de ciertos elementos), por lo que tendrás un repositorio online al que todo el equipo puede contribuir.

"Zeplin funciona muy bien como una única fuente de datos verdaderos cuando se usa para ello.

Además, puesto que está disponible como aplicación independiente y webapp, puedes acceder a ella desde casi cualquier sitio. Hace muy sencilla la tareas de comprobar diseños y aspectos tales como el espaciado, los tamaños, los colores, etc." --Daniel Setas Pontes, Desarrollador de Javascript @NOW TV, Sky

Exportar Diseños desde Sketch a Zeplin

Zeplin trabaja como un pulgin dentro de Sketch, así que subir diseños es una tarea de un solo clic.

Aquí tienes cómo empezar un proyecto:

Empezar un proyecto en Zeplin
  1. Descarga Zeplin (sólo Mac) e instálalo. Los desarrolladores no necesitan trabajar en OS X ya que sólo tendrán que acceder a la herramienta web para poder acceder al contenido.
  2. Crea proyectos.
  3. Selecciona para qué plataforma has realizado el diseño.
  4. Identifica el proyecto (asegúrate de darle un nombre que sea familiar para todo el equipo).
Export from Sketch
Exportando desde Sketch

Dentro de Sketch, selecciona objetos individuales para hacerlos exportables. Esto permitirá a tu equipo de desarrollo exportar cada elemento más tarde desde Zeplin. Así es como trabaja:

  1. Luego selecciona las ilustraciones que quieres subir a Zeplin.
  2. Ve a PLugins > Zeplin > Export Selected Artboards.
  3. Selecciona el proyecto al que quieres subir tus diseños y haz clic en Import.

Trabajando con Zeplin

Una vez que estés en Zeplin, puedes navegar entre los proyectos y explorar con facilidad todos los componentes que se encuentren dentro de ellos. Encontrar las especificaciones de ciertos elementos es también intuitivo: selecciona el elemento que desees y toda la información relevante aparecerá en la columna que se encuentra a tu derecha.

Desarrolladores: así es como funciona una vez que has abierto la herramienta web y te has registrado.

  1. Selecciona el objeto que quieres inspeccionar.
  2. Mira la columna de la derecha para encontrar información detallada como estilos de fuente, color, y demás (la información se mostrará en función del elemento seleccionado).
  3. Copia la CSS sugerida.

Si el equipo de diseño permitió que los elementos fueran exportables cuando importó los diseños a Zeplin, el equipo de desarrollo debería ser capaz de exportar elementos individuales. Los elementos estarán disponibles para ser descargados en formato SVG y en tres PNG's de diferentes tamaños.

  1. Aquí puedes añadir notas y comentarios a los diseños.
  2. Aquí puedes copiar y compartir el enlace del proyecto, quizá incluso integrarlo con el canal Slack para recibir notificaciones o invitar a otros miembros del equipo a colaborar.

Por qué tu equipo debería subirse al carro

Trabajar con Zeplin tiene múltiples ventajas, aquí tienes algunos ejemplos: 

  • Evitarás tener que redactar un documento de especificaciones, algo que no es ágil ni fácil de actualizar.
  • Crea diseños instantáneos con anotaciones que contienen toda la información relevante para los desarrolladores y otros diseñadores.
  • Puedes crear diseños exportables para que los desarrolladores puedan acceder rápidamente a los elementos individuales.
  • Crea tantos proyectos como quieras, luego súbelos y actualízalos con sólo unos cuantos clics.
  • Crea guías de estilo que ayudarán al equipo de diseño a mantener la consistencia.
  • Aprovéchate de las ventajas de la integración con Slack, que notificará de inmediato a tu equipo cada vez que haya una actualización.

¡Pruébalo!

Trabajar con Sketch y Zeplin es una fantástica forma de que los desarrolladores y diseñadores trabajen en armonía. A mi equipo le encanta trabajar de esta manera... ¡Me encantaría escuchar tus opiniones y experiencias después de trabajar con estas herramientas!

Enlaces útiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.