Obteniendo el código CSS de tus diseños en Zeplin

Como cada semana, traigo un post en el que hablaremos de algo nuevo, o en el que te enseñaré algo.

En esta ocasión continuaremos hablando sobre diseño ya que les traigo una noticia fascinante. Diseñadores siempre han querido generar el código CSS de sus diseños "automágicamente", sin necesidad de escribirlo, ya que es algo muy gratificante para ellos y muy fácil para los desarrolladores, y si eres ambos, mejor todavía C:

El equipo de Product Design de Zeplin, una app que nos permite exportar nuestros artboards de Sketch para comunicarlas a el desarrollador, de manera parecida a lo que hicimos con Marvel en el post anterior durante este último tiempo estuvo viendo la manera de hacer esto posible así que como no les convencieron las alternativas en cuanto a plugins y sistemas que había hicieron su propio método.

Desde el día de ayer, en tu proyecto de Zeplin puedes hacer click en cualquier elemento y en el lado derecho entre otros elementos que nos ayudarán a desarrollar, encontraremos el CSS:

Añadiendo colores a la paleta y usándolas en el CSS como variables

Para coger cualquier color de el diseño y añadirlo a el apartado de la paleta que se encuentra en StyleGuide haremos click sobre las gotas de agua que se encuentran al lado del color cuando seleccionamos algo de el artboard, tal que así:

Es un gran avance que estas plataformas poco a poco implementen este tipo de ideas para hacer un desarrollo más ágil y sencillo.

Enlaces Relacionados

Generating CSS (that makes sense) from designs