Os 8 melhores recursos do aplicativo Anima que todos os designers devem usar

Uma plataforma unificada de design para código como o Anima pode ajudá-lo a acelerar os projetos de desenvolvimento de sites e aplicativos.

Anima é um plug-in de design para código para Figma, Adobe XD e Sketch. Ele permite que os designers criem protótipos de alta fidelidade para aplicativos móveis, páginas de destino ou sites, e os desenvolvedores podem facilmente obter códigos responsivos, limpos e reutilizáveis ​​que também estão prontos para produção.

Este artigo irá apresentar os recursos de design e codificação do plug-in Anima. Continue lendo para descobrir se este aplicativo será útil para seus projetos de design de IU / UX.

1. Conversão de Código

O Plug-in Anima converte rapidamente designs visuais de aplicativos móveis ou sites em códigos amigáveis ​​ao desenvolvedor. Você pode obter códigos em diferentes linguagens de desenvolvimento, como Vue, React, CSS, Sass e HTML. Os códigos que o Anima gera são acionáveis ​​e não apenas gerados por máquina.

Os desenvolvedores podem navegar por todo o código de design e fazer as alterações que desejarem. Eles também podem verificar quaisquer alterações no mesmo espaço de trabalho, pois o Anima exibe uma representação gráfica do código de programação.

A Anima está trabalhando em projetos para oferecer novas opções de conversão de código para Swift, ReactNative e Angular.

2. Crie protótipos de alta fidelidade

O plug-in Anima ajuda a criar protótipos de alta fidelidade de seus projetos de design Adobe XD, Figma ou Sketch. Você pode ver e interagir com um protótipo que realmente lembra o site ou aplicativo final.

Relacionado: Os melhores recursos do Figma que todos os designers deveriam usar

Você pode incorporar pontos de interrupção em seus elementos de design e visualizar seu protótipo em uma visualização de navegador ao vivo. Você pode fazer ajustes à medida que revisa a aparência final nos tamanhos de sites, tablets ou telas de dispositivos móveis.

O plug-in também oferece efeitos integrados para transformar designs estáticos em elementos dinâmicos. Você pode incluir animação de rolagem paralaxe, menus suspensos, efeitos de foco, animações de carregamento de tela, vídeos e muito mais.

Em resumo, ele permite que você entregue um protótipo de design que possui todos os componentes de interface do usuário e recursos de design necessários.

3. Exportar códigos Vue / React para produção

Você pode exportar facilmente códigos Vue / React do projeto do protótipo para teste, pré-produção e produção. Você também pode desenvolver um site baseado em código rapidamente usando os códigos HTML / CSS de seu projeto de design.

Você poderá publicar seu site diretamente do Figma, Sketch ou Adobe XD. Primeiro, utilize o Pré-visualizar no navegador funcionalidade para testar a aparência do site. Então, basta usar o Sincronizar com a Anima recurso para conectar o projeto ao painel do plug-in do Anima.

Na área de trabalho do projeto Anima, você pode compartilhar o link do site com colaboradores ou clientes. Você também pode exportar códigos HTML / CSS do site e publicá-lo em seu próprio domínio ou compartilhar o código com o desenvolvedor do site para processamento posterior.

4. Trabalho com design de materiais

A Anima traz para você o que há de novo Design material biblioteca com base nas diretrizes mais recentes do Google. Você pode acessar a biblioteca do Material Design no Biblioteca de Widget do plug-in Anima para Adobe XD, Figma ou Sketch.

Os componentes do material Anima são elementos de bloco de construção interativos para a criação de IU moderna e elegante para sites ou aplicativos móveis. Você pode navegar em uma lista enorme de componentes e simplesmente arrastar e soltar em sua área de trabalho de design do Figma, Adobe XD ou Sketch.

A partir de agora, a biblioteca do Anima Material Design consiste em nove menus de componentes: Botão, Caixa de seleção, Lista suspensa, FAB, Ícone de fonte do Google, Botão de rádio, controle deslizante, botão e campo de texto.

