10 Melhores Plugins de Sketch para Designers de UX / UI em 2018

Annie Dai Blocked Unblock Seguir Seguindo 17 de dezembro de 2018

Este artigo resume 10 melhores plug-ins de Sketch para designers de UX / UI em 2018, o que pode ajudar a agilizar seu fluxo de trabalho de design.

No meu artigo anterior, apresentamos os tutoriais e recursos básicos do Sketch. Além da característica básica do design vetorial, os plugins são Cheats únicos que tornam o Sketch poderoso. Eu resumi os 10 melhores plugins Sketch para você. Agora divirta-se com o Sketch!

1. Marketch

Depois de terminar os mockups, muitas vezes precisamos dizer aos desenvolvedores front-end, o tamanho concreto das imagens, o tamanho do texto e o espaçamento, Marketch fará com que você fique cheio de surpresas.

O Marketch é um plug-in do Sketch 3 para gerar automaticamente páginas HTML que podem medir e obter estilos CSS, permitindo recursos super práticos, como anotação dinâmica, conversão de unidades e fatiamento dinâmico.

Ele pode ajudar os designers não apenas a reduzir a carga, mas também a verificar os parâmetros de layout de todos os elementos, até mesmo o código CSS. Além disso, esse plug-in pode gerar HTML localmente e você não precisa se preocupar com problemas de segurança e privacidade.

Download : https://github.com/tudou527/marketch

Tutorial:

Etapa 1: Executar o marketch -> Exportar como arquivo zip

Etapa 2: nomeie e exporte.

Etapa 3: descompacte o zip e execute o arquivo Html para verificar o efeito no navegador

Demonstração: http://tudou527.github.io/marketch/

2. Gerador de Conteúdo

Quando criamos algumas páginas, talvez seja necessário preencher os dados para melhorar a fidelidade. O mais comum é preencher uma variedade de avatares diferentes, que são os melhores para serem diferentes uns dos outros. Não se preocupe, este plugin será capaz de alcançar rapidamente este efeito. Você só precisa selecionar todos os elementos necessários, ele irá selecionar aleatoriamente e preencher o Avatar certo.

Além da imagem, o plugin também pode gerar aleatoriamente nome de usuário, caixa postal e número de telefone. Isso poderia melhorar muito a eficiência para fazer a lista de contatos.

Download: https: //github.com/timuric/Content-generator-sketc …

3. iDoc

O iDoc é uma poderosa ferramenta de colaboração de design de produto para designers e engenheiros. Facilita muito a transferência tirando projetos do Sketch, PS, Adobe XD e exportando-os para um formato que pode gerar facilmente trechos de código, especificações, recursos, guias de estilo, protótipos interativos, etc. No iDoc, os designers podem:

  • Exportar designs com um clique do Sketch, Adobe XD e Adobe Photoshop
  • Designs de handoff com especificações precisas, ativos, snippets de código automaticamente
  • Receba notificações de comentários e comentários atualizados imediatamente, importe e atualize seu design existente novamente se houver alterações
  • Colete e organize guias de estilo automaticamente para criar o repositório de design de sua equipe

Download: https://idoc.mockplus.com/download/sketch

Tutorial:

Passo 1: Baixe o plugin Sketch grátis e instale-o.

Passo 2: Quando terminar o seu projeto, selecione “Plugins” – “iDoc”

Etapa 3: selecione as camadas que você deseja carregar como recursos e clique em "Tornar exportável".

Etapa 4: faça o upload das pranchetas selecionadas no plug-in do iDoc

Passo 5: Em seguida, os designs e ativos foram exportados para o iDoc com sucesso. Você pode continuar seu trabalho e colaborar com seus colegas de equipe no iDoc.

4. Renomeie

Durante o design, geralmente precisamos modificar o nome do gráfico em lotes. Os nomes são preferíveis para refletir as propriedades e parâmetros da camada, você pode rapidamente e facilmente encontrar a camada desejada. Renomeie-o será seu grande assistente.

Download: https://github.com/rodi01/RenameIt

Tutorial:

Etapa 1 : selecione os elementos que precisam ser nomeados em lotes

Etapa 2: selecione Plug-ins> Renomeie-o, nomeando as regras na janela pop-up. Os dados% W% H são variáveis e serão preenchidos automaticamente de acordo com o tamanho da imagem. O que só precisamos fazer é definir as regras e clicar em OK.

Vídeo:

