Contente
- 01. Copiar e colar guias
- 02. Sketch Cleaner
- 03. Anima
- 04. React Sketch.app
- 05. Plugin Git Sketch
- 06. ImageOptim
- 07. Espelho Mágico
- 08. Exportar mais
- 11. Marketch
- 12. Círculos segmentados
- 13. Sketch Runner
- 14. Fonte do ícone
- 15. Encontre e substitua
Os plug-ins do Sketch ajudam a tornar o Sketch ainda melhor. Sketch é a ferramenta de design da Web de interface do usuário preferida de muitos, e parte do que o torna tão bom é a comunidade de pessoas que trabalham para estender sua funcionalidade e recursos criando plug-ins personalizados.
O gerenciamento de seus plug-ins do Sketch é agora mais fácil do que nunca. Os plug-ins são atualizados automaticamente e os desatualizados são desabilitados. Para tornar o ecossistema de plug-ins ainda mais útil, está o Sketch Cloud, um serviço de compartilhamento de arquivos em que qualquer pessoa pode se inscrever, onde você pode visualizar, baixar e comentar documentos Sketch que foram compartilhados publicamente ou em particular direto do Sketch.
Então, vamos dar uma olhada nos melhores plug-ins do Sketch - aqueles que podem mudar drasticamente a maneira como você projeta interfaces de usuário. Depois de localizar um que deseja, leia sobre como instalar plug-ins do Sketch. Se você adora suas ferramentas da web, não perca nossas ferramentas de web design favoritas, criador de sites e resumos de armazenamento em nuvem. E lembre-se, a escolha do provedor de hospedagem na web é crucial para o sucesso do seu site (nosso guia o ajudará).
01. Copiar e colar guias
- Baixe aqui
- Preço: Livre
- Resumo: Copie, cole ou remova guias de suas pranchetas
Todo designer tem uma relação de amor / ódio com os guias. Às vezes, eles são absolutamente essenciais e, no resto do tempo, eles estão apenas atrapalhando. Se você estiver usando guias em vez da opção de layout do Sketch, alterá-los para várias pranchetas pode ser um pesadelo, mas com este plug-in é fácil copiar, colar e remover guias de todas as suas pranchetas.
02. Sketch Cleaner
- Baixe aqui
- Preço: $2
- Resumo: Deixe seus arquivos de design limpos como um apito
Qualquer projeto Sketch que passou por algumas iterações está fadado a acumular um pouco de lixo ao longo do caminho, como camadas ocultas, posições de borda inconsistentes e estilos de camada não utilizados.
Embora não seja o fim do mundo ter um arquivo de Sketch bagunçado, isso pode afetar a transferência e tornará a vida mais fácil para qualquer um que tenha que entender isso no futuro. Em vez de examinar tudo manualmente, use o Sketch Cleaner para lidar com todos os problemas comuns automaticamente.
03. Anima
- Baixe aqui
- Preço: Livre para cima
- Resumo: Crie protótipos responsivos e de alta fidelidade
Anteriormente disponível como plug-ins gratuitos separados - Auto Layout e Launchpad - o Anima agora é um plug-in completo projetado para ajudá-lo a criar layouts responsivos com pinos, pilhas e preenchimento e protótipos de alta fidelidade que se ajustam a todas as telas. Ainda existe uma versão gratuita que suporta um projeto; para projetos ilimitados, o preço começa em US $ 25 por mês.
04. React Sketch.app
- Baixe aqui
- Preço: Livre
- Resumo: Renderizar componentes React para Sketch
Gerenciar ativos de design pode ser difícil no Sketch. Este prático plugin Sketch fornece uma maneira mais fácil e confiável de gerenciar seus ativos. Implemente seus projetos no código como componentes React e, em seguida, use este plug-in para renderizá-los no esboço. Também torna mais fácil buscar e implementar dados reais em seus arquivos Sketch.
React Sketch.app foi desenvolvido pela Airbnb para uso com seu sistema de design, com o objetivo de ajudar a preencher a lacuna entre designers e desenvolvedores.
05. Plugin Git Sketch
- Baixe aqui
- Preço: Livre
- Resumo: Um cliente Git integrado ao Sketch
Este plugin tem como objetivo trazer o controle de versão para o Sketch. Ele funciona exportando uma imagem para cada parte do design e, em seguida, gerando muitas diferenças para que fique claro quais alterações foram feitas. Ao documentar cada etapa do processo de design, todos na equipe podem ver como o design progrediu.
O plug-in Git Sketch foi criado por Mathieu Dutour, que desde então passou a criar um sistema de controle de versão paga mais abrangente chamado Kactus.
06. ImageOptim
- Baixe aqui
- Preço: Livre
- Resumo: Otimização de imagem no Sketch
Embora o Sketch ofereça sua própria solução para otimizar arquivos SVG, não há uma gama de opções para compactar imagens JPG e PNG. Como o ImageOptim oferece um serviço sólido há vários anos, faz sentido que ele traga essa funcionalidade para o Sketch.
Qualquer designer que se preocupa com tempos de carregamento e otimização de imagem (que devem ser todos os designers) deve adicionar ImageOptim à sua caixa de ferramentas. Observe que, além do plug-in, você precisará do aplicativo principal ImageOptim (gratuito) instalado em seu sistema macOS e ainda precisará marcar as camadas como exportáveis no Sketch (navegue até ‘Exportar e otimizar todos os ativos’ para começar).
07. Espelho Mágico
- Baixe aqui
- Preço: A partir de $ 4 / mês
- Resumo: Ferramenta de transformação de perspectiva de imagem
Se você está tentando fazer maquetes de produto impressionantes, mas precisa continuar pulando no Photoshop para lidar com as coisas complicadas, o Magic Mirror pode ser um salva-vidas para você. É uma ferramenta de transformação de perspectiva de imagem, permitindo que você crie maquetes de perspectiva e outros efeitos distorcidos sem nunca sair do Sketch.
08. Exportar mais
- Baixe aqui
- Preço: Livre
- Resumo: Gera automaticamente imagens de espaço reservado
Adicionar imagens de espaço reservado a um design é uma parte necessária da prototipagem, mas encontrar as imagens reais pode ser uma dor. Portanto, em vez de perder tempo com isso, deixe tudo para o Day Player. Isso permite que você adicione imagens de espaço reservado personalizadas a qualquer documento do Sketch, a partir de uma série de serviços de imagem de espaço reservado diferentes, de modo que a maior decisão que você terá que tomar será se deseja usar Bill Murray, Nicolas Cage ou gatinhos.
11. Marketch
- Baixe aqui
- Preço: Livre
- Resumo: Gere uma página html que pode medir e obter estilos CSS
Se você deseja recuperar estilos CSS de seus designs do Sketch, um plugin como o Marketch é absolutamente essencial. Ele permite que você exporte suas pranchetas do Sketch como um arquivo zip cheio de documentos HTML que você pode extrair para extrair bastante CSS doce, pronto para usar.
12. Círculos segmentados
- Baixe aqui
- Preço: Livre
- Resumo: Crie gráficos circulares precisos
Esta é uma maneira rápida de criar círculos segmentados para gráficos e diagramas. Este plugin pode produzir vários estilos de diagrama circular, incluindo círculos tracejados e marcados, e as espessuras são controladas por uma lista simples de valores separados por vírgulas.
13. Sketch Runner
- Baixe aqui
- Preço: Livre
- Resumo: Spotlight para pesquisa
O Sketch é muito apreciado por seu fluxo de trabalho de teclado minimalista. Dito isso, sempre há dois ou três atalhos de teclado que você sempre parece esquecer ou confundir com outro aplicativo de design como o Photoshop - e não vamos esquecer aquelas ferramentas e recursos menos comuns que não têm um atalho de teclado e estão escondidos nas profundezas do Menu Sketch.
Sketch Runner resolve esses problemas e o faz de uma maneira que os usuários do macOS estão familiarizados - Sketch Runner é o destaque do macOS, mas para Sketch.
14. Fonte do ícone
- Baixe aqui
- Preço: Livre
- Resumo: Gerenciar fontes de ícones
As fontes de ícone são uma forma altamente eficiente de usar ícones em seus designs da web sem ter que exportar e otimizar uma tonelada de ativos de imagem. Normalmente, fazemos referência a fontes de ícones no cabeça> seção de páginas da web em HTML, como fazemos com CSS e JavaScript. No entanto, usá-los no Sketch é um pouco mais complicado. Felizmente, o Icon Font torna isso mais fácil.
Depois de baixar e instalar Sketch IconFont, baixe os arquivos de fonte SVG ou baixe este pacote de fontes, que inclui os arquivos de fontes para FontAwesome, Material Design Icons, Ion Icons e Simple Line Icons. Quando terminar, navegue até Plug-ins> Fonte do ícone> Instalar um pacote de fontes, selecione as fontes baixadas na caixa de diálogo Abrir arquivo e navegue até Plug-ins> Fonte do ícone> Inserir grade> [a fonte do ícone desejada] para inserir um ícone.
Mesmo que você pretenda projetar um conjunto de ícones personalizado para o seu design, ter ícones prontos à sua disposição pode ajudá-lo com a prototipagem rápida nos estágios iniciais do design, adicionando um pouco mais de clareza / fidelidade aos seus modelos de baixa fidelidade .
15. Encontre e substitua
- Baixe aqui
- Preço: Livre
- Resumo: Encontre e substitua o texto nas camadas selecionadas
Os editores de texto não são o único lugar que você precisa localizar e substituir - eles também são úteis no Sketch. Este plugin tem muitas opções avançadas e permite que você pesquise por instâncias de palavras ou frases específicas no texto em camadas selecionadas (e tudo contido dentro) e, em seguida, substitua-as facilmente.
Próxima página: Mais plug-ins do Sketch que economizam tempo
