Simplifique a transferência do esboço para o código do Visual Studio com o Indigo.Design

(Este é um artigo patrocinado.) Se você pensar bem, as equipes de software são muito parecidas com as equipes esportivas. Embora cada membro da equipe trabalhe para o mesmo objetivo exato, o papel que desempenham e as ações que executam são muito diferentes uns dos outros.

É por isso que é crucial ter uma maneira perfeita de mover a bola de um membro da equipe para outro.

Infelizmente, o handoff que ocorre dentro das equipes de software não é naturalmente tão suave quanto o que você vê no campo esportivo. E uma das principais razões para isso são os diferentes sistemas e abordagens usados ​​para construir produtos.

Os designers criam interfaces de usuário perfeitas em pixels no Sketch, apenas para traduzi-las em uma linguagem que os desenvolvedores possam usar ao criar aplicativos no IDE do Visual Studio Code. Sem uma maneira perfeita de mover designs de produtos pelo pipeline, essas ineficiências levam a retrabalhos e depurações caros depois que um aplicativo é transferido do designer para o desenvolvedor.

Escusado será dizer que uma solução para o problema de transferência do Sketch-to-IDE está chegando há muito tempo. Não é que as equipes de software não saibam como colaborar ou se comunicar bem umas com as outras. É só que seus sistemas e estratégias díspares tornam a transição de uma equipe para outra desajeitada, demorada e cheia de erros.

Hoje, vamos ver por que isso acontece e como sua agência pode resolver o problema com dois plugins e uma plataforma de prototipagem em nuvem da Indigo.Design.

Onde o handoff designer-desenvolvedor dá errado?

Primeiro, o que devemos realmente perguntar é:

Por que o handoff designer-desenvolvedor é um problema tão grande?

Nick Babich escreveu recentemente sobre como os designers se esforçam para criar soluções digitais que são perfeitamente medidas e consistentemente elaboradas. Mas os sistemas de design não se traduzem fluentemente em sistemas de desenvolvimento.

Quanto mais o designer faz com uma interface, mais ele precisa se comunicar com um desenvolvedor. Portanto, não basta entregar um arquivo de design do Sketch e deixar o desenvolvedor executar com ele. Os designers precisam fornecer especificações de design que expliquem como todas as peças móveis precisam ser dispostas, espaçadas, estilizadas, coloridas, envolvidas e assim por diante.

Tem sido a única maneira de garantir que um aplicativo acabe com pixels perfeitos no final. Mesmo assim, ainda requer muita implementação por parte do desenvolvedor, uma vez dentro do IDE.

Como você pode imaginar, todo esse processo leva muito tempo para o designer. Mas sem especificações de design, os desenvolvedores acabam tendo que jogar um jogo arriscado de adivinhação.

Além disso, os desenvolvedores normalmente não têm o hábito de codificar com HTML e CSS, o que é um trabalho tedioso e representa apenas a interface do usuário. Há muito mais código nos bastidores que faz um aplicativo da Web funcionar e nem todos os desenvolvedores são adeptos ou interessados ​​em aprender a escrever a marcação da interface do usuário. Quando eles são forçados a essa posição, a curva de aprendizado íngreme adiciona mais tempo aos projetos e os retrabalhos e depurações resultantes fazem com que os custos saiam do controle.

Então, realmente, a transferência de designer-desenvolvedor tornou-se uma questão de tempo de quem podemos nos dar ao luxo de desperdiçar?

“

É o designer que tem que redline tudo para que o desenvolvedor saiba como transformar o design em realidade?

Ou:

É o desenvolvedor que tem que olhar para um design, medir manualmente tudo na tela e esperar que eles acertem todas as especificações apenas olhando para ele?

Ninguém ganha em nenhum dos cenários. E você vai corroer suas margens de lucro no processo.

Pode haver algumas agências que acreditam que forçar designers e desenvolvedores a trabalhar na mesma plataforma é a melhor solução. Dessa forma, não há necessidade de fazer toda essa tradução ou interpretação durante a transferência do Sketch para o Visual Studio Code. Mas isso geralmente resulta em criatividade sufocada por parte do designer ou em uma capacidade prejudicada de criar soluções de software eficazes por parte do desenvolvedor.

