¿Existe una función o complemento "generar CSS / HTML" en la aplicación Sketch

13

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.

css html sketch-app plugin Rakhilya Lála Ibildayeva
fuente

Respuestas:

11

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.

Copiar atributos de CSS contexto hombres

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.

Plug-in de Sketch Measure

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.

ingrese la descripción de la imagen aquí

vestido de civil
fuente
1
Mejoré el archivo Léame de Blade con una descripción / guía de arquitectura para que otros tengan una mejor oportunidad de trabajar en él para mejorarlo aún más ... github.com/kristianmandrup/blade
2
Hemos lanzado Protoship UIPad que hace exactamente esto. Es un generador de código para Sketch que convierte diseños de Sketch en componentes HTML, CSS, SASS y React. Utiliza BEM para CSS y utiliza márgenes, rellenos, flotantes y flexbox en lugar de posicionamiento absoluto. protoship.io/tools/uipad.html .
Jasim
"Hemos lanzado" es engañoso: Protoship ha sido una lista de espera durante un año, y todavía lo es.
Chris Moschini
1

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/

Kiodour
fuente
Hola Kiodour, ¿podría explicar un poco más lo que encontraremos detrás del enlace que proporciona y por qué responde la pregunta? De esa manera, su respuesta sigue siendo valiosa en caso de que el enlace se rompa más adelante. La descomposición del enlace es la razón principal por la que realmente no nos gustan las respuestas de solo enlace aquí. ¡Gracias por tu esfuerzo y sigue contribuyendo!
AndrewH