Sketch 43 llega a la ciudad con un nuevo juego. Un formato de archivo abierto!

Sketch 43 saldrá en unas pocas semanas y cambiará fundamentalmente la forma en que se jugará el juego de herramientas de diseño en los próximos años.

https://rink.hockeyapp.net/apps/0172d48cceec171249a8d850fb16276b

"Permite integraciones más potentes para desarrolladores de terceros", lo dice a la ligera. Esto es lo que ha hecho la buena gente de Bohemian Coding: abrieron el formato de archivo de Sketch en un JSON ordenado que hace posible que cualquiera pueda crear y modificar archivos compatibles con Sketch.

En caso de que te lo preguntes, así es como se ve:

Esto es solo un archivo de texto: cualquier persona con conocimientos básicos de programación puede crear archivos con este aspecto. Y ni siquiera necesitan SketchApp para hacer eso, ni necesitan estar en una Mac.

¿Te imaginas qué tipo de cosas nuevas serán posibles ahora? Una palabra: automatización de diseño (bueno, ¡dos palabras!). ¿Desea mesas de trabajo que muestren una fuente y sus variaciones, como una página de fuentes de Google? Probablemente habrá un script para generar ese archivo. Habrá sitios web desde los que puede descargar archivos Sketch recién elaborados según lo que pida, por ejemplo, una galería de imágenes, una página de destino o un formulario de registro. ¡Podrás elegir los colores de tu marca, elegir un tema, aleatorizarlo y listo! tienes un diseño Sketch para comenzar a jugar. Alguien podría incluso construir un boceto equivalente que se ejecute en el navegador. ¡Las posibilidades son muchas!

La razón por la que estoy emocionado por esto es, obviamente, por el protosship. Tenemos dos herramientas que funcionan íntimamente con Sketch: Teleport puede convertir sitios web en diseños de Sketch y UIPad puede convertir diseños de Sketch en HTML, CSS y React.

Implementamos Teleport escribiendo un plugin masivo de Sketch que crea capas y agrega textos e inserta imágenes, todo utilizando la API interna de Sketch. Sí, si eres desarrollador, lo has leído bien: la API interna de Sketch. Aquí hay un vistazo de ese código:

función createArtboard () {
  var artboard = MSArtboardGroup.alloc (). init ();
  artboard.setName (layerTree.originalName);
  relleno var = layer.style (). addStylePartOfType (0);
  fill.color = rgbaToMSColor (backgroundColor);
  var frame = layer.frame ();
  frame.setX (node.rulerX);
  frame.setY (node.rulerY);
  frame.setConstrainProportions (falso);
  frame.setWidth (node.width);
  frame.setHeight (node.height);
  layer.setName (node.originalName);
}

Esta es una aproximación del código que usamos en Teleport para crear una nueva mesa de trabajo en Sketch. Las funciones y los objetos que utilizamos (MSArtboardGroup, por ejemplo) son exactamente lo mismo que Bohemian Coding utiliza para construir Sketch. Esta es la esencia de su arquitectura de complementos: permiten que los complementos se ejecuten desde el mismo espacio de proceso que el de Sketch: no hay una API explícita ni ningún tipo de sandboxing del proceso principal. ¡Los desarrolladores de complementos tienen casi el mismo poder que los programadores de Bohemian porque los complementos tienen acceso al código interno de Sketch!

Esta libertad es lo que hizo posible el próspero ecosistema de complementos de terceros para Sketch. Y ya es uno de los principales diferenciadores de Sketch en comparación con sus competidores. Para ver la amplitud y profundidad de este ecosistema, eche un vistazo al directorio oficial de Sketch Plugin. Si Bohemian Coding no tiene la inclinación o los recursos para crear una función, la comunidad simplemente lo hace.

Esto no es accidental: Bohemian ha apoyado el ecosistema de terceros a lo largo de los años de muchas maneras. Contrataron a Ale Muñoz, extremadamente útil, como una especie de evangelista desarrollador hace unos años, y ha creado un foro con apoyo activo para desarrolladores de complementos.

Y Sketch en sí viene con un REPL incorporado en el que cualquiera puede crear un complemento en muy poco tiempo, y simplemente presione Guardar para empaquetarlo en un complemento distribuible. No hay nada más que hacer: todo está en la aplicación. Esto hace que sea muy fácil para los usuarios de Sketch comenzar a desarrollar plugins, ¡y felizmente muerden el anzuelo!

Pero no debería estar depilando a este elocuente sobre el ecosistema de complementos. No todo son mieles, rosas y donas.

¡Todo está prácticamente indocumentado! Hacer algo no trivial es doloroso. Primero tienes que buscar en la lista de correo esperando que alguien ya haya hecho tu misma pregunta, luego busca el código de otros complementos que hace cosas similares y finalmente te rindes y lo preguntas en el foro. Sin mencionar algunas buenas API whack-a-mole. Mientras construíamos Teleport y UIPad, Sherin y yo pasamos semanas mirando la clase de Sketch intentando hacer ingeniería inversa en las llamadas API que necesitábamos.

