Share
Anteriormente cubrimos cómo los diseñadores pueden colaborar con el equipo de desarrollo utilizando Zeplin, pero hay algo más en ello; Zeplin es una gran herramienta para generar guías de estilo también. Se asegura de que su equipo cree experiencias consistentes al tener una guía en línea actualizada y accesible para todos desde cualquier lugar.
Le permite guardar y cambiar el nombre de las fuentes y la información de color, e incluso exportar CSS. La guía de estilo y la función de inspección ahorrarán mucho esfuerzo cuando llegue el momento de la garantía de calidad (control de calidad). Veamos rápidamente cómo funciona.!
Primero, seleccione una pantalla desde el tablero del proyecto..
Luego seleccione el elemento cuyas propiedades desea agregar a la guía de estilo (por ejemplo: seleccione Título H1 Para añadir su familia de fuentes, tamaño y color..
A continuación, pase el cursor sobre la herramienta de inspección y busque el icono Automóvil club británico+ que aparecerá por los estilos de texto para agregarlos al libro de fuentes:
Título seleccionado y sus propiedades en el inspector.Agregar colores funciona de una manera similar. Haga clic en el icono de soltar al lado de cada uno para construir su paleta de colores:
Mismo trato, con colores.Para ver su guía de estilo en acción, seleccione la segunda pestaña Guía de estilo en la parte superior de la página:
Todos los elementos previamente añadidos estarán allí. Ahora puede seguir adelante y dar a cada uno un nombre más adecuado. Para hacer esto, pase el cursor sobre el nombre de color predeterminado y haga clic para cambiarlo.
Nota: utilice nombres y convenciones de nomenclatura que son familiares para todo el equipo):
Haz lo mismo con las fuentes; actualízalos con un nombre con el que los diseñadores y desarrolladores estarán familiarizados. No olvide que está ayudando con el traspaso de desarrolladores, sino que también está creando un repositorio para que otros diseñadores lo utilicen..
Con lo que terminarás es algo como esto:
En este punto, si es parte de la operación dev, es posible que desee copiar el CSS de la columna del lado derecho. Encontrarás que está disponible en la sintaxis que prefieras; Sass, LESS, Stylus o CSS simple.
Cada regla puede seleccionarse individualmente para descargar, mientras que Comando + A Seleccionará todo para copiar y pegar..
No hay más guías de estilo obsoletas guardadas en un lugar que nadie puede encontrar, no hay más cadenas de correos electrónicos para descubrir el último color; Zeplin puede ayudar a todo su equipo a diseñar de manera eficiente. Saludos a la productividad.!
Accentsconagua