Compartilhar designs e protótipos

Saiba como compartilhar seu protótipo com outras pessoas, fornecendo um link da Web para que elas o exibam em um navegador da Web. Saiba também como incorporar seus protótipos em sites com suporte a iFrames.

É possível compartilhar seus designs e protótipos online com partes interessadas de várias maneiras:

Pré-requisitos

Para compartilhar protótipos usando o recurso de compartilhamento online do Adobe XD, é necessário fazer logon com uma conta da Adobe no aplicativo de desktop da Adobe Creative Cloud ou em qualquer outro aplicativo da Adobe.

Você pode compartilhar o projeto inteiro (ou um subconjunto de pranchetas em um único fluxo) com os revisores por meio de um link da Web para exibir seu protótipo em um navegador.

Por exemplo, se você deseja compartilhar apenas pranchetas criadas para dispositivos móveis, selecione a prancheta inicial para dispositivos móveis e gere um novo link. Todas as pranchetas conectadas à prancheta inicial são incluídas no protótipo.

  1. Abra o arquivo do Adobe XD que deseja compartilhar.

  2. Clique no ícone Compartilhar online.

  3. Especifique um título para o seu protótipo.

  4. Opcionalmente, adicione um ícone de protótipo. Esse ícone aparecerá na tela inicial do usuário se o URL compartilhado for adicionado a uma tela inicial de dispositivos móveis.

  5. Clique em Novo link.

    Um URL é gerado.

    Quando editar seu design e quiser atualizar o URL gerado anteriormente, clique em Compartilhar novamente e em Atualizar link.

  6. Copie e cole o URL gerado em seu cliente de email ou em outros canais de comunicação para compartilhamento com outras pessoas.

    Você também pode criar um link direto para pranchetas específicas em seu design. Clique no link para seu protótipo compartilhado, navegue até uma prancheta específica e copie o URL para essa prancheta. Assim, você pode compartilhar o URL com os revisores.

Observação:
  • Se você compartilhar seu design sem antes fazer interações, todas as suas pranchetas serão submetidas a upload e os usuários poderão navegar usando as teclas de seta do teclado. A ordem das pranchetas é da esquerda para a direita, de cima para baixo.
  • Se o seu design incluir interações, somente as pranchetas conectadas à prancheta inicial serão submetidas a upload e compartilhadas.

Excluir links compartilhados anteriormente

Você pode excluir links compartilhados para o seu protótipo de duas maneiras:

Usando o link compartilhado:

  1. Clique no link do seu protótipo compartilhado.
  2. No site da Adobe Creative Cloud, clique no ícone de lixeira na parte superior esquerda. É necessário fazer logon para garantir que você é o autor do protótipo.

Usando a opção Gerenciar links no Adobe XD:

  1. Clique no ícone Compartilhar online.
  2. Na caixa de diálogo pop-up de compartilhamento, clique em Gerenciar links. O site da Adobe Creative Cloud é aberto no seu navegador, onde você pode gerenciar seus protótipos.
  3. Para excluir um protótipo, selecione-o e clique em Excluir.

Incorporar protótipos em páginas da Web

Ao compartilhar seu protótipo, você pode optar por incorporá-lo em outro site, blog ou portfólio do Behance (que ofereça suporte a caixas de texto).

  1. Abra o arquivo do Adobe XD que deseja compartilhar.

  2. Clique no ícone Compartilhar online.

  3. Na caixa de diálogo Compartilhar online que é aberta, clique em Criar link, e, depois que o link for criado, clique na guia Incorporar.

    Obter o código incorporado para o seu protótipo
    Obter o código incorporado para o seu protótipo

  4. Copie o código e cole-o em qualquer página da Web com suporte a caixas de texto.

Observação:

Também é possível compartilhar o código incorporado com outras pessoas para que elas possam incorporar seu protótipo aos sites delas.

Exibir protótipos compartilhados

