Introdução geral
A Anima é uma plataforma que ajuda designers e desenvolvedores a transformar seus projetos em código. Ela suporta a geração de código React, Vue ou HTML diretamente de ferramentas de design como Figma, Adobe XD e Sketch, tornando o desenvolvimento front-end mais rápido e fácil. Os usuários podem usá-lo para criar protótipos de interação de alta fidelidade e também gerar automaticamente códigos que atendam aos padrões de desenvolvimento e possam ser usados diretamente. O objetivo principal do Anima é reduzir a comunicação iterativa entre design e desenvolvimento e aumentar a eficiência da equipe. Ele é adequado para indivíduos ou equipes que desejam passar rapidamente do design para a produção e é especialmente útil para projetos que exigem iteração rápida. A plataforma também tem planos pagos que oferecem recursos mais avançados, como exportações ilimitadas de código e suporte de nível empresarial.
Lista de funções
- Do projeto ao códigoGeração de código React, Vue, HTML e CSS a partir do Figma, Adobe XD ou Sketch.
- protótipo de alta fidelidadeSuporte para adicionar elementos interativos, como formulários, GIFs e vídeos, para criar uma experiência de protótipo realista.
- Sistemas de design automatizadosComponentes de design são automaticamente convertidos em componentes de código e sincronizados com o ambiente de desenvolvimento por meio da funcionalidade Frontier.
- Layout responsivoSuporte para definição de pontos de interrupção e layouts flexíveis garante que o código seja adaptado a diferentes telas.
- Trabalho em equipeOferece recursos de colaboração em tempo real para que as equipes de design e desenvolvimento possam trabalhar em sincronia.
- Personalização de códigoIA: adapta os resultados gerados aos hábitos de código da equipe, próximo às necessidades reais de desenvolvimento.
- Exportar e publicarO código pode ser exportado diretamente ou o protótipo pode ser publicado como um site on-line.
Usando a Ajuda
Como começar a usar o Anima
O uso do Anima não requer um processo de instalação complicado e funciona principalmente por meio de plug-ins e do lado da Web. Abaixo estão as etapas detalhadas:
1. instalação de plug-ins
- Instalação na ferramenta de design::
- Abra o Figma (ou Adobe XD, Sketch).
- Clique em Plugins > Browse All Plugins na barra de menus do Figma.
- Procure por "Anima" e clique em "Instalar".
- Após a conclusão da instalação, o plug-in aparecerá na barra de ferramentas ou no menu do plug-in.
- Registrar uma conta::
- Após abrir o plug-in, será solicitado que você faça login ou se registre.
- Acesse https://www.animaapp.com/, clique em "Sign Up" para registrar uma conta e faça login com seu e-mail e senha.
- Verificar a instalação::
- Depois de instalar o plug-in, abra um projeto na ferramenta de design, clique no ícone do plug-in e veja a interface do Anima.
2. como gerar código
- Preparação do design::
- Conclua o design no Figma, certificando-se de que as camadas estejam claramente nomeadas e que o layout seja lógico (por exemplo, usando o Auto Layout).
- Abra o plug-in Anima::
- Clique no menu do plug-in Figma e selecione Anima.
- Na tela pop-up, selecione a página ou o quadro para o qual você precisa gerar o código.
- Selecione o tipo de código::
- Na interface do plug-in, clique em "Export Code" (Exportar código).
- Selecione o tipo de código de destino: React, Vue ou HTML (com CSS, Tailwind CSS etc.).
- Ajuste das configurações::
- Se você quiser um layout responsivo, clique em "Breakpoints" para definir pontos de interrupção.
- Se você precisar personalizar seu código, ative a opção "Code Personalization" (Personalização de código) e deixe que a IA otimize seu código de acordo com seus hábitos.
- Código de exportação::
- Clique em "Generate" (Gerar) e aguarde alguns segundos para que o código seja gerado.
- Você pode copiar o código para seu ambiente de desenvolvimento ou fazer o download do arquivo ZIP.
- advertência::
- Há um limite para o número de exportações de código na versão gratuita; é recomendável fazer upgrade para a versão Pro (a partir de $31 por mês) para obter mais recursos.
3. criação de protótipos de alta fidelidade
- Adição de interações::
- Selecione os elementos de design no Figma e abra o plug-in Anima.
- Clique em "Add Interactivity" (Adicionar interatividade) e selecione um formulário, vídeo ou animação Lottie etc.
- Defina a ação do acionador, como clicar para pular ou mostrar para ocultar.
- Efeito de visualização::
- Clique em "Preview" (Visualizar) no plug-in para visualizar o protótipo em seu navegador.
- Publicação de protótipos::
- Clique em "Publish" para gerar um link on-line que pode ser compartilhado com sua equipe ou clientes.
- habilidade operacional::
- Use a função "Live Embed" para incorporar o protótipo em uma página da Web para facilitar a exibição.
4. uso do sistema de design automatizado Frontier
- Instalar o Frontier::
- Instale a extensão Frontier no Visual Studio Code (faça o download no site da Anima).
- Faça login na sua conta Anima e conecte-se ao projeto Figma.
- componente de sincronização::
- Marque os componentes que precisam ser sincronizados no Figma.
- Abra o Frontier no VS Code, clique em "Sync" e o design será automaticamente convertido em um componente de código.
- código de gerenciamento::
- O código gerado suporta a integração do Storybook e o CSS é convertido em Layout automático.
- Depois de modificar o código, ele pode ser sincronizado de forma reversa com o Figma por meio do Frontier.
5. funções de trabalho em equipe
- Membros convidados::
- No site da Anima, vá para "Team Settings" (Configurações da equipe).
- Digite o endereço de e-mail de um colega para enviar um link de convite.
- sincronização em tempo real::
- Os membros da equipe podem visualizar os designs e códigos mais recentes no plug-in ou no lado da Web.
- As modificações são atualizadas instantaneamente para reduzir os custos de comunicação.
6. fluxo de operação de funções especiais
- Personalização de código::
- Abra "AI Settings" (Configurações de IA) no plug-in e carregue as amostras de código existentes de sua equipe.
- A IA analisa as regras e estruturas de nomenclatura para gerar um código mais alinhado com os hábitos da equipe.
- design responsivo::
- Selecione "Responsive" (Responsivo) no plug-in e arraste o controle deslizante do ponto de interrupção (por exemplo, 768px, 1200px).
- Visualize diferentes efeitos de tela para garantir a adaptação do código.
- Site de publicação::
- Clique em "Publish as Website" (Publicar como site) no plug-in.
- Configure um nome de domínio (é necessário um plano pago) para gerar um site autônomo.
Recomendações de uso
- primeira tentativaComece com um design simples e familiarize-se com o processo de geração de código.
- Design otimizadoMelhorar a qualidade do código com o Auto Layout do Figma.
- plano de pagamentoPara uso frequente, é recomendável assinar o plano Pro ou Enterprise para desbloquear exportações ilimitadas e suporte premium.