Do design ao código React amigável ao desenvolvedor em minutos com o Anima

Este é um artigo patrocinado amigável escrito com o apoio de nossos queridos amigos da Anima, que o ajudam a projetar protótipos de alta fidelidade totalmente interativos com Sketch, Figma ou Adobe XD. Obrigado!

A promessa de design perfeito para tradução de código remonta aos primeiros construtores de páginas WYSIWYG. Apesar do objetivo admirável, sua maior falha (entre muitas) foi o código horrível que eles geraram. O ceticismo permanece até hoje e sempre que essa ideia reaparece, as maiores preocupações estão sempre relacionadas à qualidade e manutenibilidade do código.

Isso está prestes a mudar, pois novos produtos deram grandes saltos na direção certa. Seu objetivo final é automatizar o processo de design para codificar, mas não à custa da qualidade do código. Um desses produtos, Anima, está tentando finalmente preencher a lacuna fornecendo um design completo para a plataforma de desenvolvimento.

O que é Anima?

Anima é uma ferramenta de design para desenvolvimento. O objetivo é transformar o processo de entrega de design em uma colaboração contínua. Os designers podem usar o Anima para criar protótipos totalmente responsivos que pareçam e funcionem exatamente como o produto final (sem necessidade de codificação). Os desenvolvedores , por sua vez, podem pegar esses designs e exportá-los para código React/HTML amigável ao desenvolvedor. Em vez de codificar a interface do usuário do zero, eles podem se concentrar na lógica e na arquitetura.

Ele faz isso com a ajuda de um plugin que se conecta diretamente à sua ferramenta de design e permite configurar designs e sincronizá-los com a plataforma web do Anima. É aí que o restante da equipe pode acessar o protótipo, discuti-lo e escolher especificações ou recursos ú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 vai e vem que acontece entre designers e desenvolvedores. Ele mantém tudo em um só lugar, sincronizado e permite que ambos os lados façam alterações usando código ou ferramentas de design.

Instalando o plugin e configurando um projeto

Começar com o Anima é simples. Primeiro você precisa criar uma conta e depois instalar o plugin. Embora eu esteja usando o Figma para este passo a passo, o Anima suporta todas as principais ferramentas de design: Sketch, Figma e Adobe XD.

• Anima para Sketch
• Anima para Figma
• Anima para Adobe XD

Feito isso, certifique-se de criar um projeto na plataforma da Anima — é onde nossos designs aparecerão quando os sincronizarmos.

O plugin em si é separado em três seções principais, cada uma com uma lista de opções. A maior parte do que faremos é simplesmente selecionar uma dessas opções e, em seguida, aplicar uma camada ou quadro específico no Figma .

Criando um protótipo responsivo

Para o propósito do artigo, projetamos 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 conectamos usando os recursos de prototipagem do Figma.

Uma das coisas interessantes que podemos alcançar com o Anima é fazer protótipos que se encaixem em todos os tamanhos de tela. Os protótipos tradicionais feitos de imagens clicáveis ​​são estáticos e muitas vezes falham em diferentes tamanhos de tela.

Para isso, clique na opção “Breakpoints” e o Anima 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 converte seus designs em código.

A primeira coisa que você notará é que o protótipo agora está transformado em HTML e CSS. Todo o conteúdo é selecionável e reflui conforme a tela é redimensionada. Isso é mais visível quando você seleciona o modo “Responsivo” no visualizador de protótipos e joga com diferentes tamanhos de tela.

Para obter transições mais suaves, é importante usar os recursos de restrição do Figma ao projetar seus componentes. Certifique-se também de marcar a caixa “Use Figma Constraints” 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 designs em código, as possibilidades são infinitas para as coisas que podemos adicionar para tornar nosso protótipo mais realista.

Animações e efeitos de foco seriam uma ótima maneira de tornar 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, vamos selecionar a camada do título, depois escolher 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 do campo, depois “Hover effect” e escolha “Glow”. 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 é muito difícil testar ideias sem levar isso 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 que precisamos. Se escolhermos um campo de senha, por exemplo, a entrada ficará oculta 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, em seguida, clique na opção “Enviar botão” no Anima. Isso abrirá uma caixa de diálogo adicional, onde precisamos marcar a caixa “Adicionar à planilha” e selecionar os destinos de redirecionamento em caso de sucesso ou falha.

Em seguida, 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 placeholder no lugar da animação, depois selecioná-la e escolher a opção “Vídeo/GIF/Lottie” no plugin.

Então vamos colar o URL da nossa animação Lottie e marcar as caixas de “Autoplay” e “Sem controles”. No nosso caso, não queremos ter 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, quando preenchemos os campos e enviamos o formulário, somos redirecionados para nossa página de sucesso, com uma animação em loop.

Compartilhe designs com o resto da equipe

Até aquele momento, estávamos trabalhando em um rascunho que era visível apenas para nós. Agora é hora de compartilhá-lo com o resto da equipe . A forma de fazer isso no app é clicando em “Visualizar no navegador”, verificar como fica, e se estiver satisfeito, continue 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

Como 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, o 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 elementos do nosso design. Sempre que selecionarmos um elemento, veremos o código gerado abaixo. A visualização padrão é React , mas também podemos alternar para HTML e CSS. Também podemos ajustar as preferências nas convenções de sintaxe e de nomenclatura.

As classes reutilizam os nomes das camadas em sua ferramenta de design, mas 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. Essa experiência me lembra o recurso de elemento Inspecionar do Chrome, e todas as alterações são salvas e sincronizadas com o projeto.

Se você estiver usando Vue ou Angular, espera-se que o Anima também comece a oferecer suporte a esses frameworks em um futuro próximo.

Esperando ansiosamente

Como podemos ver, a lacuna entre design e código continua diminuindo. Para quem escreve código, usar essa ferramenta é muito prático, pois pode reduzir muito o trabalho repetitivo no frontend. Para quem projeta, permite prototipagem, colaboração e sincronização que seriam difíceis de alcançar com o envio de imagens estáticas para frente e para trás.

O que já é certo é que o Anima elimina muitas atividades desnecessárias no processo de transferência 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!