Relacionado: O que é material para você? Tudo o que você precisa saber sobre o novo visual do Android

O desenvolvedor também afirma que o Anima é a única plataforma que oferece designs de materiais realmente funcionais, dinâmicos e responsivos. Esses elementos de design também são convertidos automaticamente em seus códigos correspondentes.

5. Teste de protótipo baseado em código

Você pode usar ferramentas de design populares como Adobe XD, Figma e Sketch para projetos de design de IU. No entanto, eles não suportam prototipagem baseada em código e ao vivo. O Anima é um dos plug-ins de tendência que pode gerar o código necessário para o teste de protótipo.

Ferramentas de teste de protótipo como Fullstory e Hotjar requerem o seguinte em seu projeto de design para testes de usuário bem-sucedidos:

1. Elementos de design responsivo.
2. Botões interativos, menus suspensos, campos de texto e mídia.
3. Um código funcional que você pode carregar nas ferramentas de teste acima.

O plug-in Anima ajuda você a atender a todos os requisitos acima para um teste bem-sucedido e sem esforço do seu site ou protótipo de aplicativo móvel.

Anima faz colaboração visual no design e projetos de desenvolvimento mais fáceis com comentários em tempo real. Se você está colaborando com várias pessoas, como gerentes de projeto, designers, desenvolvedores e clientes, então este é o meio de comunicação perfeito para todos.

Em vez de descrever o andamento do seu trabalho por e-mail, escreva comentários curtos diretamente no projeto. Seu colaborador pode ver exatamente o que você está tentando transmitir. Ao visualizar o cenário dessa forma, todos economizam tempo e evitam conflitos em potencial.

7. Gerenciar e compartilhar componentes

O espaço de trabalho colaborativo da Anima é o lugar central onde cada membro do projeto compartilha e gerencia componentes ou ativos. Você pode facilmente evitar perder tempo ao pesquisar componentes de design ou ativos de código durante as reuniões do projeto.

O Modo de Código divide o espaço de trabalho em três seções distintas. Você pode acessar Componente e Guia de estilo no menu inferior da tela. No menu do lado direito, você tem todos os seus ativos no Bens aba.

No centro da tela, você tem a exibição em tempo real do design. Os designers também podem construir uma biblioteca de componentes personalizados para a referência do desenvolvedor.

8. Trabalhe em Live Drafts

Muitos aplicativos móveis e projetos de desenvolvimento de sites sofrem com a perda de tempo devido a várias iterações. Na maioria dos casos, essas iterações são simplesmente para pequenas alterações que um designer ou desenvolvedor pode fazer em minutos.

Seu designer e desenvolvedor podem trabalhar no projeto continuamente sem perder tempo. O designer pode sincronizar a nova versão do protótipo do Figma, Sketch ou Adobe XD para o painel do projeto Anima. A partir daí, o desenvolvedor pode acessar o novo design e continuar com o projeto. Assim, você e sua equipe economizam um tempo precioso trabalhando em rascunhos ao vivo.

Design de acordo com o código feito sem esforço com o Anima

Os recursos mencionados acima sugerem claramente que o plug-in do Anima de design-to-code removerá vários gargalos que muitos projetos de desenvolvimento de UI / UX sofrem. O designer e desenvolvedor de seu aplicativo ou site pode trabalhar em conjunto para entregar um protótipo funcional que se assemelhe à sua visão.

Esqueça os aborrecimentos de transferências de design desajeitadas, códigos de design falhos e atrasos na obtenção de um site ou aplicativo ativo. Agora você pode se concentrar mais nos elementos de design gráfico para impressionar seu público-alvo.

11 elementos básicos de design e como usá-los

Novo em design gráfico? Esses elementos são essenciais para criar um design atraente.

Leia a seguir

Sobre o autor