Do Figma ao código: como ajudei a repensar o processo de UI na Fraktal
Design System codificado, prototipação com IA e os ganhos — e limites — de aproximar design e desenvolvimento.
O problema não era só desenhar mais rápido
Na Fraktal, o UX já entregava mapeamentos detalhados de telas, caminhos e elementos. Ainda assim, converter esse material em interfaces prontas para validação consumia muitas horas.
Com contratos orientados por horas e a pressão por agilizar os MVPs, a liderança propôs criar UI direto em código, com apoio de IA. A direção estava colocada, mas o processo ainda precisava ser estruturado.
O papel que assumi
Minha contribuição começou pela consistência. Construí um Design System base para a Fraktal, com componentes essenciais, cores semânticas e padrões visuais compartilhados, e depois adaptei essa referência para uma base codificada.
Dois processos, duas dinâmicas
A diferença estava no meio do caminho: o Figma ficou com os wireframes de média fidelidade, e a alta fidelidade passou para o código.
Design System como ponte entre design e engenharia
A IA precisava de referências claras para que diferentes interfaces não virassem projetos visualmente independentes. O Design System codificado oferecia uma linguagem comum: padrões reutilizáveis, consistência visual e uma base aproveitável na implementação.
A experimentação em código
Trabalhamos no ambiente da empresa, em Vue.js e Nuxt. As ferramentas da época muitas vezes sugeriam estruturas diferentes da nossa stack, o que exigia adequação e trabalho manual.
O aprendizado veio da prática, de workshops e da formação AI Creative Builders. O valor estava no processo e nos critérios, não na ferramenta.
O que mudou na prática
Nos MVPs menores em que experimentamos a abordagem, percebemos ganhos relevantes de velocidade.
O que a velocidade revelou
No Figma, desenhar em detalhe fazia emergir perguntas que o discovery não tinha antecipado: uma regra de negócio sem resposta, um estado não definido, um acesso que precisava ser revisto. Essas dúvidas viravam conversas com UX e engenharia antes do desenvolvimento.
Ao avançar mais rápido para o código, nem sempre preservamos esse espaço. Algumas pesquisas e validações ficaram pendentes. O problema não era o código: uma revisão crítica também pode acontecer sobre protótipos codificados. Faltou manter essas pausas dentro do processo.
“Acelerar a construção da interface não resolve automaticamente as incertezas do produto.”
O que levei para minha prática
A experiência ampliou meu repertório em Design Engineering e mudou minha relação com o handoff. Passei a entender melhor como decisões de UI se traduzem em componentes, estruturas de código e consumo de APIs.