Plugin Zeplin Sketch – A ponte de fluxo de trabalho entre design e engenharia

O Zeplin é uma poderosa ferramenta de colaboração que preenche a lacuna entre designers e desenvolvedores, criando um espaço conectado para equipes de produtos.

Por que Zeplin?

Uma peça crucial de qualquer quebra-cabeça de desenvolvimento de produto é o lugar onde o design encontra o desenvolvimento. Quando um design está pronto para passar para a fase de desenvolvimento (o “handoff”), os engenheiros precisam de uma maneira de entendê-lo e traduzi-lo em código.

O Zeplin facilita a transferência pegando designs do Sketch, Adobe XD, Figma e Photoshop e exportando-os para um formato que pode gerar facilmente trechos de código, guias de estilo, especificações e ativos.

Diga adeus aos dias de “redlining”. O Zeplin está focado exclusivamente em melhorar a colaboração entre designers de produtos e equipes de desenvolvimento e é usado pelas principais equipes de produtos do Airbnb, Dropbox, Pinterest, Microsoft e muitos outros.

Com o Zeplin não há necessidade de escrever manualmente os tamanhos ou margens, digitar a cópia, exportar ícones. É simplesmente incrível e economiza muito tempo para se concentrar em explorações de design. – Alex Potrivaev, Designer de Produto @Intercom

Em um de nossos artigos anteriores, o Toptal Designer Micah Bowers falou sobre a importância de ter um sistema de linguagem de design padronizado para se comunicar de forma eficiente em várias funções das equipes de produto que trabalham em produtos digitais.

Ao criar versões de ativos de design, criar bibliotecas de componentes e gerar guias de estilo de vida, um projeto portado para o Zeplin pode servir como a “fonte única da verdade” para as equipes de produto.

Basicamente, consideramos o Zeplin como nossa fonte de verdade para colaborar com a Engenharia. Se não estiver no Zeplin, não é oficial. – Jason Stoff, Designer Sênior, Produtos Digitais @Starbucks

Limitações do Zeplin

Embora o Zeplin tenha muitos recursos úteis, ele não é perfeito. O Zeplin oferece um plano gratuito, mas nesse plano é limitado a um projeto. Ao projetar para iOS e Android, dois projetos separados serão necessários. Nesse ponto, seria necessário um plano pago.

Uma vez que o fluxo de trabalho com Zeplin e Sketch (ou os outros aplicativos mencionados acima) é entendido, o fluxo de trabalho se torna fácil. No entanto, o Zeplin tem uma curva de aprendizado que requer algum tempo e atenção. Para ver uma visão geral e aprender mais sobre como usá-lo, veja o vídeo de demonstração do Zeplin abaixo:

Trabalhando com Sketch e Zeplin: etapas e dicas

1. Comece com o Zeplin.

• Crie uma conta Zeplin se você ainda não tiver uma. Você pode se inscrever gratuitamente: https://app.zeplin.io/register
• Baixe o aplicativo de desktop Zeplin para Mac ou Windows.
• Baixe o plugin Zeplin para Sketch.

2. Prepare seu arquivo Sketch.

• Agora que temos o Sketch e o Zeplin prontos, vamos configurar nosso arquivo Sketch para uma exportação perfeita para o Zeplin.
• No Sketch, organize seus ativos e camadas usando convenções de nomenclatura consistentes. Se estiver colaborando com outros designers, determine convenções que funcionem para todos em sua equipe. Dependendo do tipo de projeto (por exemplo, iOS, Android ou web), o Zeplin ajustará automaticamente a convenção de nomenclatura dos ativos, tornando a exportação um processo de uma etapa.
• Crie símbolos para elementos e ativos comuns no Sketch. Isso permitirá que você configure componentes no Zeplin.
• Salve cores em sua paleta de “Cores do Documento” e fontes como “Estilos de Texto” em seu arquivo Sketch. Eles aparecerão em seu guia de estilo gerado pelo Zeplin.

3. Torne os ativos exportáveis ​​no Sketch.

• Este é um passo muito importante. Depois que seus ativos estiverem agrupados em símbolos, abra a página Símbolos em seu arquivo Sketch.
• Clique em um grupo dentro de um símbolo, como “ic-menu” (o ícone da pasta)
• Com o grupo destacado, localize a ação “Make Exportable” no canto inferior direito do seu “Inspector” no Sketch e clique nesta opção. Um ícone de fatia agora deve aparecer ao lado do nome do seu grupo.
• Esta etapa permitirá que os engenheiros exportem ativos diretamente do Zeplin.

4. Crie um novo projeto no Zeplin.

• Selecione o tipo de projeto que você está construindo. Observe que você deve ter projetos separados para iOS e Android, mesmo que os designs sejam idênticos. Isso ocorre porque o Zeplin irá gerar um código diferente baseado no tipo de projeto.
• Selecione a resolução do projeto que corresponde às suas pranchetas do Sketch (por exemplo, 1x, 320px).

