() translation by (you can also view the original English article)
Anteriormente discutimos cómo los diseñadores pueden colaborar con el equipo de desarrollo utilizando Zeplin, pero hay algo más; Zeplin también es una excelente herramienta para generar guías de estilo. Se asegura para que tu equipo cree experiencias consistentes, teniendo una guía actualizada en línea y accesible para todos desde cualquier parte.
Te permite guardar y renombrar las fuentes y la información de color, e incluso exportar el CSS. La guía de estilo y la función de inspección ahorrarán mucho esfuerzo al llegar el momento del control de calidad (QA). ¡Veamos rápidamente cómo funciona!
Añadiendo estilos
Primero, selecciona una pantalla desde el tablero del proyecto.
A continuación, selecciona el elemento cuyas propiedades desees añadir a la guía de estilo (por ejemplo: selecciona el título H1 para añadir su familia de fuentes, tamaño y color).
Luego, desplaza el puntero del mouse por encima de la herramienta de inspección y busca el ícono Aa+ que aparecerá al lado de los estilos de texto para añadirlos al libro de fuentes:
Añadir colores funciona de forma similar. Haz clic en el ícono de gota, al lado de cada uno, para crear tu paleta de colores:
Tu guía de estilo
Para ver tu guía de estilo en acción, selecciona la segunda pestaña llamada Styleguide (Guía de estilo) en la parte superior de la página:
Todos los elementos añadidos previamente estarán ahí. Ahora puedes continuar y ponerle a cada uno un nombre más adecuado. Para hacerlo, desplaza el puntero del mouse sobre el nombre del color predeterminado y haz clic para cambiarlo.
Nota: Utiliza nombres y convenciones de nombrado que sean familiares para todo el equipo.
Haz lo mismo con las fuentes; actualízalas con un nombre con el que los diseñadores y los desarrolladores estén familiarizados. No olvides que estás ayudando con la entrega al desarrollador, pero también estás creando un repositorio para que otros diseñadores lo usen.
Con lo que terminarás es algo parecido a esto:
Exportando
En este punto, si eres parte de la operación de desarrollo, es posible que quieras copiar el CSS de la columna de la derecha. Decubrirás que está disponible en la sintaxis que prefieras: Sass, LESS, Stylus o CSS simple.
Cada regla puede ser seleccionada de forma individual para ser descargada, mientras que con Command + A se seleccionará todo para copiar y pegar.
Conclusión
No más guías de estilo desactualizadas guardadas en algún lugar que nadie encuentra, no más cadenas de correos electrónicos para averiguar el último color; Zeplin puede ayudar a todo tu equipo a diseñar de manera eficiente. ¡Salud por la productividad!
