Cómo crear un complemento de Sketch que conectará los símbolos de su biblioteca con cualquier documentación externa

Casi una guía paso a paso sobre cómo crear un complemento de Sketch mediante skpm

(Sergey Nikishkin) (28 de mayo de 2020)

Como ejemplo, tomaré Google Material Kit de diseño para Sketch y conecte símbolos a su descripción en material.io/components . Por supuesto, no explicaré cada línea de código, pero destacaré algunas partes que son importantes desde mi punto de vista. ¿Interesante? Entonces comencemos.

Si no está familiarizado con el desarrollo de complementos de Sketch pero desea aprender más, puedo recomendar este conjunto de 7 artículos de Marc Mariano como una guía para principiantes:

( La guía para principiantes para escribir complementos de Sketch )

Entorno

Como herramienta de construcción para nuestro complemento, usaré skpm . Esta es una utilidad que le permite crear, depurar y publicar complementos de Sketch fácilmente. Además, antes de comenzar, debe tener lo siguiente instalado en su mac:

Instalación del skpm y también como una creación de la base para el complemento es muy simple y requiere dos comandos en total. Simplemente cree una nueva carpeta, abra Terminal.app en esta carpeta e ingrese uno por uno estos comandos:

  • npm install -g skpm
  • skpm create your-plugin-name

El primer comando instala el paquete npm y todas las dependencias necesarias. El segundo crea una carpeta más que contiene un conjunto de activos para su nuevo complemento. Nuestros principales objetivos allí son:

  • my-plugin.sketchplugin: el complemento en sí que debe instalarse
  • src – la carpeta con el código fuente del complemento
Cómo se ve el resultado en el código VS
Cómo se ve el resultado en el código VS

Permítanme contarles un poco sobre manifest.json de la carpeta src. Este es un archivo JSON que contiene metadatos sobre el complemento, sus comandos y recursos. Enumera los nombres de los comandos definidos por el complemento y le dice a Sketch cómo llamar a los elementos de menú correspondientes y en qué menús colocarlos.

Además, cambiemos el nombre de a index.js y elimina todo el código interno. Un poco más tarde escribiremos algo mucho más interesante que el código que muestra “ ¡Está vivo! 🙌 ”.

El esquema

Antes de comenzar a escribir código, entendamos cómo funcionará el complemento trabajo. En primer lugar, necesitaremos tres archivos:

  • config.json: contiene enlaces que se conectarán a los símbolos
  • index.js —contiene todas las funciones principales
  • manifest.json – contiene metadatos del complemento

El esquema de trabajo
El esquema de trabajo

Entonces. Cuando seleccionamos el símbolo en la mesa de trabajo y ejecutamos el complemento, llama a una función de index.js que va a config.json, verifica la disponibilidad de el enlace para el símbolo seleccionado, devuelve la respuesta en index.js y, si se pasan todas las verificaciones, abre el recurso con la documentación. Como puede ver, la lógica es muy simple.

Funciones

Lo primero que debemos hacer es importar config.json a index.js usando el siguiente código:

La primera línea en index.js

Y ahora pasemos a las funciones.

openLink ()

En esta función, estamos usando algunas clases y métodos desde Swift API que nos ayudará a abrir enlaces externos directamente desde Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

función openLink ()
  • const {link} = config.names[name]: obtiene una cadena con la URL de config.json
  • const url = NSURL.URLWithString(link): transforma la cadena con URL en un objeto con URL
  • NSWorkspace.sharedWorkspace().openURL(url): se abre objeto con URL en su navegador predeterminado

parse ()

En esta función, estamos haciendo coincidir el objeto seleccionado en la mesa de trabajo con un objeto en config.json. Si coinciden, la función devuelve la clave con el enlace URL.

función parse ()

En mi opinión, la parte más interesante aquí es una expresión regular en la línea 13:

