Novidades do Sketch 53 🚀🔥

Caio Calderari

Follow

Published in

UI Lab

7 min readJan 26, 2019

--

Conheça as novas funcionalidades da nova versão beta do Sketch, uma visão geral das novidades.

Importante: Para usar a versão do Sketch 53 beta você vai precisar ter instalado o macOS High Sierra (10.13.4) ou mais recente. Dica: Com o macOS Mojave instalado você pode usar o modo de dark interface (interface na cor preta). 🤟

Sketch 53 tela de boas vindas. Percebeu o ícone azul? Legal, né?

Quais são as novidades do Sketch 53? 🎉

É bom perceber que a equipe desenvolvedora do Sketch não está esperando a concorrência ganhar mercado sem nenhuma resposta. E é melhor ainda ver que algumas das novidades são pedidos feitos por usuários há muito tempo e estão sendo atendidos como funcionalidades nativas. Estou feliz com essas novidades e espero mais no futuro, por isso resolvi compartilhar com vocês agora o que vem de novo por aí. Então vamos as novidades.

Ferramentas de preenchimento — Fill Popover (Color Picker)

Agora as opções cores e preenchimentos aparecem em formato de janela flutuante (dropdown) com algumas opções de abrir e fechar componentes (collapsable sections).

Novo formato de visualizar as opções de cores e preenchimentos no estilo dropdown (janela flutuante).

Agora é possível fechar ou expandir alguns componentes para deixar a visualização mais limpa com menos informações ao seu gosto.

Também tem uma nova forma de visualizar sua paleta de cores, suas cores globais ou as cores do seu documento. Agora você pode mudar a forma de visualização optando entre 2 formatos diferentes:

O primeiro exibindo o código Hexadecimal ao lado da cor, em formato de lista:

Você pode mudar a forma de visualização das cores clicando no pequeno ícone no cantinho. (veja a setinha na imagem).

E a segunda forma de visualizar as cores é bem semelhante a versão anterior, que antes tinha formato de quadradinhos e agora na nova versão está em formato de círculo.

Semelhante ao formato antigo mas agora com formato de circulo.

Outra coisa legal é que agora existe um ícone de histórico de cores. Você pode usa-lo para verificar cores que você mais tem usado durante o trabalho, assim pode rapidamente encontrar uma cor em algum documento em vez de ter que ficar procurando no seus arquivos.

E ainda não acabou…

Uma das coisas mais interessantes (na minha opinião) destas novidades na parte de cores é:

💥 Formato de cores HSL colors agora está disponível de forma nativa no Sketch 53! 💥

E você pode estar se perguntando, por que isso é tão legal?

Eu explixo, HSL é um sistema de cor bem bacana que vai te ajudar a conseguir combinações e variações de cores bem mais “limpas”, você poderá criar paletas de cores de uma forma mais simples e consistente.

Porque gosto da possibilidade de usar HSL:

HSL é um formato mais compatível com o Browser, então vai evitar variação entre a cor escolhida no Sketch e a cor renderizada no browser quando ela virar código.
HSL = Hue / Saturation / Lightness, que é diferente de HSB, onde a letra B significa Brightness. As vezes quando usamos HSB ou RGB, pra conseguir um tom diferente na paleta de cores temos que mudar a Saturação e o Hue (cor base) pra conseguir outras tonalidades, mas isso pode fazer com que sua cor fique “suja” o que não é tão legal, agora com HSL você consegue fazer paletas com tons diferentes sem mudar o Hue e as vezes o saturation também, apenas trocando o Lightness que é a quantidade de luz global, mantendo características semelhantes entre as variações de cor e o principal sua cor base integra. Resultado, maior consistência nas suas paletas de cores.
Quando você mantém a saturação em 100% você consegue manter o valor real da cor utilizada (HUE) e com o lightness você pode mudar o quão escuro ou clara sua cor será.
Minha dica é começar a usar HSL, e não se preocupe pois cada vez mais ferramentas estão ficando compatíveis com esse formato, e será mais fácil para designers e developers se entenderem, se seus desenvolvedores não conhecerem este formato diga a eles que existe e que são compatíveis com os principais navegadores. Pode procurar no google!

Um rápido exemplo do que você pode fazer:

