As ferramentas de design estão em constante aperfeiçoamento e mais estão entrando no mercado a cada dia ( InVision Studio , por exemplo). Dito isso, ferramentas de design moderno como Sketch são criadas para serem mínimas, onde a ferramenta é configurada para remover todos os recursos não essenciais. É comum criar funcionalidades adicionais apenas quando necessário, e é aqui que entramos no mundo emocionante do desenvolvimento de plug-ins Sketch.

O desenvolvimento de plug-ins Sketch pode ajudar os designers para abraçar o aspecto técnico de como o Sketch realmente funciona e dar a eles a capacidade de automatizar tarefas repetitivas. Plugins Sketch são feitos com código e Sketch JavaScript API , mas como os designers não precisam ser desenvolvedores especialistas para usar essa API, este tutorial demonstra como codificar um plug-in para simplificar um processo de design e melhorar o fluxo de trabalho no Sketch.

Plug-ins de esboço simples, mas muito úteis

Muitas vezes, designers de esboço ter pelo menos três ou quatro plug-ins do Sketch instalados. Os plug-ins abaixo são básicos por natureza, mas são comumente usados ​​porque economizam muito tempo.

• RenameIt (renomear várias camadas de uma vez)
• Classifique-me (ajuda a reordenar as camadas de forma lógica)
• UnsplashIt (recupera imagens do Unsplash)
• Gerador de Conteúdo (gera nomes falsos e outros dados 'reais')

Se você está curioso para ver o que pode ser realizado com plug-ins Sketch, verifique nossa lista final de 50 plug-ins do Sketch .

o plugin RenameIt é um plugin popular do Sketch que ajuda os designers a renomear várias camadas de uma vez.

Noções básicas de JavaScript em menos de 2 minutos

Antes de começar a codificar, você precisará aprender algumas coisas sobre a sintaxe JavaScript (ou seja, a formalidade de como o código é escrito). Isso não apenas o ajudará a escrever o código para seu plugin Sketch, mas também o ajudará a entender melhor como e por que o código funciona.

Comentários

Vamos começar com os comentários do código.

Comentários de código são como notas ocultas - eles não são orientados para o usuário e, portanto, não serão exibidos no plugin do Sketch resultante. Os desenvolvedores geralmente usam esses comentários de código para explicar o código que foi escrito, portanto, se outro desenvolvedor ler o código ou retornar ao código mais tarde, eles entenderão o que foi escrito e como funciona.

// this is a single-line comment /* This is a multiline comment */

Variáveis

Variáveis ​​são como pequenos recipientes usados ​​para armazenar valores; por exemplo:

var firstName = 'Manuele Capacci'; // the variable firstName now equals 'Manuele Capacci'

Para recuperar esse valor, você deve usar a variável; por exemplo:

log(firstName); // esto grabará 'Manuele Capacci' en la consola

A janela de script em destaque: o console, usado para testar a saída.

Objetos

Os objetos podem armazenar várias variáveis, como este:

var user = { firstName: 'Manuele', lastName: 'Capacci', age: 28, role: 'Product Designer' }

