7 dicas do que aprendi sobre AX em uma empresa gigante

Quando criei este site, em 2024, as LLMs ainda não faziam parte da minha rotina. Hoje, elas também fazem parte do trabalho de UX.

O lançamento do Claude Design levantou uma pergunta: vale pedir ao time de design que deixe o Figma e crie experiências direto no código, usando prompts para iterar?

Ainda não tenho uma resposta. Em empresas grandes, essa mudança exige planejamento.

Trabalho na Afya como Lead de DesignOps. No dia a dia vejo a preocupação do time de desenvolvimento, com os processos que protegem a base de código e a empresa. Não dá para liberar esse acesso a todo o time de design de uma hora para outra nem abandonar práticas usadas há anos.

Mas, precisávamos acelerar o desenvolvimento, então, o fim do ano passado, DevEX e DesignOps iniciou um trabalho que combina desenvolvimento assistido por IA e criação de experiências no Figma. Há alguns meses, o time vem reduzindo o tempo necessário para código e craft.

Este post reúne 7 aprendizados de UX desse trabalho.

1. Estruture o arquivo com auto-layout

Nesse fluxo, o auto-layout organiza a estrutura do arquivo. Ele se aproxima da construção em HTML e deixa mais explícitos a hierarquia e o comportamento dos elementos. Se você tem dúvidas sobre auto-layout, estude box model. Esse conceito me ajudou a estruturar melhor os layouts.

2. Dê nomes descritivos às layers

Uma hierarquia de layers bem organizada precisa de nomes claros. Use kebab-case e nomeie cada layer pela função que ela cumpre. Em uma lista de campos, por exemplo, prefira input-name e input-email a nomes genéricos.

3. Registre regras nas anotações

Use anotações para registrar o que o layout não mostra: regras, orientações para desenvolvimento, requisitos de acessibilidade e animações. Nos handoffs, elas reduzem ambiguidades e orientam a implementação.

4. Componentes devem ter anotações de funcionamento

Nos componentes, as anotações descrevem o comportamento de cada elemento em diferentes condições. Essa especificação orienta a implementação. Em nossos testes, os componentes com comportamento documentado produziram resultados melhores do que os entregues pelo processo tradicional.

5. Comportamento da imagem

Evite que imagens ultrapassem os limites dos containers. Configure o frame da imagem e defina as constraints. Fit e Fill costumam atender à maioria dos casos.

6. Imagens Decorativas

Evite que imagens decorativas de fundo — formas, ilustrações e elementos flutuantes — ultrapassem o frame ou o container principal, salvo quando isso for intencional e controlado.

Defina a posição (top, bottom, left e right) e as dimensões de acordo com o layout.

Quando necessário, use position: absolute para imagens decorativas, inclusive em containers com auto-layout. Verifique também as constraints do elemento.

7. Configure sua interface para ser responsiva

Crie layouts responsivos. Quando o craft já prevê os comportamentos em diferentes telas, a implementação em código exige menos ajustes.

Agradeço a Veras, Allan, Pierre, Papas, Gabs e Gabi, que trabalham comigo e contribuíram muito para chegarmos até aqui. É muito bom trabalhar com vocês!

Estas dicas ajudam você a começar. Mas, é importante lembrar que o primeiro resultado dificilmente ficará bom, então sempre revise e refine o trabalho. Use a IA como apoio; as decisões continuam sendo suas. Pensar desta forma tem me ajudado a lidar com tantas novidades.

E aí? Tem mais alguma dica? Me conta.