Está vendo? A cor principal (hue) e saturação estão iguais, mas apenas mudando o lightness é possível obter variações de cores para usar em diferentes estados da interface. Você pode montar uma escala progressiva conforme preferir.

Just a quick example of how you can use that idea.

Se você tiver mais interesse sobre esse assunto, recomendo pesquisar mais sobre isso, como este é um post sobre as novidade do Sketch não vou aprofundar sobre isso aqui.

👉 Confira cursos de UI Design e assine a newsletter da UI Lab.

Recomendo usar HSL! Comece a testar.

Gostando deste post? Não esqueça de: 👏👏👏👏👏👏👏

Uma última coisa relacionada a esta parte de cores e preenchimentos, você vai perceber um pequeno ícone na parte de gradients que vai possibilidade você trocar a direção de forma rápida com apenas um click. Agora você poderá trocar o sentido das cores e também a direção verticalmente ou horizontalmente.

Veja como funciona na prática:

Just a click and you’re ready to go, change the direction of your gradients.

Legal né? Sobre essa parte de cores, teve bastante coisa, mas é isso…

Controle de Substituições — Override Management

Uma novidade simples mas bem útil. Agora você pode selecionar dentro dos seus Symbols quais overrides aparecem quando você seleciona as instâncias dos seus Symbols!

Tem muitos overrides dentro do seu symbol mas nem todos são importantes? Agora você pode deixar tudo mais organizado e menos poluído, escolhendo quais deles devem aparecer ou não. Essa função vai resolver seu problema.

Basta selecionar quais itens serão visíveis ou não.

Selecione o symbol e mude as caixinhas de seleção para exibir ou ocultar um element/override.

Se todos estiverem marcados eles irão aparecer no painel lateral do symbol quando ele estiver selecionado.

Os que não estiverem marcados não aparecem no painel lateral do symbol. Legal né?

Acho que isso é só um começo, espero que venham ainda mais novidades nessa parte do Sketch.

Seguindo…

Substituições — Overrides

Acredito que essa função vai ter novos usos no futuro, mas agora é apenas uma função que já vai ajudar a visualizar o que tem dentro dos seus Symbols.

Basicamente, ao selecionar um symbol, você vai conseguir ver os seus overrides ao passar o mouse em cima deles, e no painel do lado esquerdo você vai ver a estrutura de layers do seu symbol, algo que não acontecia antes. Essa função vai ser útil para symbols mais complexos vai ajudar a você entender a estrutura deles, o que tem dentro e a selecionar os overrides.

Veja como funciona:

Ao passar o mouse em um symbol selecionado você consegue ver sua estrutura e selecionar overrides.

Encaixe — Snapping

Tem melhorias na parte de manuseio de elementos no Sketch, como por exemplo na forma como os itens se relacionam entre um e outro.

Eu pude notar uma novidade interessante, veja abaixo:

Itens quando se aproximam acabam “grudando” como se fossem imãs.

Quando um elemento chega muito próximo um do outro eles se juntam como se fosse imãs, esse efeito ajuda bastante para garantir que estão realmente lado a lado sem espaço. Parece bem útil!

Além disso, acredito que houveram melhorias na parte de movimentação e diminuição os elementos em geral.

Último item, mas não menos importante….

Performance

Como de costume o Sketch sempre foi conhecido por sua leveza e velocidade, o que é muito importante. Quem quer mais funcionalidades mas uma ferramenta pesada, certo? Houveram também melhorias de performance em geral principalmente relacionadas a arquivos grandes dentro do Sketch, sabemos que é fácil chegar ao ponto de ter muitas artboards e os arquivos começam a ficar grandes e pesados, então fico feliz que estão buscando melhorias nesta parte de performance também! Obrigado Sketch!

Gostando deste post? Não esqueça de: 👏👏👏👏👏👏👏

Em geral fico feliz de ver que o Sketch está evoluindo aos poucos. Isso é muito bom pois nã quero ser forçado a trocar de ferramenta tão cedo. É isso aí Sketch, continuem melhorando!

Mal posso esperar para mais novidades e novas funcionalidades! 🤟
Espero que você tenha gostado do post! Compartilhe com seus amigos.

🧡 PS: Eu tenho um Canal no Youtube chamado U&I Design, se quiser aprender mais coisas sobre design e assuntos relacionados considere acessar e se inscrever por lá também!