Encontré un script que hace exactamente eso (genera CSS y HTML para las capas y ofrece una opción para exportarlos en% de valores) y corta el trabajo para el desarrollador web a la mitad para Photoshop. Ahora tengo curiosidad por saber si alguien se ha encontrado con un complemento o puede señalarme una función nativa como esa para la aplicación Sketch. La ausencia de tales está haciendo que mi transición a Sketch sea realmente dolorosa. O siendo nuevo en Sketch, me falta algo ideológicamente diferente sobre la forma en que Sketch funciona con CSS y HTML.

Puede que esta no sea la respuesta que está buscando, pero me parece mejor que entregar estilos mediocres y autogenerados a los ingenieros.

Marcado selectivo

Estoy seguro de que has descubierto el capturador de CSS del menú contextual de Sketch. Puede seleccionar tantos objetos como desee y obtendrá el CSS en su portapapeles más rápido de lo que puede pegarlo.

No hay selectores, por supuesto, solo son notas CSS. Cada bloque es llamado por un comentario anterior usando el nombre de la capa, de esta manera:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

Anotación de archivo

Sketch Measure es un complemento que genera varios niveles de anotación de acuerdo con sus especificaciones. Hay un video de demostración aquí . La idea básica es anotar los números importantes y dejar que el desarrollador escriba su propio código.

Más allá de la anotación

También puede probar herramientas como estas, solo o en combinación:

• Zeplin crea una versión independiente y compartible de su diseño Sketch para la inspección de su desarrollador, sacando especificaciones a pedido.
• Marvel es una herramienta de creación de prototipos que importa archivos de Sketch. ¡Nada se comunica como un prototipo interactivo!

Generador HTML experimental

Nunca he usado esto, y está claramente en las primeras etapas de desarrollo, pero el complemento Blade parece prometedor.

Blade es un complemento de Sketch 3 para generar automáticamente HTML. Generará etiqueta <div> para grupo, etiqueta <p> para texto, etc.

Ver los siguientes enlaces http://blog.mengto.com/the-best-hidden-features-in-sketch/

Siga el blog de Meng To para mantenerse actualizado con interesantes tutoriales, consejos e incluso trucos de Sketch. http://blog.mengto.com/ https://designcode.io/