Apresentando: Automação do sistema de design

Tenho o prazer de anunciar o lançamento da automação do sistema de design da Anima!

O objetivo da Anima com a automação do sistema de design é ajudar as principais equipes de produtos, designers e desenvolvedores, a construir e manter sistemas de design mais rapidamente, com automação. A velocidade de design e desenvolvimento aumentará e permitirá ciclos de vida de desenvolvimento curtos. Obtenha acesso aqui .

O futuro do design de produto e front-end

A Gartner nomeou recentemente a Anima como um fornecedor representativo de design-to-code e a maneira moderna de fazê-lo. Com mais de 350 mil instalações na comunidade Figma, o Anima é a integração nº 1 na categoria 'desenvolvimento' no Figma. Lideramos o movimento design-to-code e temos uma tese profunda sobre o futuro.

Vimos o design do produto e o front-end se aproximarem na última década. E embora os conceitos estejam se tornando cada vez mais semelhantes, ainda são dois mundos separados. Isso mudará e esses mundos se fundirão gradualmente.

Designers de produto e desenvolvedores front-end são os donos da vitrine digital de todas as empresas atualmente . Essas equipes estarão mais próximas com ferramentas de automação, e a recente onda de IA apenas acelerará a fusão e ampliará seu impacto.

A IA já faz mágica em torno do código e do design. O ChatGPT já pode codificar um método específico e geralmente faz um bom trabalho. Midjourney pode desenhar interfaces agradáveis ​​e simples como uma única imagem. A IA do Anima pode converter designs Figma/XD/Sketch em React e HTML estáticos. Mas este é apenas o começo.

Até 2035, esperamos que a abordagem de basear sistemas de design em bibliotecas de código aberto acelere e gire com IA: as empresas terão componentes e fluxos personalizados sobre componentes e tokens de código aberto, com temas de sua própria marca, é claro.

Os designers de produtos projetarão componentes mais rapidamente com IA, criando temas e misturando componentes existentes em organismos maiores. Os designers de produto adicionarão lógica com IA - Protótipos com microinterações, lógica de interface do usuário e conexão com dados reais serão gerados automaticamente. A IA reutilizará o código existente, tanto proprietário quanto de código aberto.

A IA se tornará o designer e desenvolvedor júnior na equipe que faz o trabalho pesado, mas não faz as ligações. Então, a lacuna entre os protótipos e o produto real desaparecerá, pois tudo será baseado em código de produção. Os engenheiros ainda serão os guardiões da produção.

O primeiro passo para esse futuro começa com o lançamento de hoje.
Começamos do design ao código, e o caminho para o futuro passa pelo código ao design, e é um grande marco. Muita coisa está acontecendo na Anima, e estamos ansiosos para participar ativamente do design do produto e da evolução do front-end.

Dores do sistema de design

Os sistemas de design estão no centro do design de produtos e do desenvolvimento front-end hoje. É assim que nos comunicamos e construímos produtos robustos e coerentes. Os sistemas de design já são a metodologia padrão na maioria das empresas maduras. No entanto, os principais pontos problemáticos para organizações maduras são a manutenção e a adoção do sistema de design entre as equipes.

Conversamos com centenas de equipes durante 2022 e as histórias são semelhantes: todos querem e precisam de um sistema de design. Alguns têm mais recursos para mantê-lo, outros não.

Um sistema de design meio mantido não será adotado e criará desconexões entre designers e desenvolvedores.

A matemática é simples: com 100 componentes em um sistema de design, e cada componente requer 3 dias para ser mantido no Figma por ano (tabelas, gráficos, exibições em árvore e cartões multivariados são alguns dos mais difíceis), você percebe que em pelo menos 1 designer trabalha em tempo integral na manutenção .

Uma única fonte de verdade: Código

A primeira versão da automação do sistema de design trará uma única fonte de verdade, trazendo seus componentes de código para o Figma. O Anima gerará layouts automáticos, variantes e tokens de design diretamente do Storybook. À medida que evolui, a automação do sistema de design sincronizará o design e o código continuamente em ambos os sentidos.

Com uma única fonte de verdade baseada em seu código, as equipes de P&D podem funcionar mais rapidamente, criar produtos robustos e se concentrar na criatividade. A tecnologia reduz o tempo e o esforço necessários para criar e manter um sistema de design. Isso resulta em uma redução significativa do trabalho manual e repetitivo e ajuda a liberar tempo para agregar mais valor aos negócios e focar em tarefas criativas.

Automação do sistema de design — Como funciona

A Anima mantém as equipes de UX e Front-end alinhadas com um sistema de design atualizado no Figma. Com uma única fonte de verdade baseada em seu código, as equipes podem criar produtos robustos mais rapidamente, ignorando o trabalho de manutenção do design e melhorando a comunicação entre designer e desenvolvedor.

1. Transforme seu livro de histórias em uma biblioteca Figma com o Anima:
2. Atualizações contínuas — o Anima enviará atualizações do código para o Figma.
3. Variantes do Figma — o Anima mapeará os estados do código em variantes nativas do Figma .
4. Layout automático — O Anima cria um layout automático baseado em CSS, automaticamente.
• Trechos de código no Figma — Anima adiciona referências a componentes de código com base em variantes.
• Desenvolvedores integrados mais rapidamente — Uma representação exata do código no Figma significa mais reutilização e menos tempo procurando quais funcionalidades existem no código.
• Adoção do sistema de design — Um sistema de design altamente mantido impulsiona a adoção.

A automação do sistema de design da Anima está mudando o jogo para as equipes de design de produto e desenvolvimento front-end. Com uma única fonte de verdade baseada em código, as equipes podem criar e manter seus sistemas de design com mais rapidez, focar na criatividade e agregar mais valor aos negócios.

Junte-se a nós nesta jornada para o futuro do design de produtos e desenvolvimento front-end, onde lideramos o caminho com tecnologia de ponta e um profundo compromisso com a inovação. Obtenha acesso aqui .