Então, qual é a resposta?

Melhore o Handoff Designer-Desenvolvedor com o Indigo.Design

Não é como se o Indigo.Design fosse a primeira plataforma a tentar resolver problemas de transferência para equipes de software. A InVision e a Zeplin ofereceram suas próprias soluções.

Cada uma dessas plataformas tornou as especificações visuais mais acessíveis para os desenvolvedores e, consequentemente, melhorou a eficiência das equipes de designers-desenvolvedores. Especificamente:

• Os designers não precisam mais marcar a interface do usuário, pois as plataformas lidam com as linhas vermelhas.
• Os desenvolvedores podem extrair manualmente as especificações de design sem a ajuda dos designers.

Dito isso, com plataformas como InVision e Zeplin, os desenvolvedores ainda precisam inspecionar cada elemento e codificá-lo manualmente com base nas especificações extraídas. Essas plataformas também precisam criar uma ponte perfeita entre o Sketch e o Visual Studio Code.

Então, se designers e desenvolvedores querem trabalhar da forma mais eficiente possível uns com os outros, a Indigo.Design desenvolveu uma resposta para seu problema:

Etapa 1: projetar no Sketch

Há realmente apenas uma coisa nessa fase que precisa mudar para o designer. O aplicativo, as páginas e o fluxo ainda serão projetados como de costume no Sketch, usando componentes do Indigo.Design UI Kit.

No entanto, não há mais necessidade de compilar redlines ou especificações para o aplicativo. A Indigo.Design cuida disso para você.

Para aproveitar isso, seu designer precisa abandonar qualquer sistema de prototipagem que estivesse usando antes. Com este novo sistema simplificado e livre de erros, seu designer pode facilmente enviar seus projetos para a nuvem usando o plug-in Indigo.Design.

Isso pode ser acessado no Plugins menu > Indigo.Design > Publish Prototype :

Não há necessidade de o designer exportar arquivos e fazer upload em outro sistema para que os clientes revisem ou os desenvolvedores trabalhem. Eles ficam exatamente onde estão para publicar o protótipo.

Leva apenas cerca de um minuto para concluir o processo também. O designer recebe então um link para a nuvem que ele pode compartilhar com clientes e outras pessoas para revisar e comentar sobre o protótipo.

Etapa 2: trabalhar na Indigo.Design Cloud

É fácil colocar outras pessoas na nuvem. O link fornecido os levará para a nuvem de experiência, onde o design pode ser revisado:

Também é fácil deixar comentários em cima do design. Tudo o que os usuários precisam fazer é abrir o painel Comentários, soltar um alfinete e anexar seu comentário a ele:

Há mais neste software de colaboração do que isso. O protótipo também pode ser editado na nuvem.

Para acessar isso, o designer, desenvolvedor e qualquer outra pessoa com acesso de grupo localizará o projeto na biblioteca de protótipos:

Clique em “Edit Prototype” para entrar no editor Indigo.Design:

Depois que uma tela é selecionada, o designer pode adicionar um ponto de acesso para criar uma nova interação no aplicativo.

Você também pode usar o editor Indigo.Design para inspecionar as especificações da interface do usuário do aplicativo:

Passar o mouse sobre um elemento revela especificações de espaçamento relativo. Clicar em um elemento revela muito mais detalhes:

O desenvolvedor também pode editar ou copiar o CSS escrito e emitido de forma limpa deste painel também. (Embora eles não precisem, como explicarei na próxima etapa.)

Entende o que quero dizer sobre economizar tempo dos designers na geração de especificações? Simplesmente empurrando este projeto para a nuvem Indigo.Design, as especificações são geradas automaticamente.

Etapa 3: criar no código do Visual Studio

Agora, digamos que seu design seja bom o suficiente para entrar em desenvolvimento. A mudança de um protótipo do Indigo.Design para o Visual Studio Code é tão fácil quanto a mudança do Sketch.

