Ahora admitimos Sketch Shared Libraries y MaterialUI CSS

Última versión y documentos

Presentación de Sketch2React: componentes de código real dentro de Sketch

La mayor diferencia entre esta y otras herramientas de creación de prototipos es que usted ** diseña con código real **. Eso te da un código de alta fidelidad desde Sketch.

¿Que es esto?

¡Pase de .sketchfiles (a través de nuestro marco) al código realmente rápido!

Sketch2React es:

  • Marco, aplicación de código, complemento
  • Exportación HTML5 de componentes
  • Componente Vanilla React + React Export

De hecho, somos la única aplicación gratuita de Sketch para codificar framework que existe

vista rápida

  • ¡Diseñe con fragmentos de código que sean fáciles de aprender! Es más como Markdown
  • Totalmente receptivo
  • Cero complementos, funciona de forma nativa dentro de la aplicación Sketch
  • Forma visual de aprender más sobre el código
  • Trate la vista de capas en Sketch como un editor de código muy simple
  • Usar complementos CSS
  • Modo sin conexión y recarga en caliente
  • Cree sitios web estáticos completos directamente desde el interior de Sketch
  • Exportar a paquete HTML que incluye .html, css y todos los archivos relevantes
  • Exportar a código de reacción y componentes

Requisitos de Software

  • Boceto 56–57.1
  • Aplicación de código Sketch2React
  • OSX Mojave

¿Por qué construimos esto?

Tanto Fredrik como yo somos muy curiosos por naturaleza, y estamos totalmente obsesionados con tratar de trabajar de manera más inteligente cada día. Pensamos "oookey para que Juan diseñe cosas dentro de Sketch y luego lo envíe a Fredrik a través de Zeplin y luego Fredrik lo codifique con React". Diseño bastante estándar + procedimiento de desarrollo en 2018, ¿no crees? Sip.
Muuuy espera. ¿Qué pasaría si pudiéramos diseñar y construir cosas directamente dentro de Sketch, ya configurando cosas como columnas, márgenes, rellenos, colas de medios, etc.? ¿Y usar Bootstrap en segundo plano para obtener la famosa cuadrícula y capacidad de respuesta? Además de todos esos componentes dulces. Boom

Serendipia

En el proceso de construir un verdadero flujo de trabajo de Sketch to React, descubrimos varios "efectos secundarios" sorprendentes. Queríamos poder ver nuestros prototipos de diseño + código en nuestros teléfonos, por lo que necesitábamos poder descargar archivos .html de cada mesa de trabajo renderizados a través de nuestra aplicación React. ¡Pero espera! Las fuentes se ven extrañas. Sí, necesitamos poder tener algún tipo de {externalasset.css} para Google Fonts (u otros). Comprobar. Woooooow espera un minuto. ¿Qué más es una fuente sino también un icono? Fuentes de iconos, por supuesto!
Espere. WTF ¿Puedo construir sitios web simples ahora directamente desde Sketch? Sí tu puedes. Aquí hay una demostración de vainilla, 100% hecha dentro de Sketch.

Otra cosa genial. Resulta que construir prototipos HTML verdaderos dentro de Sketch que puede poner en sus propios servidores seguros es perfecto para las pruebas de los usuarios. Solo conecta Hotjar y listo.

Par de buenos recursos

  • Tutoriales
  • Cómo funciona
  • Hoja de trucos
  • Notas de lanzamiento