Como construir um plugin Sketch que conectará símbolos de sua biblioteca com qualquer documentação externa

Quase um guia passo a passo sobre como construir um plugin Sketch usando skpm

(Sergey Nikishkin) (28 de maio de 2020)

Como exemplo, pegarei o Google Material Kit de design para Sketch e conecte os símbolos às suas descrições em material.io/components . Claro, não vou explicar cada linha de código, mas vou destacar algumas partes que são importantes do meu ponto de vista. Interessante? Então vamos começar.

Se você não está familiarizado com o desenvolvimento de plug-ins do Sketch, mas deseja aprender mais, posso recomendar este conjunto de 7 artigos de Marc Mariano como um guia prático para iniciantes:

p> ( O guia do iniciante para escrever plug-ins de Sketch )

Ambiente

Como uma ferramenta de construção para nosso plug-in, usarei skpm . Este é um utilitário que permite construir, depurar e publicar plug-ins do Sketch com facilidade. Além disso, antes de começarmos, você deve ter os seguintes itens instalados no seu mac:

Instalação do O skpm e também como a criação da base para o plugin é muito simples e requer dois comandos no total. Basta criar uma nova pasta, abrir Terminal.app nesta pasta e inserir um a um estes comandos:

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

O primeiro comando instala o próprio pacote npm e todas as dependências necessárias. O segundo cria mais uma pasta que contém um conjunto de ativos para seu novo plugin. Nossos alvos principais são:

  • my-plugin.sketchplugin – o próprio plugin que deve ser instalado
  • src – a pasta com o código fonte do plugin
Como o resultado aparece no código VS
Como o resultado aparece no código do VS

Deixe-me falar um pouco sobre manifest.json da pasta src. Este é um arquivo JSON que contém metadados sobre o plug-in, seus comandos e recursos. Ele lista os nomes de quaisquer comandos definidos pelo plug-in e diz ao Sketch como chamar os itens de menu correspondentes e em quais menus colocá-los.

Além disso, vamos “bravamente renomear my-command.js para index.js e remove todo o código interno. Um pouco mais tarde, escreveremos algo muito mais interessante do que o código que mostra “ Está vivo! 🙌 ”mensagem.

O esquema

Antes de começar a escrever o código, vamos entender como o plugin irá trabalhos. Em primeiro lugar, precisaremos de três arquivos:

  • config.json – contém links que serão conectados aos símbolos
  • index.js – contém todas as funções principais
  • manifest.json – contém metadados de plug-in

O esquema de trabalho
O esquema de trabalho

Então. Quando selecionamos o símbolo na prancheta e executamos o plug-in, ele chama uma função de index.js que vai para config.json, verifica a disponibilidade de o link para o símbolo selecionado retorna a resposta em index.js e, se todas as verificações forem aprovadas, abre o recurso com documentação. Como você pode ver, a lógica é muito simples.

Funções

A primeira coisa que devemos fazer é importar config.json para index.js usando o código abaixo:

A primeira linha em index.js

E agora vamos passar para as funções.

openLink ()

Nesta função, estamos usando algumas classes e métodos da API Swift que nos ajudará a abrir links externos diretamente do Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

função openLink ()
  • const {link} = config.names[name] – obtém uma string com o URL da configuração.json
  • const url = NSURL.URLWithString(link) – transforma string com URL em objeto com URL
  • NSWorkspace.sharedWorkspace().openURL(url) – abre objeto com URL em seu navegador padrão

parse ()

Nesta função, estamos combinando o objeto selecionado na prancheta com um objeto em config.json. Se houver correspondência, a função retorna a chave com o link do URL.

função parse ()

Na minha opinião, a parte mais interessante aqui é um regex na linha 13:

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

Usando neste regex podemos encontrar e combinar objetos em diferentes níveis de aninhamento. No nosso caso, o objeto é o nome do símbolo ou o nome do grupo onde o símbolo está colocado. Vamos dar uma olhada na estrutura de aninhamento do componente Chips e suas variantes no Material Design Kit para Sketch:

Estrutura de aninhamento para o componente Chips no Material Design Kit para Sketch
Estrutura de aninhamento para o componente Chips no Material Design Kit para Sketch

E como este aninhamento no painel de camadas pode ser combinado com config.json:

Como funciona a correspondência
Como funciona a correspondência

Para o nosso regex, não importa em que nível você gostaria de conectar o símbolo com documentação. A regra principal é que os nomes devem ser os mesmos em ambos os lados. Além disso, não importa qual notação você está usando para agrupamento de símbolos, seja com dígitos, letras, sublinhado e assim por diante. A profundidade do aninhamento também não importa.

isValidType ()

Quando você seleciona ect algo na prancheta e executa o plugin, esta função verifica o tipo de objeto selecionado. E se o objeto tiver um dos tipos listados, retorna a resposta com o parâmetro true.

isValidType ( ) function

Apenas um pequeno bônus com a possibilidade de conectar não apenas símbolos, mas grupos e formas usando cabeçalhos de esboço.

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

onRun()

Deixe-me citar Mathieu Dutour, que é o criador do skpm.

skpm também espera que você export default function (context) {} em vez de escrever uma função onRun de nível superior.

função
onRun ()

config.json

Então. É hora de preparar um arquivo JSON que conterá links para documentação externa. Selecionei três componentes do Material Design Kit que iremos testar: "Banner", "Input chip" e "Card".

config.json com dados reais

Como como você pode ver, a estrutura do arquivo JSON é muito simples. Apenas não se esqueça de que o nome do objeto em config.json deve ser o mesmo que uma parte do nome do objeto no Sketch, conforme mencionei acima.

A propósito, podemos usar não apenas http:// ou https://, mas também zpl:// links que nos permitem abrir qualquer seção Zeplin.app.

manifest.json

Como mencionei acima, este é um arquivo JSON que contém metadados sobre o plugin, seus comandos e recursos. A estrutura final de manifest.json para nosso plug-in é semelhante a:

A estrutura final do manifesto. json

Mais parâmetros, também como uma descrição detalhada de cada parâmetro que estamos usando neste arquivo, você pode encontrar na documentação oficial.

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

O resu lt

É hora de voltar ao Terminal.app e construir um plug-in:

npm run build

É isso. O plugin está pronto para ser instalado e testado. Vamos finalmente fazer isso e olhar o resultado.

Funciona!
Funciona!

Concluindo

Sejamos honestos. Este é mais um experimento do que um produto pronto e, claro, não é uma implementação ideal. Nosso principal objetivo era não perder muito tempo no desenvolvimento e por isso em alguns lugares utilizamos soluções mais simples do que corretas. Mas usamos esse plugin no trabalho do dia-a-dia há mais de um ano.E eu gostaria de dizer que é brilhante para novos designers que recentemente entraram na equipe e começaram a se familiarizar com os componentes que você está usando.

Além disso, gostaria de agradecer muito a Kirill Savelov e Dmitry Kozlov pela paciência e ajuda.

Mais histórias sobre o sistema de design e ferramentas

  • (Sistema de design, parte 2. Ícones, fontes SVG, Gulp)
  • (Sistema de design, parte 3. Ferramentas feitas por nós mesmos que usamos no trabalho do dia-a-dia)
  • (ffmpeg + ImageMagick. Converta vídeo em GIF usando Terminal.app no macOS)
  • (Como otimizar imagens usando o macOS Terminal + TinyPNG CLI)

Links úteis

Siga o Acronis Design no