A promessa de um design perfeito para a tradução do código remonta aos primeiros criadores de páginas WYSIWYG. Apesar do objetivo admirável, sua maior falha (entre muitas) era o código horrível que geravam. O ceticismo permanece até hoje e sempre que essa ideia reaparece, as maiores preocupações estão sempre relacionadas à qualidade e facilidade de manutenção do código.
Isso está prestes a mudar, pois os novos produtos deram grandes saltos na direção certa. Seu objetivo final é automatizar o processo de design para código, mas não à custa da qualidade do código. Um desses produtos, Anima , está tentando finalmente preencher a lacuna fornecendo um design completo para plataforma de desenvolvimento.
O que é Anima?
Anima é uma ferramenta de design para desenvolvimento. Seu objetivo é transformar o processo de transferência de design em uma colaboração contínua. Os designers podem usar o Anima para criar protótipos totalmente responsivos que parecem e funcionam exatamente como o produto acabado (sem necessidade de codificação). Os desenvolvedores , por sua vez, podem pegar esses designs e exportá-los para um código React/HTML amigável ao desenvolvedor. Em vez de codificar a IU do zero, eles são livres para se concentrar na lógica e na arquitetura.
Ele faz isso com a ajuda de um plug-in que se conecta diretamente à sua ferramenta de design e permite a configurar designs e sincronizá-los com a plataforma da Web do Anima. É aí que o resto da equipe pode acessar o protótipo, discuti-lo e escolher especificações ou ativos úteis. Além da funcionalidade de colaboração, dá aos desenvolvedores uma vantagem, graças ao código gerado.
Isso pode fazer uma grande diferença na dança tradicional de vaivém que existe entre designers e desenvolvedores. Ele mantém tudo em um só lugar, em sincronia e permite que ambos os lados façam alterações usando código ou ferramentas de design.
Instalando o plug-in e configurando um projeto
Começar com Anima é simples. Primeiro você precisa criar uma conta e depois instalar o plugin. Embora eu use o Figma para este passo a passo, o Anima oferece suporte a todas as principais ferramentas de design: Sketch, Figma e Adobe XD.
Depois de fazer isso, certifique-se de criar um projeto na plataforma do Anima-é onde nossos designs aparecerão quando os sincronizarmos.
O próprio plugin é separado em três seções principais, cada uma com uma lista de opções. Muito do que faremos é simplesmente selecionar uma dessas opções e, em seguida, aplicar uma camada ou quadro específico na Figma .
Criando um protótipo responsivo
Para o propósito deste artigo, criamos uma experiência de integração que será transformada em um protótipo interativo. Até agora, preparamos telas para os três pontos de interrupção mais comuns e os vinculamos usando os recursos de prototipagem do Figma.
Uma das coisas interessantes que podemos alcançar com o Anima é fazer protótipos que se ajustam a todos os tamanhos de tela. Protótipos tradicionais feitos de imagens clicáveis são estáticos e costumam falhar em diferentes tamanhos de tela.
Para fazer isso, clique na opção”Breakpoints”e o Anima irá pedir os frames que você deseja conectar. Selecione todos os quadros para adicioná-los como pontos de interrupção. Em seguida, confirme sua seleção clicando em”Concluído”.
Quando estiver pronto, clique em”Visualizar no navegador”para ver o resultado. É quando o Anima converterá seus designs em código.
A primeira coisa que você notará é que o protótipo agora foi transformado em HTML e CSS. Todo o conteúdo é selecionável e reflui conforme a tela é redimensionada. Isso fica mais visível quando você seleciona o modo”Responsivo”no visualizador de protótipo e brinca com diferentes tamanhos de tela.
Para alcançar transições mais suaves, é importante usar os recursos de restrição do Figma ao projetar seus componentes. Certifique-se de marcar também a caixa”Usar restrições Figma”na seção”Layout”do plugin.
Dê vida aos seus designs com camadas inteligentes
Podemos levar as coisas um pouco mais longe. Como o Anima converte projetos em código, as possibilidades são infinitas para o que podemos adicionar para tornar nosso protótipo mais realista.
Animações e efeitos de foco seriam uma ótima maneira de deixar o protótipo mais vivo e impressionar as partes interessadas. O Anima oferece uma variedade de opções que podem ser aplicadas a qualquer camada ou componente. No nosso caso, selecionaremos a camada do título e, em seguida, escolheremos a”animação de entrada”e”Fade In”. No campo de atraso, adicionaremos 0,5 .
Para cada campo, adicionaremos um efeito de brilho ao passar o mouse. Selecione a camada de campo, depois”Efeito de foco”e escolha”Brilho”. Repita o mesmo para o botão.
Agora que aplicamos todas as alterações, podemos ver que o protótipo começa a parecer um produto real.
Um dos recursos exclusivos que o Anima oferece é a capacidade de adicionar campos e formulários ativos aos protótipos. Como estamos projetando uma experiência de integração, isso será realmente útil para nós. A entrada de dados é um dos maiores pontos de rotatividade em qualquer experiência de produto e é realmente difícil testar ideias sem levá-las em consideração.
Semelhante a como adicionamos os efeitos anteriores, agora selecionamos o componente de campo e escolhemos”Campo de texto”. A partir daí, teremos que escolher o tipo de campo de que precisamos. Se escolhermos um campo de senha, por exemplo, a entrada será ocultada e o Anima adicionará uma funcionalidade de mostrar/ocultar ao campo.
Como você pode ver, os campos agora funcionam conforme o esperado. Também é possível reunir todos os dados coletados desses campos em uma planilha. Selecione o botão”Continuar”e clique na opção”Botão Enviar”no Anima. Isso abrirá uma caixa de diálogo adicional, onde precisamos marcar a caixa”Adicionar à planilha”e selecionar destinos de redirecionamento em caso de sucesso ou falha.
A seguir, adicionaremos uma animação Lottie para nossa tela de sucesso, pois será uma ótima maneira de tornar a experiência um pouco mais envolvente. Para isso, precisamos adicionar uma camada de espaço reservado no lugar da animação, depois selecioná-la e escolher a opção”Vídeo/GIF/Lottie”no plugin.
Em seguida, colaremos o URL de nossa animação Lottie e marcaremos as caixas de”Reprodução automática”e”Sem controles”. Em nosso caso, não queremos nenhum controle do player de vídeo, pois esta é uma animação de sucesso.
Aplique as alterações e abra o modo de visualização para ver os resultados. Como você pode ver, ao preencher os campos e enviar o formulário, somos redirecionados à nossa página de sucesso, com uma animação em loop.
Compartilhe designs com o resto da equipe
Até então, estávamos trabalhando em um rascunho que era visível apenas para nós. Agora é a hora de compartilhar com o resto da equipe . A maneira de fazer isso no aplicativo é clicando em “Visualizar no navegador”, ver como fica e, se estiver satisfeito, continuar com “Sincronizar”.
Todos os convidados para o projeto agora terão acesso aos designs e poderão visualizar, deixar comentários e inspecionar o código.
Desenvolvedores podem obter código React reutilizável
Conforme mencionado anteriormente, como desenvolvedores, geralmente somos céticos em relação a ferramentas que geram código, principalmente porque escrever algo do zero é sempre mais rápido do que refatorar algo que foi mal escrito. Para evitar isso, a Anima adotou algumas práticas recomendadas para manter o código limpo, reutilizável e conciso.
Quando mudamos para o modo”Código”, podemos passar o mouse e inspecionar os elementos do nosso design. Sempre que selecionamos um elemento, veremos o código gerado abaixo. A visualização padrão é React , mas também podemos mudar para HTML e CSS. Também podemos ajustar preferências na sintaxe e convenções de nomenclatura.
As classes reutilizam os nomes das camadas em sua ferramenta de design, mas os designers e desenvolvedores também podem renomear as camadas. Ainda assim, é importante concordar com convenções de nomenclatura unificadas que sejam claras e diretas para designers e desenvolvedores.
Mesmo que tenhamos deixado algumas camadas sem nome, os desenvolvedores podem realmente substituí-las e fazer alterações quando necessário. Esta experiência me lembra o recurso Inspect element do Chrome, e todas as alterações são salvas e sincronizadas com o projeto.
Se você estiver usando o Vue ou o Angular, espera-se que o Anima comece a oferecer suporte a essas estruturas também em um futuro próximo.
Olhando para o futuro
Como podemos ver, a lacuna entre o design e o código continua diminuindo. Para quem escreve código, usar essa ferramenta é muito prático, pois pode reduzir muito trabalho repetitivo no frontend. Para quem projeta, permite prototipagem, colaboração e sincronização que seriam difíceis de conseguir com o envio de imagens estáticas de um lado para outro.
O que já é certo é que o Anima elimina muitos desperdícios de atividades na mão-fora do processo e permite que designers e desenvolvedores se concentrem no que importa: construir produtos melhores. Estou ansioso para ver o que vem a seguir no Anima!
