Como converter designs do Adobe XD em código HTML?
Transformar os arquivos de design do XD em código pronto para produção não é mais uma tarefa tediosa. Saiba como converter Adobe XD facilmente para HTML com App Builder.
Jason Beres
8min read
Você está familiarizado com essas etapas ao criar um novo design de aplicativo no Adobe XD do zero e colocá-lo em um produto completo, codificado e pronto para produção?
Ideação e design real – > wireframing e lidar com transferências de designer-desenvolvedor– > testes de usuário/usabilidade, iteração de mudanças com as partes interessadas – > e, finalmente, codificação
Então você sabe que o processo é complicado e demorado porque é dividido entre várias pessoas e equipes e envolve muitas fases.
Felizmente, o ano é 2022 e existem aceleradores abrangentes de aplicativos de design e desenvolvimento, como App Builder, que auxiliam nesse processo de design para código.
O que é o Adobe XD?
Criado desde o início para equipar os designers com um arsenal de ferramentas moderno e fácil de usar que lhes permite projetar wireframes e aplicativos, o Adobe XD é uma das plataformas de design gráfico vetorial mais populares do mercado atualmente. Juntamente com os recursos de wireframe, os designers podem criar protótipos de alta fidelidade, colaborar entre equipes durante o processo de design, configurar animações e coletar feedback.
Assim como as equipes de desenvolvimento de software e as equipes de TI, as equipes de design dependem da reutilização mais do que nunca para criar um ecossistema de ferramentas sustentável e dinâmico que economiza tempo e esforços em tarefas repetitivas. O Adobe XD oferece suporte a essas metas, pois permite a criação de componentes de nível superior, como botões e navegação, na forma de kits de interface do usuário que promovem designs reutilizáveis e simplificam o processo de design.
Para que serve o Adobe XD?
- Crie protótipos interativos de forma rápida e fácil, wireframes, adicione animação
- Execute protótipos em vários tipos e tamanhos de dispositivos
- Crie elementos de design e sistemas de design reutilizáveis
- Funcionalidades de troca, espaçamento, redimensionamento e alinhamento para seus layouts
- Compartilhando transferências e coletando feedback
Quais são as desvantagens do Adobe XD?
- Não inclui geração de código ou saída de código
- Sem recursos de teste / estudo de usuário
- Ecossistema de plug-in limitado
- Não é possível transferir seu protótipo ou wireframe para um design oficial
O Adobe XD foi projetado para criar wireframes e protótipos, sem a promessa de geração de código de obter qualquer tipo de resultado codificado em HTML. Programadores front-end e equipes de software digital devem intervir para produzir o código HTML necessário (ou tentar encontrar plug-ins online que possam ajudar), para que o design se torne real e possa ser sincronizado com tudo o que é desenvolvido no back-end.
O que é um arquivo Adobe XD?
Os arquivos do Adobe XD são arquivos .zip que incluem ativos de imagem, valores de cores, guia de estilo e alguns CSS. Em outras palavras, eles contêm elementos de design que podem ser convertidos em código HTML de qualidade de produção com ferramentas e automação adicionais. Em um cenário de transferência do desenvolvedor, o desenvolvedor deve ter o Adobe XD instalado em seu sistema para ler os arquivos de design. Por outro lado, converter arquivos de design em PNG ou PDF, embora possível, elementos de design, camadas e fluxo de aplicativos são perdidos na tradução.
Existem ferramentas e sites como o filext.com, que podem ser úteis para visualizar o conteúdo do arquivo XD, mas isso apenas adiciona mais tempo ao projeto e retarda o tempo de lançamento do produto no mercado.
O que significa Adobe XD para codificar?
Em essência, o Adobe XD para código refere-se ao processo de transformar os arquivos de design do XD em código. O objetivo de criar um novo design de produto digital usando o Adobe XD é poder convertê-lo em um aplicativo funcional com código real e utilizável. Normalmente, esse processo envolve muitas etapas, pessoas e tempo investidos em comunicação, colaboração, melhorias de design e correções manuais de código.
Quadros de arte e maquetes visuais devem ser criados. Os POCs devem comunicar claramente a ideia e o valor do design às partes interessadas. As transferências de designer-desenvolvedor devem ser extensas e detalhadas o suficiente para fornecer todas as especificações aos programadores e eliminar iterações, silos e falhas de comunicação em um estágio posterior antes de recriar o protótipo no código da interface do usuário. Também é necessário realizar testes de usuário e usabilidade para ver como os usuários interagem com o design, se ele valida seu propósito e se pode aumentar o valor de um determinado negócio.
Ferramentas de geração de código, como nossa App Builder ajudam as equipes a transformar designs de arquivos do Adobe XD em código pronto para produção em questão de minutos, não dias.
Como converter Adobe XD para código HTML usando App Builder?
Existem alguns pré-requisitos para começar:
- Faça login na sua conta ou inicie uma avaliação gratuita do App Builder
- Faça logon na sua conta ou inicie uma avaliação gratuita do Adobe XD
Depois de instalar o Adobe XD, você precisa instalar o plug-in Indigo.Design App Builder, que permite que o design codifique. Você pode acessá-lo no Stock & Marketplace -> Plugins no aplicativo Creative Cloud, basta pesquisar por Indigo.Design.
Figure 1: Adobe Creative Cloud Plugins
Depois de instalar o plug-in Indigo.Design App Builder, você precisa de um design baseado nos kits de interface do usuário do Infragistics. A maneira como o design para código funciona com App Builder é que os designs no Adobe XD devem ser criados usando os kits de interface do usuário, que são bibliotecas completas, extensíveis e personalizáveis de componentes de interface do usuário e padrões de interface do usuário que aceleram a fase de design.
Go to our sample’s library here https://pt-br.infragistics.com/resources/sample-applications/angular-people-app and download the Adobe XD files for the People App example.
Figure 2: People App Adobe XD files
Uma vez baixado, abra o arquivo do Adobe XD do aplicativo Pessoas no Adobe XD.
Figure 3: People App Opened in Adobe XD
A partir daqui, selecione a opção Criar novo aplicativo no menu Plug-ins -> Indigo.Design.
Figure 4: Create New App Menu Option
Em seguida, você verá a caixa de diálogo Criar Novo Aplicativo, onde poderá alterar seu Espaço de Trabalho e algumas outras opções no processo de criação do aplicativo.
Figure 5: Create New App Dialog
Depois de clicar em Criar aplicativo nessa caixa de diálogo, o arquivo do Adobe XD é enviado para a nuvem, onde é processado, analisado, dissecado e, por fim, transformado no Modelo de aplicativo comum do App Builder.
Figura 6: Implantação bem-sucedida do aplicativo Pessoas para App Builder na nuvem
Depois de clicar no link na caixa de diálogo de sucesso ou clicar no botão Visitar espaço de trabalho, você será levado diretamente para App Builder, onde verá seu novo aplicativo!
Figure 7: People App in you Workspace in App Builder
Em seguida, basta clicar no aplicativo Pessoas para editá-lo no App Builder!
Figure 8: People App in App Builder
A partir daqui, você pode visualizar o código, gerar Angular ou Blazor código ou começar a modificar o aplicativo no designer WYSIWYG. E como sabemos que os desenvolvedores adoram o GitHub, App Builder permite que eles carreguem todos os arquivos do aplicativo em um repositório GitHub ou baixem-nos como um pacote que pode ser executado localmente.
O que diferencia o App Builder de outras ferramentas de desenvolvimento de design low-code?
No"O que é desenvolvimento de baixo código e por que é importante?" artigo, destacamos que existem três desafios principais quando se trata de design para código:
- Falta de criadores de aplicativos de baixo código WYSIWYG para criar aplicativos prontos para empresas que funcionem com as estruturas mais populares, como Angular, React, Blazor e Web Components.
- Esboços e protótipos de design são difíceis de traduzir automaticamente em código real ou aplicativos funcionais.
- Poucas plataformas low-code têm um sistema de design integrado com uma gama abrangente de controles de UX, padrões e diretrizes de estilo que se traduzem em componentes de software e podem ser reutilizados ou contextualizados para a criação de soluções de marca.
E é aqui que o App Builder pode superar os exemplos de software de design para código dos concorrentes. O principal fator de diferenciação é que, ao contrário de outros fabricantes de aplicativos que produzem código espaguete não editável e não alterável, App Builder gera código limpo pronto para produção que é utilizável, testável e depurável.
Além disso, o App Builder conta com uma base de código compartilhada e inclui recursos integrados de desenvolvimento, teste, depuração e implantação, o que significa que este construtor de aplicativos da Web low-code baseado em nuvem da Infragistics, reduz seu tempo de desenvolvimento em 80%. Servindo como um único "multiplicador de força", ele agiliza o esboço, o design, a prototipagem, o teste do usuário, a visualização de código em tempo real e a geração de código, e também automatiza tarefas repetitivas, eliminando a complexidade por trás da criação de interfaces de usuário e permitindo que você crie um excelente UX sem codificação manual.
Dessa forma, todos – desde as partes interessadas, passando por designers e desenvolvedores – estão sendo consolidados em uma única plataforma sem pedir aos membros da equipe que desistam das ferramentas que usam até agora.
Além disso, o App Builder substitui tarefas de desenvolvimento, configura componentes de interface do usuário e interações que podem ser vinculadas a código, estilo e layouts.
Recentemente, lançamos uma visão geral e um tutorial abrangentes App Builder do produto. Você pode assisti-lo abaixo para aprender tudo sobre seus recursos e capacidades e começar a usá-lo.
Do ponto de vista comercial, nossa plataforma low-code reduz os custos de desenvolvimento de aplicativos democratizando o processo de desenvolvimento de aplicativos, ajuda a evitar rotatividade de tecnologia e automatiza os fluxos de trabalho de negócios. Por ser baseado em nuvem, o software construtor de aplicativos também promove escalabilidade e criptografia de dados.