Programadores estão obsoletos? Gerando código do design no Figma para React
Published: 2021-05-13 14:14:44

# 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](https://github.com/builderio/builder) eu achei algo que me animou mais ainda, um plugin que gera código a partir do Figma. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77khsy96wjdy9vshejd8.png)

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](https://www.figma.com/file/NpYYdHDOMusk4QRmkLYfpt/Bagzz---Shopping-app-UI-kit-(Community)?node-id=15%3A378).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irpgn0y1kg5mt44kxsjo.png)

## Preparação do arquivo

É necessário agrupar os items e controlar o seu posicionamento utilizando o *auto layout*. Como é demonstrado no [tutorial](https://www.builder.io/c/docs/import-from-figma). Ainda é necessário fazer a "rasteraze selection" para transformar vetores complexos em imagens, itens como icones.

Veja o [tutorial](https://www.builder.io/c/docs/import-from-figma) oficial da ferramenta, para um exemplo passo a passo.

## Trabalhando com o layout gerado

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpl11n20zihrs8tbymy6.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubxl89mlkg6b0au6gj20.png)

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](https://gist.github.com/andersonms1/d740aac86d49d260bc295a52fa78a525). 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.