new RegExp(".*(" + set.join("|") + ")(\/|$), "i")

Al usar esta expresión regular podemos encontrar y hacer coincidir objetos en diferentes niveles de anidación. En nuestro caso, el objeto es el nombre del símbolo o el nombre del grupo donde se coloca el símbolo. Echemos un vistazo a la estructura de anidamiento del componente Chips y sus variantes en Material Design Kit for Sketch:

Estructura de anidamiento para el componente Chips en Material Design Kit for Sketch
Estructura de anidado para el componente Chips en Material Design Kit for Sketch

Y cómo este anidamiento en el panel de capas se puede combinar con config.json:

Cómo funciona el emparejamiento
Cómo funcionan las coincidencias

Para nuestra expresión regular, no importa en qué nivel le gustaría conectar el símbolo con documentación. La regla principal es que los nombres deben ser iguales en ambos lados. Además, no importa qué notación esté usando para agrupar símbolos, ya sea con dígitos, letras, subrayado, etc. La profundidad de la el anidamiento tampoco importa.

isValidType ()

Cuando usted ect algo en la mesa de trabajo y ejecuta el complemento, esta función verifica el tipo de objeto seleccionado. Y si el objeto tiene uno de los tipos enumerados, devuelve la respuesta con el parámetro true.

isValidType ( ) función

Solo una pequeña ventaja con la posibilidad de conectar no solo símbolos, sino grupos y formas mediante el uso de Sketch Headers.

https://developer.sketch.com/plugins/internal-api

onRun()

Permítanme citar a Mathieu Dutour, quien es el creador de skpm.

skpm también espera que usted export default function (context) {} en lugar de escribir una función onRun de nivel superior.

función onRun ()

config.json

Entonces. Es hora de preparar un archivo JSON que contendrá enlaces a documentación externa. Seleccioné tres componentes del Kit de diseño de materiales que probaremos: "Banner", "Input chip" y "Card".

config.json con datos reales

Como Como puede ver, la estructura del archivo JSON es muy simple. No olvide que el nombre del objeto en config.json debe ser el mismo que una parte del nombre del objeto en Sketch como mencioné anteriormente.

Por cierto, podemos usar no solo http:// o https:// sino también zpl:// enlaces que nos permiten abrir cualquier sección de Zeplin.app.

manifest.json

Como mencioné anteriormente, este es un archivo JSON que contiene metadatos sobre el complemento, sus comandos y recursos. La estructura final de manifest.json para nuestro complemento se ve así:

La estructura final del manifiesto. json

Más parámetros, también como una descripción detallada de cada parámetro que estamos usando en este archivo que puede encontrar en la documentación oficial.

https://developer.sketch.com/plugins/plugin-manifest

El resu Es

Es hora de volver a Terminal.app y crear un complemento:

npm run build

Eso es todo. El complemento está listo para ser instalado y probado. Finalmente hagamos eso y veamos el resultado.

¡Funciona!
¡Funciona!

En conclusión

Seamos honestos. Esto es más un experimento que un producto listo para usar y, por supuesto, no es una implementación ideal. Nuestro principal objetivo era no dedicar mucho tiempo al desarrollo y esta es la razón por la que en algunos lugares hemos utilizado aquellas soluciones que eran más simples en lugar de más correctas. Pero hemos utilizado este complemento en el trabajo diario durante más de un año.Y me gustaría decir que es brillante para los nuevos diseñadores que se han incorporado recientemente al equipo y recién empezaron a familiarizarse con los componentes que está utilizando.

Además, me gustaría agradecer mucho a Kirill Savelov y Dmitry Kozlov por su paciencia y ayuda.

Más historias sobre Design System y Tools

  • (Design System, parte 2. Iconos, fuentes SVG, Gulp)
  • (Sistema de diseño, parte 3. Herramientas de fabricación propia que usamos en el trabajo diario)
  • (ffmpeg + ImageMagick. Convertir video a GIF usando Terminal.app en macOS)
  • (Cómo optimizar imágenes mediante macOS Terminal + TinyPNG CLI)

Enlaces útiles

Siga Acronis Design en