Introdução

O algoritmo de recomendações do youtube recentemente me fez uma indicação interessante, uma ferramenta para construção da interface gráfica de forma drag and drop para React e outras bibliotecas/frameworks.

Olhando o git do BuilderIO eu achei algo que me animou mais ainda, um plugin que gera código a partir do Figma.

E essa é a descrição e experiência da primeira vez que uso a ferramenta. As minhas maiores dúvidas a respeito dessa tecnologia são: A qualidade do código gerado e essa ferramenta vai acabar com a necessidade programadores?

Prática

O design escolhido pode ser acessado nesse link.

Preparação do arquivo

É necessário agrupar os items e controlar o seu posicionamento utilizando o auto layout. Como é demonstrado no tutorial. Ainda é necessário fazer a "rasteraze selection" para transformar vetores complexos em imagens, itens como icones.

Veja o tutorial oficial da ferramenta, para um exemplo passo a passo.

Trabalhando com o layout gerado

A imagem inicial mostra que a tela foi criada, mas respeita a largura do item no figma e não é importado conforme a tela da página atual, parece ser algo criado com o objetivo da criação de componentes e não para ser importado uma página por vez, mas ainda é possível fazer edições usando a interface gráfica e deixar conforme desejado.

As fonts e customizações do texto não foram importadas corretamente, talvez tenha alguma configuração necessária para fazer funcionar corretamente.

Editando eu fui capaz de deixar mais próximo do layout original. Mas eu tive dificuldades com alguns componentes o header e a tab bar, ao selecionar a opção de style e aling não foi possível deixar no tamanho da tela, o componente não modificou. E similar aconteceu com o texto, que não consegui tirar do alinhamento central.

Código

O código gerado pode ser acessado no link. A estrutura gerada é bem linear, com todas as linhas de código no mesmo arquivo, o que pode ferir princípios de coesão e acoplamento, deixando o código mais complexo para se manter e atualizar.

Conclusão

Items que usam uma posição absoluta, são item mais difíceis de serem "traduzidos", como o objetivo do auto layout é organizar os espaços de forma que os items não se sobrepõem, quando é necessário fazer isso, é interessante deixar essa implementação para o código.

A parte forte da ferramenta é gerar uma estrutura com base no flex box e margins/paddings da página, e realmente pode acelerar parte do processo de desenvolvimento, porém pelo menos por agora é necessário ajustar algumas coisas.

Não é dessa vez que os programadores ficaram obsoletos, mas ferramentas como essa são o futuro facilitando cada vez mais o processo de desenvolvimento.