Observe que o valor de `idade 'não está entre aspas. Isso ocorre porque as aspas definirão a variável como uma string, o que significa que a saída esperada deve ser literal. Nós não queremos isso; queremos que a variável seja definida como um inteiro para que possamos realizar operações matemáticas nela. Colocar aspas em torno do valor irá definir indesejavelmente o valor como uma string.

Podemos usar as variáveis ​​do objeto, assim:

// using the object's variables user.firstName; user.lastName; user.age; user.role;

Arrays

Arrays são um tipo de objeto mais simples:

var users = ['Manuele', 'Daniel', 'Miklos'] // 'users' is an array that contains a list of names user[0]; // this equals 'Manuele' user[1]; // this equals 'Daniel' user[2]; // this equals 'Miklos'

Recursos

Os recursos são acionáveis ​​- eles faço alguma coisa. No exemplo a seguir, a função calcula a soma de a e b. Neste exemplo, a isto é 2 e b isto é 3 .

// a function declaration function sum(a, b) { return a + b; } // calling the function sum(2, 3); // this equals 5 // recapitulando lo que hemos aprendido hasta ahora var total = sum(2, 3); // la variable 'total' será igual a 5 log(sum(2, 3)); // esto dará como resultado 5 en la consola log(total); // esto también dará como resultado 5 en la consola

Declarações condicionais

As instruções condicionais apenas executam o código entre colchetes se a condição especificada for atendida. No exemplo a seguir, o código é executado imediatamente porque o valor de firstName na verdade, é igual a 'Manuele'; portanto, o código else if e else não funciona.

var firstName = 'Manuele'; if(firstName == 'Manuele') { // hacer algo por Manuele } más si(firstName == 'Daniel') { // haz algo por Daniel } más { // hacer algo por alguien más }

Vamos tentar escrever algum código básico no Sketch.

Escreva sua primeira linha de código no Sketch

Navegue até 'Plugins → Executar Script' no Sketch. Nesta janela de script, você pode escrever código para fazer as coisas acontecerem no Sketch (como renomear camadas) e, em seguida, empacotar esse código em um plugin do Sketch com .sketchplugin tipo de arquivo.

Abaixo: Esta é a aparência da janela de script na primeira vez que você a abre. Você pode ver algum código com o qual não está familiarizado, mas aprenderá um pouco mais sobre JavaScript ao longo do caminho. O código padrão que já existe nesta janela informa o nome do documento de esboço, quais camadas estão selecionadas atualmente e muito mais.

Por enquanto, exclua todo o código nesta janela e substitua-o por:

log('Hello Sketch');

O que você está fazendo aqui é chamar o log e passe a string Hello Sketch como um argumento. Esse log só pode ser acessado nos bastidores, o que o torna útil para depurar código quando as coisas não estão funcionando como esperado. Se você clicar no botão 'Executar', o argumento Hello Sketch ele será registrado no console abaixo da janela de script.

Vamos cavar um pouco mais fundo.

Crie um plugin para renomear a camada de esboço

Agora você pode usar seu conhecimento de JavaScript e script do Sketch para criar um script que renomeia várias camadas de uma vez. Rodrigo Soares criou o plugin RenameIt , que atinge o mesmo e salva designers muito tempo - vamos criar uma versão simplificada. Certifique-se de criar algumas camadas de esboço para que possa testar seu script.

O código deve começar com uma linha repetida. Você precisa usar a Interface de Programação de Aplicativo (API) do Sketch - este é um termo sofisticado para um objeto especial de que você precisará se quiser interagir com o Sketch de uma maneira significativa. Nomeie este objeto API especial sketch.

Obviamente, basta renomear as camadas atualmente selecionadas. Como você descobre quais camadas estão selecionadas atualmente? A API Sketch JavaScript fornece uma maneira conveniente de obter essas informações com apenas uma linha de código.

Veja como fazer tudo isso com o código JavaScript:

// asignar el objeto API a una variable var sketch = context.api(); // asignar capas actualmente seleccionadas a una variable var selection = sketch.selectedDocument.selectedLayers;

Todas as informações sobre as camadas atualmente selecionadas estão contidas na variável selection. Agora você só precisa 'iterar' (executar algum código repetidamente) sobre as camadas para renomeá-las.

Para fins de teste, renomeie cada camada para 'Camada renomeada'.

Adicione este código ao final do seu script:

selection.iterate(function(layer) { // for every selected layer layer.name = 'Renamed Layer'; // rename to 'Renamed Layer' })

Depois de clicar em 'Executar', você verá que cada camada foi renomeada como 'Camada renomeada', mas então o usuário é perguntado qual deve ser o nome da nova camada. Vamos adaptar o script:

// pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // for every selected layer layer.name = newLayerName; // rename to the value of newLayerName })

Uma janela pop-up aparecerá solicitando que o usuário especifique um novo nome para as camadas.

Se você não tem certeza de como acessar certos contextos, como camadas atualmente selecionadas, ou como revelar uma caixa de entrada do usuário (como em cenários anteriores), você pode ler o documento oficial Documentação do desenvolvedor do Sketch , que mostrará qual código é necessário.

Quando estiver pronto para continuar, clique no botão 'Salvar ...' no canto inferior esquerdo da janela do script e dê um nome ao script. Agora você encontrará este plugin do Sketch acessível a partir do menu Sketch em 'Plug-ins', assim como todos os outros plug-ins do Sketch.

Renomear camadas no esboço - o código completo

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; // pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // para cada capa seleccionada layer.name = newLayerName; // renombrar al valor de newLayerName })

Crie um plugin de esboço “Selecionar todas as camadas em um grupo”

Agora vamos criar algo um pouco mais complexo. O seguinte plugin Sketch selecionará automaticamente todas as camadas dentro de um grupo, que você pode então adaptar para incluir apenas camadas de texto, ou apenas camadas de forma, ou pode até mesmo detectar automaticamente o tipo de camada e selecionar apenas camadas desse tipo.

Como antes, vamos começar definindo o contexto. Em seguida, você pode iterar / repetir sobre as camadas dentro desse contexto e selecioná-las automaticamente.

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo innerLayer.addToSelection(); // agregarlo a la selección }); layer.deselect(); // deseleccionar el grupo } });

Com este código, todas as camadas dentro de qualquer grupo atualmente selecionado serão selecionadas (desde que algumas sejam selecionadas). Enquanto isso, os próprios grupos serão a partir de selecionado.

Para refinar ainda mais esse script, você pode incluir uma instrução condicional que verifica se a camada é de um tipo específico. Digamos que você deseja selecionar especificamente todas as camadas texto em um grupo - para fazer isso, em cada iteração, verifique o tipo de camada de cada camada, assim:

if(innerLayer.isText) { innerLayer.addToSelection(); }

Selecione todas as camadas de texto em um grupo: o código completo

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo if(innerLayer.isText) { // solo si la capa es una capa de texto innerLayer.addToSelection(); // agregar a la selección } }); layer.deselect(); // deseleccionar el grupo } });

Você pode aprimorar este script de várias maneiras, usando o documentação como referência:

• Permitir que o usuário selecione apenas formas
• Permitir que o usuário selecione apenas imagens
• Caso nenhum grupo seja selecionado, seleciona automaticamente o grupo principal, permitindo ao usuário selecionar camadas de tipo semelhante
• Se o grupo tiver grupos aninhados dentro dele, processe da mesma maneira

conclusão

Se você estiver curioso sobre o desenvolvimento de plug-ins Sketch que outros designers possam usar, dê uma olhada em SKPM (Gerenciador de plug-ins do Sketch). SKPM permite que os designers empacotem seus plug-ins no formato de arquivo .sketchplugin , o que torna o plug-in instalável. Durante esse processo, os desenvolvedores de plug-ins também podem definir atalhos de teclado para ações de plug-ins.

Um designer que sabe como codificar plug-ins do Sketch é um designer que sabe como melhorar seu fluxo de trabalho e trabalhar mais rápido quando necessário, liberando mais tempo para entregar um produto final de alta qualidade. Além disso, aprender como o Sketch funciona nos bastidores é uma grande oportunidade de mergulhar no mundo do JavaScript.