Mayra Vendramim
Apr 7, 2016 · 4 min read
Image for post
Image for post

Design Workflow: Como manter seus arquivos Sketch organizados

Manter arquivos organizados, sejam eles Sketch, PSD ou qualquer outro formato é essencial. Se nós mesmos ficamos perdidos quando temos de alterar aquela interface, que foi entregue há meses atrás, quem dirá outro profissional que está fora de contexto. Como na a maior parte do tempo temos de trabalhar de forma colaborativa com desenvolvedores e outros designers, organização é essencial pra manter a produtividade alta.

Image for post
Image for post
¯\_(ツ)_/¯

Hoje vou compartilhar algumas técnicas que eu utilizo para deixar os arquivos Sketch organizados e sem perder a agilidade no processo.

1. Use pages

A função é meio difícil de encontrar de cara, já que ela fica escondidinha lá no canto superior esquerdo.

Image for post
Image for post

Porém essa função ajuda muito na organização do seu arquivo, pois torna-se difícil encontrar o conteúdo desejado quando existem muitas artboards na mesma page. Além disso, quanto mais artboards em uma page, mais tempo você terá de esperar pra que essas artboards sejam renderizadas.

Image for post
Image for post

Aqui na HE:labs costumamos separar cada fluxo de telas em uma page diferente.

Image for post
Image for post

2. Organize suas layers

Eu gosto muito de projetar interfaces pensando na teoria , que separa os elementos de um layout entre átomos, moléculas, organismos, e páginas. Os conceitos de templates e páginas não são tão importantes nessa forma de organização, apenas os átomos, moléculas e organismos. Nesse contexto temos:

  • Átomos: Componentes de níveis mais baixos que fazem pouco sentido sozinhos.
  • Moléculas: Combinações básicas entre esses elementos, ou seja, caixa de texto + botão = caixa de pesquisa.
  • Organismos: Conjuntos de moléculas. Uma barra de navegação pode conter um menu, que é a combinação de vários labels de texto, e uma barra de pesquisa, por exemplo.

Assim, temos layers organizadas em níveis:

Image for post
Image for post

3. Nomeie seus elementos de forma coerente

É importante manter controle sobre o nome dos elementos da interface. É ideal que eles sejam curtos e descritivos (ao menos descritivos no contexto do produto que está em desenvolvimento). Essa regra é mais importante ainda quando estiver lidando com assets que serão exportados como ícones ou imagens.

Sem entrar em regras específicas, que se aplicam a diferentes plataformas, tenho três de regrinhas de ouro que tem funcionado:

  • Use prefixos.
  • Nomeie em inglês por convenção. Caso esteja nomeando em português, omita acentos e mantenha sempre em português, para manter a consistência.
  • Converse com os desenvolvedores que trabalham com você, apresente seu método de organização e o mantenha durante todo o projeto.

4. Use Symbols

são ótimos para organizar seus elementos reutilizáveis, desde os níveis mais baixos, como botões e caixas de texto, até elementos mais complexos, como barras de navegação.

Infelizmente o Sketch ainda não tem uma função para exportar bibliotecas de symbols* mas, caso você tenha feito um UI kit que será aproveitado em outro projeto, você pode salvá-lo como template e reutilizá-lo quando necessário.

Uma possibilidade interessante é criar diferentes estados de um symbol. Para isso, quando for nomeá-lo, acrescente “/” após o nome e descreva seu estado.

Image for post
Image for post

Quando for reutilizá-lo, verá o seguinte resultado:

Image for post
Image for post

Outra dica importante é sempre checar quando for editar o texto de algum symbol e não queira que isso altere todas as suas repetições.

Image for post
Image for post

Conclusão

Se você chegou até aqui e quer saber mais dicas de como melhorar seu fluxo de trabalho usando Sketch, aqui vão algumas indicações:

Obrigada :)

HE:labs

Ideias e opiniões do time da HE:labs sobre desenvolvimento…

Thanks to Karine Silveira

Mayra Vendramim

Written by

http://mayravendramim.com

HE:labs

HE:labs

Ideias e opiniões do time da HE:labs sobre desenvolvimento de software, design, negócios, gestão disruptiva e muito mais.

Mayra Vendramim

Written by

http://mayravendramim.com

HE:labs

HE:labs

Ideias e opiniões do time da HE:labs sobre desenvolvimento de software, design, negócios, gestão disruptiva e muito mais.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store