Pero quería aclarar todo esto: a pesar de que el desarrollo de complementos es indocumentado y doloroso, los desarrolladores aún construyen cosas útiles locas por encima. ¡Y no es que haya muchas opciones de todos modos! Sketch es una plataforma de programación de diseño con una gran base de usuarios y cero sustitutos. Los desarrolladores (que a menudo son usuarios avanzados) están dispuestos a soportar cualquier cosa para tener la oportunidad de programar las herramientas que usan.

Ahora, al abrir el formato de archivo, Sketch ha mejorado el juego un poco. Los competidores deben tomar nota. El principal diferenciador de Adobe XD es integrar diseño y creación de prototipos en un flujo de trabajo continuo, mientras que Figma es colaboración.

Adobe es una compañía de recursos masivos: olvídese de su base de clientes existente que les da un casi monopolio en el campo y olvide sus recursos financieros masivos. La cantidad de experiencia técnica de esa empresa en herramientas gráficas de alto rendimiento es simplemente alucinante. Prácticamente inventaron el campo.

Y Figma es una compañía fuertemente financiada con un grupo de personas muy inteligentes. Uno de los fundadores escribió un lenguaje de programación sobre el cual se construyen las partes del producto. Tienen buenos algoritmos internos, y Figma se ejecuta en el navegador, pero está escrito en C ++ de alto rendimiento que sus niños geniales transpilan a Javascript usando Emscripten.

No debería olvidar a Serif. La compañía produce herramientas que son una alternativa creíble a la suite de Adobe. Tienen un competidor de Photoshop, Affinity Photo, que hace la mayor parte de lo que hace Photoshop, pero nada de eso. También tienen una alternativa de alto rendimiento a Sketch, el Affinity Designer, que tiene excelentes críticas de sus usuarios.

A medida que salía cada uno de estos competidores, me preguntaba sobre la visión a largo plazo de Bohemian Coding. Son un negocio de arranque con un crecimiento orgánico y sostenible y no tienen los recursos para competir con Adobe y Figma para jugar el juego de creación de funciones.

Pero a Pieter Omvlee, característicamente, no le importa la competencia y hay mucho que amar en su actitud hacia los productos y los negocios. Si el equipo construyera lo que sus clientes exigían con tanta ferocidad, ya habrían intentado integrar Prototyping y la capacidad de respuesta al estilo Flexbox en Sketch, convirtiéndolo en un kludgy frankenstein en poco tiempo, tanto en términos de la experiencia del usuario como en términos de entropía de la base de código (un error irrecuperable que comete una pequeña empresa de tecnología). Un producto de software es como un organismo vivo que respira, y si lo insertas demasiado rápido, se doblará por su propio peso.

Entonces, cuando la creación de prototipos estaba de moda, Bohemian estaba construyendo apoyo para los Símbolos Anidados. Esto resolvió muchos problemas que tuve con UIPad, ¡así que estoy personalmente agradecido por eso! E invirtieron mucho en el ecosistema de terceros que tenía un mayor apalancamiento que todo lo demás. Permitió a otros crear herramientas de creación de prototipos (¡no una, sino muchas!) Que se integraban bien con Sketch, evitando el problema por completo. Y ahora han abierto el formato de archivo en sí, mientras que sus competidores ni siquiera tienen un sistema de complementos.

Si tiene curiosidad por saber más sobre el nuevo formato de archivo, escúchelo directamente de la boca del caballo: aquí está el anuncio original de Ale y la animada discusión que siguió en SketchPlugins. Hay mucho trabajo por hacer: el formato debe ser estable, debe documentarse y los desarrolladores deben sentarse y construir cosas sobre él.

Pero todo lo que discutí hasta ahora son mis observaciones personales basadas en este anuncio y bien podrían estar equivocadas. El formato abierto podría ser un efecto secundario útil de alguna otra decisión técnica, y no una motivación principal. Esa es una posibilidad real: el formato que se utilizará en Sketch 43 contiene blobs patentados que no se pueden manipular de forma independiente, y también deben abrirse para que .ketch se convierta en un formato de archivo universal para diseños basados ​​en vectores.

Pero espero que suceda y estoy encantado de pensar en las posibilidades. Ya tenemos planes para hacer algunas cosas interesantes: pequeños trucos que facilitarán la vida de su diseño y grandes mejoras en el funcionamiento de UIPad y Teleport. Podría llevarnos un tiempo construirlos, pero intentaré escribir a menudo sobre cómo están progresando las cosas. Mire este espacio para ver cosas jugosas a medida que suceden, y dígame qué piensa en los comentarios.

Enchufes a algunas buenas personas:

  • Si eres nuevo en Sketch o quieres subir de nivel, dale una oportunidad a Christian Krammer's The Sketch Handbook publicado por Smashing Magazine. ¡Tuve la oportunidad de revisar el libro y aprendí mucho de él!
  • Un agradecimiento a sketchtricks.com de Marko: un excelente boletín para aprender cosas ingeniosas sobre Sketch.
  • Y cuénteles a sus amigos desarrolladores acerca de Protoship UIPad: no más corte manual de HTML y CSS. ¡Generalos automáticamente!