10 Plugins de Sketch Grátis para Desenvolvedores da Web

O Sketch está ganhando muita atenção entre os designers e desenvolvedores da web. Isto é provavelmente porque é intuitivo, fácil de aprender e vem com muitos recursos que tornam muito mais fácil criar um protótipo de site. Também pode ser porque esse aplicativo é extensível, ou seja, você pode adicionar novos recursos ao aplicativo facilmente com a ajuda de plug-ins.

Aqui estão 10 plugins que podem ajudá-lo a aumentar sua produtividade ao trabalhar com o Sketch. Existem diversos, variando de geradores de conteúdo, seletor de paleta de cores, e eles podem ajudá-lo a exibir medidas de camada ou adicionar preenchimento automaticamente a uma camada.

1. CSS Buddy

Amigo CSS permite adicionar o CSS à sua camada no espaço de trabalho Sketch. Basicamente, você pode aplicar largura, altura, opacidade, sombra de caixa, borda e plano de fundo à camada usando CSS.

Com este plugin instalado, basta selecionar uma camada e selecionar Aplicar para selecionados no menu do plugin. Uma caixa de diálogo solicitará que você insira sua folha de estilo. Adicione o conteúdo CSS sem a classe CSS e assista à sua camada tomar forma.

2. paleta de cores design de materiais

Se você seguir a tendência do material design, uma coisa importante que você notará é o uso de cores distintas. Material Design tem uma paleta de cores incrível. Agora você pode trazer isso para o seu espaço de trabalho com Plugin de Paleta de Cores para Design de Materiais.

Este plugin irá gerar paletas de cores em segundos sem que você tenha que fechar sua área de trabalho. Escolha Matiz, Valor ou Amostra para gerar uma paleta de cores adequada ao seu projeto.

3. Caderno de Desenho

Às vezes precisamos mostrar o que fazemos em um comentário ou via documentação. Se você está trabalhando em projetos com outros designers ou com o envolvimento de um cliente, isso também é necessário para que você possa garantir que o resultado seja o que todos desejavam.

Caderno de desenho é um plugin para documentar seu design no Sketch com facilidade. Ele adicionará uma barra lateral adicional ao seu espaço de trabalho, que contém comentários adicionados a qualquer elemento em seu design. Você pode reordenar o comentário, realinhar, excluir e alternar a visibilidade dos comentários.

4. jogador do dia

Antes de usar imagens reais em um design, geralmente usamos imagens de espaço reservado para acelerar o processo de design. Para o Sketch, você pode usar Jogador do dia para adicionar espaços reservados personalizados a qualquer camada em seu espaço de trabalho do Sketch a partir de seis serviços de imagem de espaço reservado, incluindo Placehold.it, LoremPixel e Unsplash. Uma vez ativado, você pode definir a largura, a altura e outras informações da imagem..

5. Gerador de Conteúdo

Já temos um plug-in para inserir imagens de espaço reservado, que tal um para o conteúdo geral?? Gerador de Conteúdo ajuda a adicionar dados fictícios, como avatares, nomes, dados de geolocalização e muito mais. Funciona muito bem para projetos de maquete e para reduzir dores de cabeça ao tentar descobrir como gerar dados no local.

Para adicionar os dados fictícios, basta selecionar uma camada e, em seguida, selecionar Plugin> Gerador, e escolha Geo, Persona ou Fotos.

6. Medida de esboço

Medida de esboço é uma ferramenta de medição para o Sketch. Ele mede o comprimento ou o tamanho de uma camada (ou camadas) em seu design. Você também obtém o preenchimento e a margem de uma camada, bem como a distância entre duas camadas. O Sketch Measure também pode imprimir as propriedades da camada, como cor, borda e opacidade. Todas as medições podem ser feitas através de atalhos de teclado.

7. Botão Dinâmico

Botão Dinâmico ajuda você a criar facilmente botões com preenchimentos fixos. Ele ajustará automaticamente o preenchimento com base no valor que você fornecer, independentemente da duração do texto. Com o plugin instalado, um texto pode ser convertido em uma estrutura com o atalho Command + J. A quantidade de preenchimento necessária pode ser perfurada na camada de texto (0: 0: 0: 0) (no grupo de botões flex).

8. Escala Tipográfica

Escala tipográfica é um plugin para transformar a camada de texto selecionada em escala tipográfica. Para usar este plug-in, basta selecionar a camada de texto (única ou múltipla) ou camada mista que contenha pelo menos uma camada de texto e, em seguida, selecione Plugin> Escala Tipográfica e ajuste o valor no diálogo. O resultado é um conjunto de texto escalonado que segue as regras da escala tipográfica.

9. Modulizador

Com Modulizador você pode controlar os preenchimentos de botão, módulo ou áreas em seu design com o atalho de teclado Shift + Command + M. Você pode combinar todas as camadas, agrupá-las e usar o atalho para ajustar automaticamente o preenchimento com base no valor de preenchimento necessário . Assista ao vídeo de demonstração para ver isso em ação.

10. Lâmina

Você já pensou em converter seu design de esboço em HTML? Se assim for, você provavelmente deveria receber Lâmina, um plugin Sketch que gera automaticamente arquivos HTML de seu design. Ele converterá o grupo em div, texto em p e assim por diante.

Ao usar o Blade, você pode dizer ao plug-in qual elemento DOM gerar, adicionando um nome especial à camada, como [btn] ou input [text], para que o Blade saiba o que deve fazer. Confira esta demonstração em vídeo para um olhar interno.

Agora Leia: 12 Plugins Úteis para Desenvolvedores do WordPress