Ele recebe CSS
Na nossa empresa, usamos principalmente software de design visual para web/UI design.
Isso significa que quase sempre precisamos ser capazes de converter um protótipo de design estático em HTML e CSS. Com o Sketch, descobrimos que esse processo é incrivelmente fácil. Os desenvolvedores do Sketch criaram o aplicativo com CSS em mente.
Tudo o que você pode fazer no aplicativo pode ser reproduzido usando as especificações CSS atuais. No Sketch, não há nenhum efeito visual maluco e irreversível que fará com que os desenvolvedores de front-end o odeiem, apenas aqueles que você pode realmente escrever usando CSS. Além disso, obter as regras de estilo para um elemento específico, como um botão de login, por exemplo, é tão fácil quanto clicar com o botão direito do mouse e selecionar “Copiar atributos CSS”.
Gráficos vetoriais
Tudo o que você cria no Sketch é um elemento vetorial. Por isso, você pode dimensioná-los sem se preocupar com pixelização. Isso é particularmente útil ao exportar ativos para telas @2x, como telas Retina da Apple, bem como ao trabalhar com SVG.
O fato de esta ferramenta de design digital ser baseada em vetores também é muito útil para o design responsivo.
Renderização de fonte precisa para a Web
É chato quando você projeta uma interface incrível no Photoshop, transfere-a para CSS/HTML e descobre que as fontes parecem completamente diferentes em comparação com a forma como o PS mostrou para você. A tipografia é fundamental para a experiência do usuário e, portanto, uma representação correta em sua ferramenta de web design é importante no processo de design.
Uma coisa que descobrimos com o Sketch é que a renderização de fontes é muito próxima de como seria em um navegador da Web/móvel, o que significa que sabemos rapidamente como tudo ficará junto sem ter que montar um alto protótipo de fidelidade.
Testes de design iOS
Ao projetar nosso novo site, sabíamos que ele precisava ter uma ótima aparência em dispositivos móveis. Todos nós já fizemos os truques padrão para testar designs em diferentes tamanhos de janela de visualização, como redimensionar manualmente a janela do navegador ou usar uma extensão do Chrome para redimensionar a janela de visualização para corresponder a um iPhone ou Nexus.
Mas o Sketch tem algo especial para essas ocasiões de teste de design responsivo: um aplicativo complementar chamado Sketch Mirror. O Sketch Mirror é executado em dispositivos iOS e espelha exatamente o que você vê na tela do seu Mac para todos os dispositivos próximos que têm o aplicativo aberto. É ótimo para testar seu design em uma série de dispositivos ao mesmo tempo.
(Seria ainda melhor se houvesse uma versão Android do Sketch Mirror.)
Símbolos
Se você usar um elemento de design repetidamente, torná-lo um símbolo é mais eficiente e melhora a consistência em todo o projeto. Um símbolo vincula todas as instâncias de um elemento de design. Se você alterar uma instância do símbolo, todas as instâncias feitas podem ser atualizadas para refletir a alteração.
Esse recurso, em última análise, significa que não há mais pesquisa em todos os seus arquivos e camadas de design para o botão “Compartilhar” que você deseja ajustar. Os símbolos são muito semelhantes aos Objetos Inteligentes no Photoshop, e isso não é coincidência. O recurso Símbolos foi originalmente criado como um plug-in para o aplicativo trazer recursos do tipo Objeto Inteligente para o Sketch.
Com o lançamento do Sketch 3.0, o Symbols foi trazido para o aplicativo principal.
Pranchetas e páginas
Costumávamos ter dezenas de arquivos espalhados em nossas pastas compartilhadas toda vez que estávamos projetando uma nova tela ou componente. Como mudamos para o Sketch, podemos manter tudo relacionado ao mesmo design ou recurso no mesmo arquivo.
Você pode dividir a tela infinita do Sketch em pranchetas menores, cada uma com um tamanho único. Achamos isso útil ao projetar para uma variedade de dispositivos de tamanhos diferentes, como quando precisamos saber como nosso site ficará em uma tela de 1080p e um iPhone. Além das pranchetas, você também pode adicionar páginas a um arquivo Sketch.
Usamos esse recurso para dividir cada design de tela do nosso novo site em uma nova página, mantendo tudo bem organizado.
