Concrete Logo
Hamburger button

Abandonei de vez o Photoshop para usar o Sketch

  • Blog
  • 5 de Dezembro de 2016

Se você é um UI ou UX Designer, trabalha com um, ou gostaria de se tornar um, este artigo é para você.

Vou falar sobre o software que está dando uma tremenda dor de cabeça para a Adobe e vem conquistando uma fatia significativa no mercado de desenvolvimento de interfaces digitais. O Sketch não é mais hype, não é como aquelas dezenas de ferramentas que já surgiram prometendo te livrar do Photoshop ou fazer layouts online. Ele é uma realidade e hoje está muito bem consolidado na comunidade de design.

Sketch é uma ferramenta desenvolvida pela Bohemian Code e, ao contrário do Photoshop, foi concebido especificamente para design de interface, ou seja, não veio ao mundo para manipular imagens. Lembra do Fireworks da Adobe? Então! O Sketch é uma junção do Fireworks com o Illustrator para fazer o que até então fazíamos no Photoshop.

Empresas como Netflix, Google, Dropbox, Apple e Facebook já abandonaram de vez o uso do Photoshop na criação de suas interfaces e hoje já utilizam o Sketch como ferramenta oficial dos times de Design. Se esses gigantes estão usando, já é um puta motivo para você ler as vantagens que esse carinha vai te dar, não é?

O Sketch venceu o prêmio App of the Year da NetAwards e foi eleita a ferramenta mais utilizada em uma pesquisa com 4 mil designers de todo o mundo, destronando o gigante da Adobe.

sketch1

Conheci o Sketch há 2 anos, em um período da vida que eu estava me questionando bastante sobre o meu fluxo de trabalho: a equipe de design realmente deveria enviar um .psd para o desenvolvedor? O designer realmente deveria ter que criar um arquivo no Photoshop para cada resolução de tela? Não existiria outra forma de explicar para o dev as medidas, margens e todas especificações do meu layout se não manualmente? Depois de tanto me questionar fui pesquisar sobre o workflow de design de grandes empresas e ver como esse fluxo entre os envolvidos no processo de criação de produto realmente deveria funcionar. Foi lendo sobre a equipe de design do Netflix que conheci o Sketch.

O Sketch me ajudou a agilizar e organizar esse fluxo de trabalho e vou falar alguns motivos pelos quais migrei do bom e velho Photoshop para o queridinho do Vale, o Sketch

sketch2

Curva de aprendizado

Se você sabe Photoshop e Illustrator você certamente vai levar de 10 a 15 minutos para se adaptar à interface do Sketch e pegar o jeito da coisa. O próprio software divulga vídeos com tutoriais curtos para cada feature do programa, além de existirem centenas de tutoriais no YouTube.

Performance

Eu já trabalhei com Photoshop, sei que quando temos diversas layers, imagens, smart objects e shapes o arquivo fica pesado, passando facilmente dos 100 mb. Por melhor que seja a sua máquina, isso afeta o desempenho. Quem nunca teve que criar um .psd novo só para deixar o arquivo mais leve? O Sketch trabalha com vetor e não com pixels, fato que permite que o software rode de maneira mais rápida. Além disso ele foi projetado inteiramente para Mac, então consegue tirar máximo desempenho do seu macOS. Sério, é muito rápido!

Com o surgimento do design responsivo, trabalhar com vetor sempre é a melhor opção.

Artboards

O uso de Artboards me dá uma visão macro do projeto, posso enxergar todas as telas da minha aplicação em um único arquivo e perceber inconsistências visuais de uma forma muito mais ágil. Além disso existem as chamadas Pages, nas quais posso agrupar diversas Artboards. Ou seja,  em uma posso ter diversas telas do meu app, por exemplo, e em outra, no mesmo arquivo, criar um style guide com estilos de texto, estilo de botões e outros elementos de interface. Tudo isso em um único arquivo que dificilmente vai passar de 20 mb.