5. Exporte as pranchetas do Sketch para o Zeplin.

• No Sketch, destaque todas as pranchetas que você gostaria de exportar para o Zeplin.
• Vá para Plugins > Zeplin > Export Selected… ou pressione ⌃⌘E no teclado.
• Em seguida, exportaremos os símbolos do Sketch. Abra a página Símbolos no Sketch e realce todas as pranchetas. Exporte para Zeplin.

6. Organize o projeto no Zeplin.

• Agora que suas pranchetas do Sketch estão no Zeplin, vamos organizar a arte em seções.
• Na visualização do painel do seu projeto, selecione telas semelhantes para agrupar em categorias. Uma vez destacado, clique com o botão direito e selecione “Nova Seção da Seleção”. Repita isso até que seu arquivo Zeplin esteja devidamente organizado.

7. Utilize componentes no Zeplin.

Talvez um dos recursos mais úteis do Zeplin seja a capacidade de organizar ativos em bibliotecas de componentes. Isso é importante quando os designs de um projeto são desenvolvidos para várias plataformas por diferentes membros da equipe. A unificação do design é essencial, como o designer do Airbnb Karri Saarinen descreve em Construindo uma linguagem visual:

Um sistema de design unificado é essencial para construir melhor e mais rápido; melhor porque uma experiência coesa é mais facilmente compreendida por nossos usuários e mais rápida porque nos dá uma linguagem comum para trabalhar.

• Selecione a guia “Styleguide” na parte superior central do Zeplin (ao lado de “Dashboard”).
• Uma vez na guia "Styleguide", selecione a guia secundária, "Components". Aqui, você verá todos os seus símbolos exportados do Sketch.
• Organize-os em seções como "Ícones", "Imagens", "Elementos comuns" etc. Você pode aprender mais sobre a guia Componentes do guia de estilo do seu projeto no Zeplin aqui.

8. Exporte guias de estilo do Zeplin.

• Na visualização Dashboard do seu projeto Zeplin, localize o botão “Share” no canto superior direito do aplicativo.
• Selecione “Compartilhar” e encontre “Cena” na parte inferior do menu. Selecione "Ativar" e depois "Abrir". Isso gerará um guia de estilo dinâmico para seu projeto. Compartilhe o URL com sua equipe.

9. Anote seus designs no Zeplin.

• Adicionar notas aos designs é fácil com o Zeplin. Na visualização detalhada de uma tela, selecione o ícone de adicionar nota e fixe sua nota em um componente.
• Você pode adicionar uma nota pressionando Cmd ( Ctrl para usuários de Windows e Linux) e clicando em qualquer lugar na tela.
• Você pode até mencionar outros companheiros de equipe com “@” e eles receberão uma notificação.

10. Colabore, compartilhe e use o controle de versão.

• Agora que seu arquivo Zeplin está pronto para ser compartilhado com sua equipe, convide usuários pelo endereço de e-mail ou envie a URL do projeto.
• Continue atualizando seu arquivo Zeplin exportando pranchetas do Sketch.
• O Zeplin controlará automaticamente a versão de seus arquivos e você poderá continuar colaborando com os membros da equipe usando essa dinâmica “fonte da verdade”.

Conclusão

Criar um fluxo de trabalho dinâmico, organizado e colaborativo entre as equipes de design e desenvolvimento é essencial para criar ótimos produtos digitais. Ter uma ponte de fluxo de trabalho como o Zeplin capacita os designers a fazer anotações nas telas e facilita a fase de transferência muitas vezes temida com especificações completas e precisas.

A flexibilidade de atualizar ativos dinamicamente de uma fonte central, como um símbolo no Sketch exportado para um componente no Zeplin, cria uma enorme flexibilidade. Os engenheiros podem exportar ativos facilmente para código nativo, economizando tempo e tédio.

Embora UX pensativo e designs esteticamente bonitos sejam a raiz de um produto de sucesso, o processo de colocar esse design nas mãos dos usuários é fundamental.

Os designers que desejam ser eficientes e confiar em uma única “fonte de verdade” devem considerar o fluxo de trabalho Sketch to Zeplin descrito acima. O poder por trás do relacionamento robusto de software entre essas duas ferramentas de design ajudará os designers e as equipes de desenvolvimento a chegar à linha de chegada com maior facilidade e satisfação.

• • •

Leia mais no Blog Toptal Design:

• Adobe XD vs. Sketch – Qual ferramenta UX é ideal para você?
• Como construir uma estrutura de design eficaz (inclui uma estrutura de interface do usuário de esboço gratuita)
• Coisas que você pode não saber sobre tipografia no Sketch
• Familiarizando-se com o desenvolvimento de plug-ins do Sketch
• Criando ilustrações alucinantes com Sketch e Looper em pouco tempo