Criando protótipos rápidos com InVision Sync

Canha
Choco la Design
Published in
4 min readApr 27, 2015

O InVision não é uma ferramenta nova para nós designers; ele permite prototipagem rápida para testes de UX ou para apresentar novas idéias para sua equipe.

O Willian Matiola já chegou a falar do InVision aqui no Choco la Design e recentemente a empresa americana apresentou sua nova ferramenta de sincronização: o InVision Sync. Esse app fantástico vai eliminar a necessidade de usar o “Salvar para Web…” do Photoshop, cortando drasticamente o tempo de exportação de projetos que podem conter centenas de telas.

Antes do InVision Sync era necessário salvar cada tela em uma imagem separada, fazer upload ao site, linkar todas as telas e só então repassar para sua equipe ou seu cliente. Agora, você precisa apenas salvar seu PSD com algumas leves alterações na pasta do aplicativo e pronto: todas as telas são criadas automaticamente e quaisquer assets que você precise exportar para seu desenvolvedor utilizar (como um botão ou um ícone) é automaticamente salvo em formato PNG, eliminando a necessidade dele pegar seu PSD e exportar os elementos separadamente.

O processo é simples e requer que você implemente um de três caractéres ao nome das suas camadas (Layers) ou grupos (Groups):

  • Ao colocar um + na frente do nome da camada, a camada é salva como imagem separada.
  • O símbolo * indica que aquela camada é global — ou seja, ela vai ser salva junto a todas as imagens. Excelente para quando a camada é uma imagem de fundo, cabeçalho ou rodapé presente em todas as telas.
  • Já o prefixo & é usado para estados diferentes de uma tela — como um efeito de hover — e a tela é salva com e sem esse estado.
  • Além disto, se você nomear uma camada com uma extensão .png no final do nome, o InVision Sync salva aquela camada como um PNG separado para ser usado pelo seu desenvolvedor.
InVision Sync

Basta então criar uma pasta com o nome do projeto dentro da pasta do InvisionApp. Outras pastas serão automaticamente criadas: Assets e Screens. Dentro da primeira você encontra 3 outras pastas: Fonts, Images e Source Files, onde fontes, imagens de camadas marcadas com .png, e o arquivo fonte serão guardados. Salve seu arquivo .PSD dentro da pasta Source Files e aguarde o upload ao servidor. Em seguida, visite sua página do InVision e estará tudo lá! Agora é só questão de criar os links e seu projeto já pode ser repassado para todos da sua equipe.

Você pode conferir mais informações de como funciona o processo nessa página (em inglês) do InVision.

Além destas vantagens, você ainda tem acesso a um controle de versão (ou seja, você não corre mais o risco do cliente pedir uma alteração e em seguida pedir pra reverter). O InVision também funciona bem com o Sketch — um dos apps atuais mais recomendados para desenvolvimento de interface (disponível apenas para Mac OSX).

Mas nem tudo é um mar de rosas

Infelizmente, o InVision Sync está disponível apenas para usuários de Mac OSX e não há nenhuma conversa sobre fazer uma versão Windows ainda. Mas existe uma salvação: o Dropbox Syncing.

Para isto, é necessário ter uma conta no Dropbox e o app instalado no seu computador. Em seguida, é necessário dar autorização ao InVision para que acesse seu Dropbox acessando este link. Uma nova pasta será criada dentro do seu Dropbox em “Apps > InvisionApp” onde todas as suas telas já existentes serão sincronizadas. Depois disto, o processo é o mesmo: basta salvar o arquivo .PSD dentro da pasta “Nome do Projeto > Assets > Source Files”.

Outra desvantagem do InVision é que no plano gratuito, você tem acesso a apenas um projeto ativo. Em compensação, por apenas USD$ 25 ao mês você pode ter projetos ilimitados — algo que vale muito a pena se você trabalha com uma equipe ou com clientes remotos que querem visualizar o seu design antes de começar a produção.

Pessoalmente, recomendo muito o InVision que facilita muito na hora de apresentar um projeto. E com essa nova ferramenta, alterações demoram poucos segundos e a necessidade de exportar cada tela separadamente desaparece.

Originally published at Choco la Design.

--

--