Artboards que o pessoal do Invision disponibilizou gratuitamente para download.

Artboards que o pessoal do Invision disponibilizou gratuitamente para download.

Grids

Trabalhar com grid responsivo em um arquivo no Photoshop sempre foi trabalhoso (pelo menos pra mim). Precisava ir a um site, gerar o .png do grid, importar para o programa, bloquear a layer e colocar esse grid em cada nova tela que surgir ou criar o grid na mão. E se por acaso depois de ter feito várias telas eu quisesse alterá-lo? Pronto, lá ia eu novamente. Até aqui quanto tempo você perdeu?

O Sketch tem uma função própria na qual você cria e personaliza seu grid (que ele chama de Layout). Você especifica o tamanho do grid, diz o número de colunas e ele calcula o gutter e o tamanho da coluna pra você. Você também pode configurar um padrão e todos novos artboards vão herdar essas especificações.

gridssketch

Estilos de Texto e Símbolos

Você deve estar familiarizado com estilos de texto que o Front-End usa: define-se um estilo no CSS para o H1, H2 e parágrafos da sua interface e o todos os seus H1, H2 e parágrafos vão segui-lo. Isso é importante para assegurar a legibilidade e a consistência visual dos textos da aplicação.

Sabe quando você desenha 60 telas de uma interface e na 61º percebe que precisa mudar a cor ou o tamanho de um texto que aparece em pelo menos 60% das telas? O que você faria? Senta e chora ou abre cada uma das telas e vai alterando na mão ou transforma tudo em smart object? O Sketch foi desenvolvido para desenho de interfaces e é claro que ele solucionou esse problema. Nele você define que, por exemplo, seu H1 vai ser Arial, Vermelho com 18px, depois disso você cria um estilo dizendo que aquele é seu padrão de H1, pronto! Sempre que você escrever um texto e aplicar o estilo H1 nos seus layouts eles vão estar com esse estilo. Da mesma forma que se esse texto aparecer em 60 telas e você precisar alterar a cor na 61º, automaticamente você terá alterado em todas as outras telas. Mágico não? Você poupa um trabalhão. E se isso não for o que você quer, você pode simplesmente criar um novo estilo, só para a tela que você está trabalhando.

Gif retirado do site designcode.io vai lá que lá tem tutorial bom pra caramba :)

Gif retirado do site designcode.io. Vai lá que lá tem tutorial bom pra caramba 🙂

Símbolos

Sabe o que eu disse sobre definir um estilo e automaticamente tudo é alterado quando você altera o elemento pai? É isso! Existe a mesma funcionalidade para grupos e layers no Sketch. Os símbolos funcionam naquele esquema de design atômico e se você pensa com essa cabeça com certeza vai amar essa funcionalidade.

Como é na prática? Você desenha uma interface com 20 telas e cria uma Page para ser seu guia visual com todos os elementos de interface que se repetem nas telas: botões, textos, inputs, etc e define um estilo (symbol) para esses elementos. A partir do momento em que você alterar um desses elementos na sua page que serve como guia, o elemento será alterado nas 20 telas da sua interface.

Gif retirado do site designcode.io. Vai lá que lá tem tutorial bom pra caramba :)

Gif retirado do site designcode.io. Vai lá que lá tem tutorial bom pra caramba 🙂

Isso realmente te poupa um bom tempo, deixa a criação mais ágil, com certeza mantém seu projeto em um bom nível de organização e te mantém focado no que realmente importa, e não em alterações.

Dá uma olhada nesse exemplo de como funcionam Estilos de Texto e Símbolos dentro do Sketch:

Asset Export

Sempre achei uma tarefa árdua e repetitiva ficar exportando assets pelo Photoshop, e o Sketch me ajudou muito com essa funcionalidade. Você seleciona o objeto que você quer exportar, vai na barra de ferramentas da lateral direita, manda exportar e especifica as medidas (se vai ser 1x, 2x, 3x, 1,5x  –  sim, você pode exportar em todas as medidas de uma vez). E mais, você pode adicionar um prefixo no nome do arquivo para cada asset. Para facilitar ainda mais a sua relação com o desenvolvedor, você ainda pode pegar o CSS do objeto clicando com o direito na layer.

