Trabalhando com o Sketch App

Nelson Vasconcelos

Usando o Sketch

Quando pensamos em fazer a UI de um site ou app as primeiras ferramentas que vem a mente são:

Problemas com o Photoshop

Trabalha primariamente com bitmaps

Arquivos muito pesados

Dificuldade em se trabalhar com diferentes resoluções (Mobile)

Não é bom para desenvolver idéias

Complicado de trabalhar múltiplas telas em um único arquivo

• 1 única tela possui em formato PSD possui quase 20mb

Problemas com o Illustrator

• Trabalha primariamente com vetores

• Possui artboards, mas é difícil se se organizar em layers

• Difícil de exportar assets

• Pixel grid falha

Ambos aplicativos gráficos são muito bons para trabalhar com bitmap ou vetores

Mas nenhum deles é focado unicamente em…

UI Design

http://bohemiancoding.com/sketch/

• O que dá pra fazer com 15mb no Sketch?

(*Sem contar com o template p/ Material Design em outra page)

Principais vantagens

http://www.sketchappsources.com

Comunidade forte e ativa

Organização de Pages > Artboards > Layers

Trabalha com vetores, mas com alinhamento preciso à grid de pixels

É muito mais fácil desenvolver idéias copiando artboards

Ótimo controle para paths

Múltiplos fills, borders, shadows e blurs em um único objeto

Fácil de exportar assets

Prototipação

Integração com Invision para criar protótipos navegáveis

http://www.invisionapp.com/sketch-prototyping

Vendo o preview do seu app no aparelho

Skala Previewhttp://bjango.com/mac/skalapreview/

Sketch Previewhttps://github.com/marcisme/sketch-preview

+

Trabalhando com desenvolvedores

Gerando CSS

/* Rectangle 145: */ background: #0091C8; box-shadow: inset 0px 1px 2px 0px rgba(255,255,255,0.50), inset 0px -1px 2px 0px rgba(0,0,0,0.50); border-radius: 4px; /* Carregar mais imóvei: */ font-family: OpenSans; font-size: 32px; color: #FFFFFF; line-height: 43px;

https://github.com/utom/sketch-measure

Gerando anotações

Recuperando arquivos

O Sketch salva os arquivos automaticamente, e você pode acessar

versões anteriores em:

File > Revert To > Browse All Versions…

http://sketchtoolbox.com

Como gerenciar plugins?

OBRIGADO :)

[email protected]

@nvasconcelos_

+NelsonVasconcelos

br.linkedin.com/in/nelsonvasconcelos/