Um revisor que esteja olhando para um protótipo compartilhado pode usar as seguintes ferramentas para obter a melhor experiência de exibição:

  • Dicas de pontos ativos: as dicas de pontos ativos estão disponíveis para todos que exibirem um protótipo compartilhado. Essas dicas indicam os elementos que são interativos e devem ser clicados pelos revisores. As dicas aparecem quando um revisor clica em um espaço na prancheta, no qual não há elemento interativo.
  • Modo de tela cheia: exiba protótipos em tela cheia no navegador e no modo de visualização. Os visualizadores devem clicar no ícone de tela cheia no canto superior direito da tela enquanto visualizam o protótipo compartilhado.
    O protótipo é expandido para preencher a tela inteira, permitindo que eles vejam todos os detalhes do design com clareza. Para sair do modo de tela cheia, os visualizadores devem pressionar a tecla Esc.

Adicionar comentários a protótipos compartilhados

O Adobe XD facilita a inserção de comentários de partes interessadas sobre protótipos compartilhados.

  1. Quando estiver pronto para compartilhar seu protótipo para revisão, clique no ícone Compartilhar online.

  2. Na janela pop-up exibida, selecione Permitir comentários e clique em Criar link.

    Observação: se você já compartilhou o protótipo, é possível atualizar o link antigo com o recurso de comentários habilitado.

  3. Clique em Copiar link e cole o link em seus canais de comunicação, como aplicativos de mensagens instantâneas ou de email, para compartilhá-lo com as partes interessadas.

    Quando os revisores abrirem o link compartilhado em um navegador, eles verão um ícone de comentários no canto superior direito.

  4. Os revisores podem clicar no ícone Mostrar comentários para abrir o painel de comentários. Eles podem fazer logon usando suas Adobe IDs ou como convidado.

    1. Para fazer logon usando uma Adobe ID, os revisores podem clicar em Fazer logon e fornecer as credenciais da Adobe.

    2. Para fazer logon como convidado, os revisores podem clicar em Fazer comentário como convidado na parte inferior do painel de comentários. Quando solicitados a fornecer um nome, eles deverão digitar um nome e selecionar Não sou um robô. Eles deverão responder corretamente a um desafio simples e clicar em Enviar.

      Observação:

      Se os revisores fizerem logon como convidado, comentarem, encerrarem a sessão (fechando ou atualizando o navegador) e fizerem logon novamente como convidado, eles não terão controle sobre os comentários anteriores. Por outro lado, se os revisores fizerem logon usando suas Adobe IDs, eles poderão editar os comentários que fizeram anteriormente.

  5. Os revisores podem digitar comentários na parte inferior do painel de comentários. Eles também podem fixar seus comentários para indicar áreas específicas na prancheta.

    Para fixar um comentário, os revisores podem digitar o comentário, clicar em Fixar na prancheta e arrastar o pino para o local específico na prancheta.

    Digite um comentário e arraste o pino para uma parte específica da prancheta
    Digite um comentário e arraste o pino para uma parte específica da prancheta

    O Adobe XD atribui um número a cada comentário fixado. Os comentários no painel Comentários também refletem esses números, permitindo que os designers identifiquem com facilidade o contexto do comentário.

  6. Como autor ou designer que iniciou a revisão, você receberá uma notificação assim que um revisor adicionar um comentário. Clique na notificação para abrir o protótipo compartilhado e exibir os comentários.

  7. Volte para o Adobe XD e atualize seu protótipo conforme necessário. 

    Em seguida, resolva os comentários no painel Comentários do protótipo compartilhado. Para resolver um comentário, clique em Resolver comentário. Comentários resolvidos desaparecem da sua lista de comentários, mas você pode exibi-los clicando em Exibir comentários resolvidos. Você também pode mover um comentário resolvido para a seção Não resolvidos no painel Comentários.

  8. Quando estiver pronto para compartilhar o protótipo atualizado, clique no ícone Compartilhar online, depois em Compartilhar novamente e clique em uma das seguintes opções:

    • Atualizar link: para disponibilizar o protótipo atualizado no mesmo link criado anteriormente e compartilhado com seus revisores. 
    • Novo link: para criar um novo link e compartilhá-lo com os revisores.

    É possível abrir o link em um navegador e optar por responder ao comentário que você abordou.

  9. Se os revisores estiverem exibindo o link do protótipo em um navegador, eles poderão atualizá-lo para que as mudanças sejam exibidas imediatamente (se você tiver atualizado o link anterior).

  10. Para fechar a revisão, clique no ícone Compartilhar online, desmarque a opção Permitir comentários e atualize o link novamente.

Receba ajuda com mais rapidez e facilidade

Novo usuário?