Gif retirado do site designcode.io. Vai lá que lá tem tutorial bom pra caramba :)

Gif retirado do site designcode.io. Vai lá que lá tem tutorial bom pra caramba 🙂

Plugins

O Sketch tem uma porrada de plugins que não deixam seu arquivo mais pesado e nem o software mais lento. São plugins open source que qualquer um pode produzir. A comunidade é muito ativa e vira e mexe inventam um plugin novo pra salvar sua vida. Recentemente o pessoal do Invision lançou um plugin fantástico chamado Craft, e você vai ficar espantado com o que esse plugin é capaz de fazer. O Craft é um plugin que agrupou várias funcionalidades de outros plugins em um único lugar. Nele você consegue criar uma biblioteca de elementos e arquivos, do mesmo jeito que funciona a library da Adobe. Você consegue duplicar conteúdo de uma forma simples e aplicar conteúdo real nas suas interfaces. A feature de “Data” te permite extrair dados de um Json que seu desenvolvedor te enviar, de um Excel ou direto da internet. A função de “data” integrada com a função “duplicate” faz milagres e te economiza horas.

O Craft é um dos plugins que mais utilizo e pra não deixar o texto mais extenso vou deixar vocês com esse vídeo que vai te mostrar as razões para esse ser um dos plugins mais promissores do Sketch:

Craft Official from InVision on Vimeo.

Bônus: O Craft está com uma versão beta, que permite você prototipar suas interfaces direto no Sketch.

Instant Preview

O Sketch tem um app para iOS no qual você pode espelhar sua interface tanto no seu iPhone quanto no seu iPad. Você desenha a interface e ao mesmo tempo já visualiza na tela do seu device. Funciona via usb ou Wi-Fi, basta seu aparelho estar conectado na mesma rede que o Sketch.

Tudo que está no Macbook é espelhado para o iPhone e para o iPad.

Tudo que está no Macbook é espelhado para o iPhone e para o iPad.

Acho que se você chegou até aqui é porque consegui plantar a sementinha do Sketch no seu coração. Tente usá-lo! Baixe apenas para experimentar, ele tem um trial de 30 dias e vale a pena nem que seja só pra sair da rotina de Photoshop e Illustrator. É difícil abandonar o Photoshop, eu sei. Me forcei a utilizar o Sketch desde o início de um projeto e foi só assim que eu entendi o quão ágil ele é e quanto ele poderia ajudar no processo entre designer e desenvolvedor.

Nos últimos 2 anos o Photoshop evoluiu bastante, surgiram os artboards, o quick export, e outras features. Muito dessa evolução é por conta do surgimento do Sketch, o software conseguiu dar uma boa cutucada na Adobe roubando alguns dos seus usuários. No último ano a Adobe bancou o desenvolvimento do Adobe XD como tentativa de atingir o público que abandonou o Photoshop e, apesar de estar muito cru o XD se mostra promissor. Parece que a próxima atualização do XD vai ter boas novidades. Enfim, a briga entre Adobe e Sketch vai começar a nos beneficiar.

Infelizmente tanto o Adobe XD quanto o Sketch só rodam em macOS e apenas o XD tem previsão de lançamento para Windows ainda esse ano.

OBS: Vale ressaltar que o futuro não está garantido para o Sketch com o surgimento de ferramentas como o Figma, que funciona muito bem para a questão de design compartilhado, e o subform, que também se mostra muito interessante quando o assunto é layouts responsivos.

E você? Já tentou usar o Sketch? Compartilhe sua opinião, gostaria muito de saber como você está usando o Sketch no seu processo de design. Até a próxima!

É designer e quer trabalhar com produtos desafiadores? Clique aqui.