Como exportar adobe xd para html

O Adobe XD é uma ferramenta de design incrível que permite criar facilmente designs de sites fantásticos sem qualquer experiência prévia de desenvolvimento da Web. Você pode apenas importar arquivos PSD do seu design do Photoshop e criar uma interface de usuário de website atraente.

Esses designs ajudam muito os desenvolvedores a entender como você deseja que o seu site seja, tornando o processo de desenvolvimento um pouco mais fácil para eles. No entanto, há apenas um número limitado de maneiras de exportar os designs do software.

Você pode optar por salvá-los como um arquivo XD e esperar que o desenvolvedor já tenha o software instalado em seu sistema ou exporte cada prancheta como um arquivo PNG individual que pode ser um pouco inconveniente de usar.

Também na

Melhores 3 ferramentas de design para criar maquetes e wireframes

Felizmente, há um prático plug-in de terceiros que permite exportar as pranchetas como arquivos HTML e é sobre isso que falarei. Mas antes de chegarmos a isso, há algo que você precisa saber.

Nota: O arquivo HTML gerado usando esse método não deve ser tratado como uma base para uma página da Web completa. Esse método é apenas um meio de compartilhar facilmente seus projetos com um desenvolvedor e não um processo de desenvolvimento de website funcional.

Exportar arquivos do Adobe XD para HTML usando plug-ins

Agora que tiramos isso do caminho, basta seguir estas etapas simples para fazer o download do plug-in necessário e exportar os arquivos do Adobe XD para HTML:

Passo 1: Clique no botão do menu hamburger no canto superior esquerdo do software.

Etapa 2: role até o fim e, em seguida, clique na opção Plugins. Isso abrirá um novo painel Plugins à direita do menu principal.

Etapa 3: selecione a opção Discover Plugins no painel Plugins.

Etapa 4: Na página seguinte, pesquise por HTML e, em seguida, clique no botão Instalar ao lado do plug-in de exportação da Web.

Depois de instalar o plug-in necessário, abra o projeto que você deseja exportar para HTML e continue com as etapas a seguir. Para este artigo, estarei usando uma prancheta gratuita do Adobe XD que encontrei on-line.

Etapa 5: selecione a prancheta que você deseja exportar clicando nela.

Passo 6: Agora clique no botão menu, navegue até o painel Plugins e escolha a opção Exportar prancheta nas novas configurações do plug-in Web Export.

Na mesma janela, você também pode optar por exportar várias pranchetas ou a última prancheta que você editou.

Passo 7: No pop-up Exportar prancheta, adicione um nome para o arquivo e, em seguida, selecione a pasta na qual você deseja salvar o arquivo, clicando no minúsculo ícone de pasta ao lado da opção Exportar pasta.

Passo 8: Agora, se você quiser adicionar um script externo, folha de estilo ou fontes alternativas ao arquivo exportado, você 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 ao lado da opção Tamanho.

Etapa 10: Para garantir que o projeto seja dimensionado corretamente, você também pode selecionar várias configurações de escala na mesma janela, marcando a caixa ao lado de cada opção.

Passo 11: Além disso, você pode escolher qualquer configuração adicional, como navegação por 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 selecionada 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. A partir de agora, não há como você publicar um projeto do Adobe XD diretamente na Web e, de acordo com várias discussões nos fóruns da Adobe, não haverá um tão cedo.

O Adobe XD é apenas uma ferramenta de prototipagem que permite criar um design inicial sem código. Depois de ter um projeto pronto, você pode usar uma plataforma como o Dreamweaver para converter seu projeto em um site. Mas para isso, você precisará de alguma experiência prévia em desenvolvimento da Web ou precisará contratar alguém que tenha.

Também na

#desenhar

Clique aqui para ver nossa página de artigos de design

Exportar seu arquivo do Adobe XD para HTML

Portanto, agora que você sabe como exportar seu arquivo do Adobe XD para HTML, tenho certeza de que poderá compartilhar facilmente suas pranchetas com um desenvolvedor ou um cliente. E você não precisa se preocupar com problemas de compatibilidade. Instale o plug-in imediatamente e comece a exportar suas pranchetas com facilidade.

Em seguida: Confira o seguinte artigo para alguns sites interativos gratuitos nos quais você pode aprender como codificar e escrever seu próprio site HTML.