Plugins de esboço são surpreendentes. Há toda uma comunidade de pessoas construindo e compartilhando ferramentas que melhoram nossos fluxos de trabalho. Eu estava curioso sobre esses plugins e queria ver se eu poderia fazer algo sozinho. Acontece que eles não são muito assustadores! Tudo o que você precisa é de algum conhecimento de Javascript, um pouco de tempo e baldes de determinação.
Ao pensar sobre o tipo de plugin que eu poderia fazer, minha mente foi imediatamente para o File Cleaner da Monzo . Eles criaram um plug-in do Sketch que lidou com muitas das tarefas manuais fornecidas com um sistema de design rígido. Isso me fez pensar. Como seria um plugin personalizado para o nosso sistema de design?
Aqui está o processo pelo qual passei para criar um plug-in adaptado aos sistemas sob medida de nossa equipe de design.
Encontrando a necessidade
Seguir um guia para iniciantes me deu uma ótima base e logo quis construir algo mais complexo. Algo que resolveria uma necessidade real.
Para encontrar inspiração, observei como nossa equipe já estava usando o Sketch. Temos uma biblioteca de símbolos bastante extensa e complexa que cresce à medida que adicionamos novos recursos e produtos. Esse tipo de sistema tem grandes benefícios para nós, mas também vejo algumas áreas para melhoria:
- Plugins de gerador de conteúdo padrão não se encaixam em nossas necessidades específicas. Os formatos de data que usamos em nossos designs são algo que ainda temos que preencher em nós mesmos.
- Ainda precisamos alterar os campos individualmente para substituições de símbolos. Isso pode ser demorado quando você precisa alterar muitos valores e isso nos deixa propensos a cometer erros.
- Cada membro da nossa equipe tem sua própria seleção de plugins.Não existe uma única ferramenta que satisfaça todas as nossas necessidades individuais. Todos nós encontramos nossa própria maneira de resolver problemas usando plugins, o que pode levar a saídas inconsistentes.
- Nós fazemos os dados do placeholder sem basear em um cenário da vida real. Isso pode criar projetos enganosos; Dados falsificados em projetos têm muitos impactos negativos .
- A atualização de elementos pode exigir conhecimento prévio específico. Às vezes recebemos solicitações para criar designs com conteúdo alternativo para diferentes casos de uso e regiões. O fornecimento dessas informações no formato correto pode levar tempo, e podemos fazer coisas erradas se nossas fontes não estiverem corretas.
Construindo uma solução
Com os problemas em mente, comecei a pensar sobre o que poderia criar primeiro. Eu queria alcançar pelo menos as três coisas a seguir:
- Gere conteúdo para camadas de texto que se ajustem às nossas diretrizes de formatação. Isso incluía coisas como chaves de identificação e carimbos de data.
- Renomeie as camadas dependendo do conteúdo, para consistência e organização.
- Gere conteúdo pseudo-aleatório para símbolos. Assim, poderíamos atualizar os valores dos símbolos automaticamente, mas tornar o conteúdo preciso para os cenários da vida real.
Pesquise
Embora eu tenha experiência em Javascript, já fazia algum tempo desde que eu escrevi qualquer coisa nessa escala. Passei tempo lendo o código fonte de outros plugins, o que me ajudou a entender como alguém o construiu. Isso é especialmente útil para pegar trechos de código que você pode usar em seu próprio plugin.
Um exemplo particularmente útil para mim foi o Content Generator . Ver como esse plug-in referenciou recursos de imagem e usou arquivos JSON para manter conjuntos de dados globais foi útil para mim.
Comece com a versão um
Para começar, começo a olhar para os dois requisitos mais simples que defini. Manipular strings de texto é simples e já tínhamos diretrizes sólidas sobre o formato necessário.
A primeira versão do plugin que fiz só geraria datas aleatórias em camadas de texto destacadas, mas era um começo. Esta função pequena e simples resolveu um problema conhecido, que já fez este exercício valer a pena para mim.
O próximo estágio foi descobrir como transferir informações entre elementos no Sketch. Depois de passar muitas horas vasculhando a documentação da API do Sketch, finalmente peguei o jeito das coisas.
Esta é uma maneira rápida de atualizar os nomes das camadas de texto. A função disso também pode ser expandida para incluir coisas como símbolos e formas. Eu adicionei um trecho para minha solução final. Não é perfeito, mas deve ajudar a mostrar como essa coisa funciona sob o capô.
Iterar
À medida que aprendi mais sobre os plug-ins do Sketch, consegui criar recursos mais complexos. Passei algum tempo observando como podemos extrair detalhes de um arquivo externo. Isso tornaria muito fácil fazer alterações no futuro sem precisar tocar as funções no código.
O arquivo à direita é a coleção de conteúdo que eu quero inserir aleatoriamente nos meus símbolos. No momento, são mensagens de status para dois tipos diferentes de símbolos, ações para botões e teclas para ícones em nossa biblioteca de símbolos.
O arquivo à esquerda é a função que coloca este conteúdo em quaisquer símbolos selecionados e compatíveis. Podemos dizer que tipo de símbolo é destacado e podemos alterar as substituições de símbolo de acordo.
Este utilitário já tem muito potencial. Combinado com a funcionalidade de geração de data de antes, podemos preencher nossos símbolos com conteúdo realista. Versões futuras podem garantir que o conteúdo se alinhe. Por exemplo, poderíamos combinar os ícones com o texto do conteúdo ou evitar botões duplicados no mesmo item da lista.
Compartilhe e receba feedback
Nossa equipe de projeto está passando por uma fase de crescimento e mudança. Estamos fazendo novos processos e refinando os atuais. Um plugin do Sketch pode ser outro recurso que todos nós compartilhamos e trabalhamos juntos como parte de nosso kit de ferramentas de design.
Seja qual for o plug-in que você fizer, pode se tornar uma oportunidade para que todos em sua equipe façam uptillers. Um sistema de design é algo que todos da equipe devem sentir alguma responsabilidade. Pertence a todos nós.
Impacto de medição
Essas primeiras iterações marcam o início de uma jornada. Este plugin é tão novo e novo, mas já estamos vendo os benefícios de ter uma sob medida para as necessidades da nossa equipe.
- Estamos economizando tempo ao gerar conteúdo e podemos ter certeza de que está correto.
- Todos os dados gerados usando um plug-in serão precisos e realistas. Qualquer pessoa pode atualizar o banco de dados de conteúdo usado para geração com novos casos de uso.
- Eu construí a biblioteca de ativos que o plug-in usa de forma a torná-la facilmente extensível. Ele também é construído para que, se criarmos um novo símbolo de biblioteca, haja a possibilidade de eles extraírem recursos da mesma biblioteca de recursos.
Quando temos a necessidade de automatizar outra coisa, há sempre o potencial de construí-lo em nosso próprio plugin Sketch. Ter esse nível de flexibilidade nos permite criar ferramentas que atendam perfeitamente às nossas necessidades.
A codificação não é uma habilidade obrigatória como designer, mas para mim é inestimável ao criar ferramentas e recursos que são úteis para outras pessoas.