12 Plugins Essential Sketch Free
Quando o Sketch 44 sai da versão beta, damos uma olhada em um dos melhores recursos do Sketch: a enorme seleção de plugins de código aberto.
A comunidade do Sketch é extremamente favorável e você pode encontrar muitos plugins incríveis que melhorarão radicalmente seu fluxo de trabalho. Neste post eu vou cobrir os 12 melhores plugins do Sketch que todo designer deve ter.
1. Medida de esboço
Medida de esboço ajuda designers a organizar e delinear seu trabalho para desenvolvedores, gerentes de projeto e outros membros da equipe.
Mas isso também é incrivelmente útil para lobos solitários que projetam e codificam todos os seus projetos. Com o plug-in Medir, você pode destacar elementos que mostram dimensões específicas de largura / altura para obter as medidas adequadas de imediato.
Isso inclui todos os elementos da página, como botões, texto, ícones e até mesmo partes importantes da prancheta.
Com o Sketch Measure, você pode até mesmo exportar páginas para HTML / CSS com estilos de página in-tact. Concedido existem Ferramentas da Adobe que pode fazer isso também. Mas ter toda essa funcionalidade no Sketch torna o seu trabalho muito mais fácil.
2. InVision Craft
Um tempo atrás, a equipe da InVision anunciou um novo plugin Construir . Mas isso é mais como um conjunto de plugins onde você obtém muitos recursos e atalhos extras.
Um exemplo é o Plugin de dados que permite que os designers coloquem textos / dados diretamente de APIs públicas na web. Dessa forma, você pode preencher automaticamente seu aplicativo com conteúdo real e imagens em tempo real.
Os desenvolvedores do InVision estão constantemente atualizando o Craft com novos recursos de plugins para tornar isso ainda mais valioso para os designers. E eu mencionei isso é totalmente gratuito?
Até agora, o Craft possui 6 recursos principais de plug-in, e todos valem a pena adicionar em seu fluxo de trabalho de design.
- À mão livre - colaboração em tempo real no Sketch
- Protótipo - prototipagem dinâmica de alta fidelidade
- Sincronizar - sincronização instantânea entre os protótipos e o esboço da InVision
- Dados - extrair dados reais da web para a sua maquete do Sketch
- Biblioteca - recursos de design na nuvem compartilháveis com toda a sua equipe
- Duplicado - clonagem de UI extremamente rápida
Dê uma olhada no Página inicial de artesanato e veja o que você pensa. Depois de experimentar, você nunca mais vai querer voltar.
3. Sketch Toolbox
Todo usuário do Sketch deve saber sobre o Caixa de ferramentas de esboço . É um gerenciador de plugins requintado que apenas facilita muito a instalação / personalização de seus plugins.
Com essa caixa de ferramentas, você pode navegar por centenas de plug-ins do Sketch e escolher quais deseja instalar. Basta clicar no que quiser e ele será automaticamente baixado para o seu computador, pronto para uso.
E o Sketch Toolbox atualiza automaticamente os plugins para mantê-los funcionando sem problemas.
Tecnicamente, isso ainda está em beta e está sempre recebendo novas atualizações no GitHub . Mas eu acho que é sólido o suficiente para usar em um fluxo de trabalho de produção. Na verdade, eu diria que um bom fluxo de trabalho do Sketch não seria completo sem esse incrível gerenciador de plugins.
4. Ativos de Exportação
Uma das tarefas mais detalhadas de um designer é alocar recursos e compartilhá-los com os desenvolvedores. Todos os pequenos ícones, gráficos, padrões de fundo, todos estes precisam ser exportados (geralmente à mão).
o Plug-in de Ativação de Exportação torna este processo uma brisa. Apenas observe que esse plug é feito especificamente para aplicativos móveis em que os designers precisam exportar os recursos da interface do Android / iOS. Isso inclui ativos de retina para tamanhos de tela @ 2x e @ 3x.
Eu não vi nenhum recurso relacionado ao web design da retina, mas você pode conferir Exportador de esboços plugin também. Está atualmente em versão beta e deve ser uma versão melhorada do original.
5. Gerador de Conteúdo
O plugin Craft que mencionei anteriormente oferece geração de conteúdo. Mas você pode querer algo um pouco mais simples assim Gerador de Conteúdo por Timur Carpeev.
Com isso instalado, você pode preencher automaticamente vários elementos do Sketch de uma só vez com dados relacionados, como:
- Avatares do usuário
- Primeiro e último nome
- Texto de parágrafo fictício
- Sequências personalizadas (geos, preços, números de cartões CC, etc.)
Todo o conteúdo é extraído de bancos de dados de código aberto como Unsplash e Uinames então você pode usar isso em vários projetos, comerciais ou não.
6. Looper
O Photoshop possui seu próprio painel Actions, onde é possível automatizar ações repetidas. Esboço não tem um painel como este, mas tem o Plugin Looper que é totalmente gratuito e super fácil de aprender.
Isso é mais útil para criar padrões de repetição que ocupam toda a página. Os designers gráficos podem encontrar mais uso para esse plug-in do que os web designers, mas ele pode economizar muito tempo fazendo um loop por meio de tarefas repetitivas de dimensionamento / duplicação.
Dê uma olhada no Página inicial de Looper para ver o que pode fazer. Pode não ser útil para todos, mas para aqueles que podem usá-lo você se verá poupando muito tempo.
7. Esboço Iconfont
Web designers adoram fontes de ícones . Grandes ícones tornam o design da UI muito mais fácil e os arquivos de fontes são geralmente menores que as imagens.
o Sketch Iconfont plugin é um conjunto completo de gerenciamento para armazenar, classificar e extrair fontes de ícones diretamente no Sketch. Por padrão, o plugin vem vazio, então você precisa baixar fontes de ícones localmente para usá-las.
Mas isso lhe concede acesso completo ao trabalho com qualquer ícone de fontes que você encontra online. Há realmente um pacote de fontes feita especificamente para este plugin, se você estiver procurando preencher sua pasta iconfont rapidamente. E você sempre pode vasculhar a web por mais tempo.
Eu absolutamente recomendo pegar uma cópia deste plugin. Fontes de ícone estão aqui para ficar e são inestimáveis para sites modernos.
8. Inventário de Estilo
Sempre que você inicia um novo arquivo Sketch, é necessário refazer os estilos do zero ou copiar / colar estilos de modelos anteriores.
Com o Plugin de Inventário de Estilo você pode ignorar todo esse trabalho extra. Apenas alguns cliques importam todos os seus estilos anteriores diretamente para o novo documento do Sketch para facilitar o acesso.
Esses estilos incluem cores, estilos de texto e símbolos, além de estilos de camada para determinados elementos.
Este plugin raramente é atualizado, mas eu recomendo que ele combine modelos semelhantes. Você também pode tentar o Plugin de paletas de esboço para salvar e importar esquemas de cores.
9. Pixel Perfecter
Todo designer digital se orgulha de modelos pixel perfeitos. Esta tarefa não é difícil, mas requer que todos os elementos de design estejam perfeitamente alinhados com a grade, não deixando sobreposições ou imperfeições.
Se você quiser verificar seu trabalho antes de exportar, pode executar Pixel Perfecter . Este plugin muito pequeno verifica todos os seus ativos de arquivo para ver se algum pixel transborda as posições de coordenadas X / Y tradicionais, criando pixels imperfeitos.
Observe que isso não corrigirá automaticamente esses valores de pixel de deslocamento. Ele só encontrará a (s) camada (s) causando problemas e os destacará para que você possa entrar e consertá-los você mesmo. Ainda economiza muito tempo verificando cada camada manualmente.
10. Botão Dinâmico
O plug-in de botão dinâmico original foi um pouco abandonado em 2015, mas o mais recente Botão Dinâmico O plugin é ainda melhor e compatível com o Sketch 3.5+.
Ele adiciona automaticamente estilos de preenchimento e botão a qualquer camada de texto que você criar, e o preenchimento é dinâmico para que seja atualizado independentemente do tamanho do texto. Isso é extremamente útil para designers de interface do usuário que estão constantemente fazendo alterações em seus modelos.
Isso também pode ser usado para aplicativos móveis em que os botões geralmente seguem um tamanho / proporção fixa. Não é o plugin mais glamoroso do Sketch, mas faz bem a sua tarefa.
11. Compo
Se você quiser um gerador de botão, juntamente com alguns recursos extras, então o Plugin Compo vale a pena testar.
O criador do Compo teve a idéia depois de usar o plugin do botão dinâmico por um tempo, eventualmente querendo algo um pouco mais rápido. A Compo gera automaticamente o tamanho adequado do botão e o tamanho do texto para atender às suas especificações exatas. Um clique e você tem um componente de trabalho do Sketch que é automaticamente dimensionado e posicionado corretamente.
Normalmente, quando você cria um botão e altera o texto, isso afeta apenas a camada de texto. Então o botão subjacente seria muito pequeno. O Compo redimensiona automaticamente o botão e o texto como se fossem um elemento.
Você pode encontrar toneladas de demos no Repositório GitHub junto com alguns guias do usuário para começar.
12. CSSketch
Por último, mas certamente não menos importante é o CSSketch plugar. Isso é mais útil para designers + desenvolvedores que desejam acesso direto ao código CSS para todos os estilos que criam.
Qualquer página projetada pode ser executada por meio desse plug-in para exportar uma folha de estilo completa com todos os ativos contabilizados. Mas como isso é automatizado, você não pode esperar um código de qualidade A ++.
Eu ainda prefiro codificar meu CSS manualmente, mas esse plug-in pelo menos oferece um ponto de partida para designers ou desenvolvedores não técnicos que desejam economizar um pouco de tempo.