Recupere o link de nuvem original fornecido pelo plug-in Indigo.Design no Sketch. Se você não tem mais, tudo bem. Você pode recuperá-lo na tela de bibliotecas no Indigo.Design:

Tudo o que o desenvolvedor precisa fazer agora é instalar a extensão Indigo.Design Code Generator. Isso é o que permite que o Visual Studio Code fale diretamente com o Indigo.Design para recuperar o protótipo.

Depois que a extensão estiver configurada, o desenvolvedor fará o seguinte:

Abra o shell do aplicativo que já foi desenvolvido. Em seguida, inicie o Indigo.Design Code Generator. É aqui que você inserirá o link da nuvem:

Isso revelará um pop-up com os designs de aplicativos que residem na nuvem, bem como os componentes individuais que os compõem.

O desenvolvedor tem a opção de gerar código para todos os componentes do aplicativo ou ir componente por componente, verificando apenas os que precisam. Isso é especialmente útil se um aplicativo estiver em andamento e o desenvolvedor precisar apenas importar novos componentes para o VSC.

Ao clicar em “Gerar Ativos de Código”, os componentes selecionados serão adicionados ao Angular como HTML e CSS legível e semântico.

O desenvolvedor agora tem menos com o que se preocupar em reconstruir estilos ou configurar outras especificações. Em vez disso, eles podem gastar seu tempo construindo funcionalidades de negócios e realmente refinando o produto.

Uma Nota Sobre Este Processo

É importante ressaltar que esse fluxo de trabalho Sketch – cloud – Visual Studio Code não funciona apenas com a primeira iteração de um design. Os desenvolvedores podem construir enquanto os designers trabalham por meio de feedback com clientes ou estudos de usabilidade com usuários – algo que a Indigo.Design levou em conta.

Então, digamos que o designer moveu uma interface de usuário de formulário de login por meio do Indigo.Design e o desenvolvedor gerou o código para fazer as coisas acontecerem.

Enquanto trabalhava no formulário, o desenvolvedor implementou algum código de autenticação no arquivo TypeScript.

Enquanto isso, porém, o designer recebeu uma mensagem do cliente, informando que um novo Login Universal com o Google precisava ser implementado. O que significa que o UX precisa mudar.

Quando a atualização estiver pronta e o protótipo sincronizado com o Indigo.Design, o designer enviará uma mensagem ao desenvolvedor para informá-lo sobre as alterações. Assim, o desenvolvedor inicia o Visual Studio Code Generator mais uma vez. No entanto, ao regenerar a tela de login, eles selecionam "Não substituir" no arquivo TypeScript. Dessa forma, eles podem preservar o código que escreveram enquanto importam simultaneamente o novo HTML e CSS.

O desenvolvedor pode então fazer os ajustes necessários com base no design atualizado.

Embrulhar

A Indigo.Design criou efetivamente uma transferência eficiente e livre de bugs para designers que trabalham no Sketch e desenvolvedores que trabalham no Visual Studio Code.

Os designers não perdem tempo projetando em uma plataforma e prototipando em outra, elaborando especificações de design ou lidando com exportações de arquivos. Os desenvolvedores não perdem tempo tentando recriar a intenção do projeto a partir de um arquivo estático.

Como Jason Beres, vice-presidente sênior de desenvolvimento de produtos da Indigo.Design, disse:

Com a geração de código Indigo.Design, todos esses bugs são 100% evitados. Não apenas o espírito do design é mantido, mas HTML e CSS perfeitos para pixels são criados para que o desenvolvedor não fique na infeliz posição de ter que combinar manualmente o design.

E ao resolver os problemas técnicos nos fluxos de trabalho e na entrega do designer-desenvolvedor, sua agência reduzirá bastante o custo de retrabalho e depuração. Você também aumentará os lucros fornecendo à sua equipe de software uma maneira mais eficiente e rápida de obter aplicativos durante o processo e em condições perfeitas de pixel.