Transformando telas no Adobe XD em aplicações Flutter
A Adobe anunciou recentemente um novo plugin para o Adobe XD, ele promete dar aos desenvolvedores Flutter a possibilidade de criar telas no editor e exportarem em código Dart para ser adicionado em seu aplicativo.
Vamos ver como isso funciona?
Requisitos
- Adobe XD atualizado (consulte o aplicativo Adobe Creative Cloud para verificar atualizações)
- Instalação do plugin XD_To_Flutter Plugin no Adobe XD
- Instalação do Framework Flutter
Criando tela no Adobe XD
Após criar a(s) tela(s) de sua escolha para ser exportada em um projeto Flutter, você deverá clicar em plugins e selecionar o plugin XD to flutter para ver as opções do mesmo (Figura 1).
Como exemplo, criamos uma tela simples de visualização de um produto para um aplicativo de compras.
Exportando tela para código
Para exportamos nossas telas para código dart, precisamos adicionar o plugin adobe_xd em um projeto Flutter ( se não tiver, cria um rsrs). Esse plugin é o responsável por fazer o trabalho pesado de gerar o código correspondente a nossas telas.
Para adicionar o plugin, abra o arquivo pubspec.yaml e insira:
dependencies:
adobe_xd: ^0.1.3Feito isso, no Adobe XD , basta clicar na opção Export All Widgets disponível na aba do plugin. Será solicitado a localização do seu projeto Flutter e após isso a exportação será iniciada.
Observação
Caso sua tela contenha imagens, assim como coloquei na tela de exemplo, a exportação não leva em consideração elas. É necessário a exportação individual de cada uma.
Para tal, clique na opção UI Panel disponível na aba do plugin, selecione a imagem e clique no botão Export Image (Figura 2).
Em testes realizados por mim, arquivos SVG conseguiram ser exportados com sucesso ao código.
Considerações Finais
Após o código gerado, foi necessário fazer algumas modificações para conectar com o fluxo do projeto (já esperado) e adicionar os widgets correspondentes das imagens que não conseguiram ser exportadas.
Apesar do plugin ainda estar em desenvolvimento, o mesmo já demostra ser uma ferramenta interessante para quem buscar construir telas cada vez mais fiéis ao proposto em wireframes (Figura 3).
Saiba mais sobre o plugin no github: XD to Flutter Plugin
Todo o código fonte desenvolvido aqui (Projeto Flutter e Projecto Adobe XD) pode ser encontrado no link abaixo:
Espero ter contribuindo de alguma forma , até a próxima galera :)