1) Estenda o nome da camada: digite “+” e o texto que você deseja adicionar. (por exemplo: botão +)

2) Nomeie a ordem das camadas: Digite “% N” para nomear a ordem das camadas com o sufixo numérico. "% N" é o número com a ordem inversa. (por exemplo, item% N)

3) Retenha e mova o nome da camada original : Digite um novo nome de camada, use o “*” em vez do nome da camada original. (por exemplo, grande botão *)

4) Adicione o comprimento e a largura da camada: digite “% W” e “% H” para adicionar o comprimento e a largura da camada. (por exemplo, retângulo% w ou retângulo% wx% h)

5. IconFlower

Este plugin é muito apropriado para fazer o popular fundo multi-icon, você não precisa arrastar mecanicamente o ícone um por um para as diferentes partes da tela, mas só precisa colocar todos os materiais em uma tela, selecionar todos e clicar em IconFlower, ele pode organizar automaticamente todo o seu ícone.

Download: https://github.com/avadhbsd/IconFlower

Tutorial:

Etapa 1: Instale o plugin IconFlower no Sketch.

Etapa 2: crie uma prancheta e coloque cargas de ícones / objetos / camadas na prancheta. Você pode usar o Iconjar para arrastar as camadas, quanto mais, melhor.

Etapa 3: selecione todos os ícones / objetos / camadas que você deseja organizar.

Etapa 4: execute o plug-in.

6. Espelho Mágico

Com o Magic Mirror, você pode transformar facilmente o design de nossa prancheta em um modelo de cena realista, sem ter que usar mais o Photoshop.

Tutorial:

Arraste a imagem do modelo para o esboço, verifique se a imagem e seu desenho não estão em uma prancheta. Você pode arrastá-lo para outro local na área de trabalho.

Em seguida, use a caneta para desenhar um retângulo irregular onde a maquete precisa mostrar a interface (é necessário certificar-se de que existem apenas quatro pontos e não usar a ferramenta Retângulo Arredondado, o que anulará o plug-in). área como mostrado abaixo.

O próximo passo é muito importante, selecione os gráficos vermelhos, o nome desta camada chamada artboard e você está pronto para nomear o mesmo, como o mockup chamado estático. O nome de Artboard também precisa ser um modelo.

Selecione o retângulo vermelho e execute o plugin do menu> Espelho Mágico> Espelho Mágico!

7. paleta de cores de design de materiais

Esse complemento gera rapidamente as versões de cores do Material Design no Sketch.

Endereço para download: https://github.com/t32k/material-design-color-palette

8. BaseAlign

As ferramentas de alinhamento no Sketch são boas para formas, mas menos amigáveis para camadas de texto, e o alinhamento de texto que acompanha o sketch é baseado na caixa de texto externa, não no texto em si. Como resultado, as caixas de texto de tamanhos diferentes são alinhadas para cima e para baixo, uma bagunça.

Quando alinhado, o plug-in BaseAlign se alinha à própria linha de base do texto, em vez de uma caixa de texto, garantindo que a caixa de texto esteja perfeitamente alinhada ao texto real, independentemente do tamanho.

Endereço de download: https://github.com/abynim/BaseAlign

9. Lote Criar Símbolos

O símbolo aumenta muito a unidade da interface no design da interface do usuário, mas há uma coisa particularmente problemática no esboço, que é que você só pode criar um símbolo por vez.

Batch Create Symbols plug-in, você pode fazer todas as camadas selecionadas, ao mesmo tempo em um símbolo. Você pode até mesmo nomear em lote o símbolo ou usar o nome da camada diretamente. Um plug-in altamente recomendado.

Endereço para download: https://github.com/demersdesigns/sketch-batch-create-symbols

10. SketchDistributor

Comparado com a ferramenta de alinhamento integrada do Sketch, o SketchDistributor é mais preciso e fácil de usar.

O SketchDistributor pode ajudá-lo a selecionar um conjunto de camadas, inserir um valor, escolher uma distribuição horizontal ou vertical e, quando confirmado, obterá o espaçamento exato no nível do pixel.

Endereço para download: https://github.com/PEZ/SketchDistributor

Conclusão:

Os itens acima são os 10 melhores plugins do Sketch que recomendo para todos. Armado com esses poderosos plugins Sketch, acredito que você possa ter um melhor desempenho no design. Claro, se você tiver uma recomendação melhor, por favor deixe um comentário nos comentários.