Como exportar Adobe XD para HTML
Miscelânea / / November 29, 2021
Adobe XD é uma ferramenta de design incrível que permite criar designs fantásticos de sites com facilidade, sem qualquer experiência anterior em desenvolvimento web. Você pode simplesmente importar arquivos PSD de seu projeto de Photoshop e criar uma IU de site atraente.
Esses designs ajudam muito os desenvolvedores a entender como você deseja que o seu site se pareça e a tornar o processo de desenvolvimento um pouco mais fácil da parte deles. No entanto, há apenas um número limitado de maneiras de exportar os projetos do software.
Você pode escolher salvá-los como um arquivo XD e esperar que o desenvolvedor já tenha o software instalado em seu sistema ou exportar cada prancheta individualmente PNG arquivo que pode ser um pouco inconveniente de usar.
Felizmente, há um terceiro útil plugar que permite exportar as pranchetas como arquivos HTML e é sobre isso que falarei neste artigo. Mas antes de chegarmos a isso, há algo que você precisa saber.
Observação: O arquivo HTML gerado com esse método não deve, de forma alguma, ser tratado como uma base para uma página da web completa. Este método é apenas um meio de compartilhar facilmente seus projetos com um desenvolvedor e não um processo de desenvolvimento de site funcional.
Exportar arquivos Adobe XD para HTML usando plug-ins
Agora que já resolvemos isso, basta seguir estas etapas simples para baixar o plug-in necessário e, em seguida, exportar os arquivos Adobe XD para HTML:
Passo 1: Clique no botão do menu de hambúrguer no canto superior esquerdo do software.
Passo 2: Role para baixo e clique na opção Plugins. Isso abrirá um novo painel Plugins à direita do menu principal.
Etapa 3: Selecione a opção Descobrir plug-ins no painel Plug-ins.
Passo 4: Na página seguinte, procure por HTML e clique no botão Instalar ao lado do plugin Web Export.
Depois de instalar o plug-in necessário, abra o projeto que deseja exportar para HTML e continue com as etapas a seguir. Para este artigo, usarei uma prancheta Adobe XD gratuita que encontrei online.
Etapa 5: Selecione a prancheta que deseja exportar clicando nela.
Etapa 6: Agora clique no botão de menu, navegue até o painel Plug-ins e escolha a opção Exportar prancheta nas novas configurações do plug-in Exportar para a Web.
Na mesma janela, você também pode optar por exportar várias pranchetas ou a última prancheta editada.
Etapa 7: No pop-up Exportar prancheta, adicione um nome para o arquivo e selecione a pasta na qual deseja salvar o arquivo, clicando no ícone de pasta pequena ao lado da opção Exportar pasta.
Etapa 8: Agora, se você deseja adicionar um script externo, folha de estilo ou fontes alternativas ao arquivo exportado, pode adicioná-los na mesma janela.
Etapa 9: Em seguida, você pode escolher as dimensões do arquivo HTML de saída digitando os valores no espaço em branco próximo à opção Tamanho.
Etapa 10: Para garantir que o projeto seja dimensionado corretamente, você também pode selecionar várias configurações de dimensionamento na mesma janela, marcando a caixa ao lado de cada opção.
Etapa 11: Além disso, você pode escolher quaisquer configurações adicionais, como navegação pelo teclado, atualização automática, etc. marcando as caixas ao lado das opções.
Etapa 12: Depois de finalizar todas as configurações, basta clicar no botão azul Exportar e pronto. Sua prancheta aparecerá como um arquivo HTML na pasta de destino que você selecionou anteriormente.
Na mesma janela, você também poderá copiar o CSS e a marcação de sua prancheta se também quiser compartilhar essas informações com seu desenvolvedor.
Mais uma vez, observe que o HTML exportado não pode de forma alguma ser usado para desenvolver um site totalmente funcional. No momento, não há como você publicar um projeto Adobe XD na web diretamente e, de acordo com vários discussões nos fóruns da Adobe, não haverá um tão cedo.
Adobe XD é apenas uma ferramenta de prototipagem que permite criar um design inicial sem código. Depois de ter um design pronto, você pode usar uma plataforma como o Dreamweaver para converter seu design em um site. Mas, para isso, você precisará de alguma experiência anterior em desenvolvimento web ou precisará contratar alguém que o faça.
Exporte seu arquivo Adobe XD para HTML
Então, agora que você sabe como exportar seu arquivo Adobe XD para HTML, tenho certeza que poderá compartilhar facilmente suas pranchetas com um desenvolvedor ou cliente. E você não terá que se preocupar com problemas de compatibilidade. Instale o plugin imediatamente e comece a exportar suas pranchetas com facilidade.
Próximo: Confira no artigo a seguir alguns sites interativos gratuitos nos quais você pode aprender a codificar e escrever seu próprio site em HTML.